Breaking: Run purgecss and minify as a part of defaultPlugins()

Take a bundle: bool flag and purge + minify is true. Defaults
to false.

index.js

@@ -6,9 +6,9 @@ exports.colors = colors;
 exports.tailwindConfig = tailwindConfig;
 
 /** PostCSS config for external use. */
-exports.postCssConfig = ({ pathToTailwindConf } = {}) => () => ({
+exports.postCssConfig = ({ pathToTailwindConf, bundle } = {}) => () => ({
   map: 'inline', // Sourcemaps
-  plugins: defaultPlugins({ pathToTailwindConf }),
+  plugins: defaultPlugins({ pathToTailwindConf, bundle }),
 });
 
 exports.defaultPostCssPlugins = defaultPlugins;

lib/postcss-plugins.js

@@ -1,16 +1,43 @@
 const path = require('path');
+const purgecss = require('@fullhuman/postcss-purgecss');
+const csso = require('postcss-csso');
 
 const LOOKBOOK_TAILWIND_CONF = path.resolve(
   path.join(__dirname, '..', 'tailwind.config.js')
 );
 
+// Looking through all React files for selectors
+// that are unused in the CSS, and removes the selectors from the final CSS
+const purgeCssOpts = {
+  content: [
+    // Source tree, with the app view code
+    './src/**/*.{tsx,ts}',
+    // Often imported components from our (built) lib in node_modules
+    './node_modules/@lookback/component/build/**/*.js',
+  ],
+  safelist: [/flex-\d/, /flex-grow/, /flex-shrink/, /LoadingDots/],
+  extractors: [
+    {
+      extractor(content) {
+        // Matches Tailwind class names
+        return content.match(/[A-Za-z0-9-_:/]+/g) || [];
+      },
+
+      extensions: ['tsx', 'ts'],
+    },
+  ],
+};
+
 exports.defaultPlugins = ({
   pathToTailwindConf = LOOKBOOK_TAILWIND_CONF,
+  /** If true, we'll minify and purge unused CSS classes. */
+  bundle = false,
 } = {}) => [
   require('postcss-import'),
   require('tailwindcss')(pathToTailwindConf),
   require('postcss-nested'),
   require('postcss-color-function'),
   require('postcss-hexrgba'),
   require('autoprefixer'),
+  ...(bundle ? [purgecss(purgeCssOpts), csso] : []),
 ];