Replace postcss-csso as minifier

It's problematic, since it doesn't recognise at-rules
such as @container and @starting-style. It's also quite
unmaintained.

README.md

@@ -104,11 +104,6 @@ module.exports = {
 
 ⚠️ Note that you should _really_ **minify** and **purge** your app's CSS when building for production!
 
-Recommendations:
-
-- Purge with `@fullhuman/postcss-purgecss`.
-- Minify with `postcss-csso`
-
 If you'd like to use the Tailwind config values in your custom CSS, you can install this Lookbook as an npm module and use its exported `defaultPostCssPlugins` function in a PostCSS setup (see "API" below).
 
 ### Configure

lib/plugins/postcss-extract-media-query.js

@@ -4,7 +4,7 @@
 const fs = require('fs');
 const path = require('path');
 const postcss = require('postcss');
-const minify = require('postcss-csso');
+const minify = require('@csstools/postcss-minify');
 
 const toKebabCase = (str) => str.toLowerCase().replace(/\s+/g, '-');
 

lib/postcss-plugins.js

@@ -53,7 +53,7 @@ exports.defaultPlugins = ({
     ...(bundle
       ? [
           require('@fullhuman/postcss-purgecss')(purgeCssOpts),
-          require('postcss-csso'),
+          require('@csstools/postcss-minify'),
         ]
       : []),
   ];

package.json

@@ -50,10 +50,10 @@
     "postcss": "^8"
   },
   "dependencies": {
+    "@csstools/postcss-minify": "^2",
     "@fullhuman/postcss-purgecss": "^5",
     "autoprefixer": "^10",
     "postcss-color-function": "^4",
-    "postcss-csso": "lookback/postcss-csso#fix/csso-container-queries",
     "postcss-import": "^15",
     "postcss-nested": "^6",
     "tailwindcss": "=2.0.2"

postcss.config.js

@@ -3,7 +3,7 @@ const { defaultPlugins } = require('./lib/postcss-plugins');
 const path = require('path');
 const extractMediaQuery = require('./lib/plugins/postcss-extract-media-query');
 const header = require('./lib/plugins/postcss-header');
-const csso = require('postcss-csso');
+const minify = require('@csstools/postcss-minify');
 
 const extractDarkModeQueries = (dest, prod = false) =>
   extractMediaQuery({
@@ -32,6 +32,6 @@ module.exports = (ctx) => ({
     header({
       header: `/*! ${ctx.file.basename} v${version} ${new Date().toISOString()} */`,
     }),
-    ...(ctx.env === 'production' ? [csso] : []),
+    ...(ctx.env === 'production' ? [minify] : []),
   ],
 });

postcss.config.sample.js

@@ -1,43 +1,18 @@
-// A React/Preact centric PostCSS config for Lookbook
-
-// Default PostCSS plugins in able for the Lookbook to work
 const { defaultPostCssPlugins } = require('@lookback/lookbook');
-// Purge unused CSS from the final bundle
-const purgecss = require('@fullhuman/postcss-purgecss');
-// Minify CSS
-const csso = require('postcss-csso');
 
 const BUNDLE = !!process.env.BUNDLE;
 
-// Looking through all JSX files for selectors
-// that are unused in the CSS, and removes the selectors from the final CSS
-const purgeCssOpts = {
-  content: [
-    './src/**/*.{tsx,ts}',
-    './node_modules/@lookback/component/build/**/*.js',
-    // other file paths to template/component code which is
-    // making use of Lookbook CSS classes.
-  ],
-  whitelistPatterns: [/flex-\d/, /flex-grow/, /flex-shrink/],
-  extractors: [
-    {
-      extractor(content) {
-        // Matches Tailwind class names
-        return content.match(/[A-Za-z0-9-_:/]+/g) || [];
-      },
-
-      extensions: ['tsx', 'ts'],
-    },
-  ],
-};
-
 module.exports = {
   map: !BUNDLE && {
     inline: true,
   },
   plugins: [
-    ...defaultPostCssPlugins(),
-    // Purge unused selectors and minify CSS when bundling
-    ...(BUNDLE ? [purgecss(purgeCssOpts), csso] : []),
+      // Sending bundle: true to defaultPostCssPlugins() will:
+      // 1) Purge unused CSS rules.
+      // 2) Minify the full bundle.
+      //
+      // more plugins here..
+      ...defaultPostCssPlugins({ bundle: BUNDLE })
+      // .. and maybe here
   ],
 };