Adds whitelister utility & configuration for whitelisting css libraries

Author: chasegiunta

build/webpack.prod.conf.js

@@ -15,6 +15,9 @@ const ManifestPlugin = require('webpack-manifest-plugin')
 const PurgecssPlugin = require('purgecss-webpack-plugin')
 const glob = require('glob-all')
 
+// whitelister for purgecss to help with libraries
+const whitelister = require('purgecss-whitelister')
+
 // Custom PurgeCSS extractor for Tailwind that allows special characters in
 // class names.
 // 
@@ -74,6 +77,8 @@ const webpackConfig = merge(baseWebpackConfig, {
         path.join(__dirname, './../**/*.vue'),
         path.join(__dirname, './../src/**/*.js')
       ]),
+      whitelist: whitelister(config.build.purgecssWhitelist),
+      whitelistPatterns: config.build.purgecssWhitelistPatterns,
       extractors: [
         {
           extractor: TailwindExtractor,

config/index.js

@@ -51,6 +51,17 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
 
+    // Whitelist selectors to stop purgecss from removing them from your CSS
+    // You can pass in whole stylesheets to whitelist everything from thirdparty libs
+    // Accepts string paths, array of strings, globby strings, or array of globby strings:
+    // ['./node_modules/lib1/*.css', './node_modules/lib2/*.scss']
+    purgecssWhitelist: [],
+
+    // Whitelist based on a regular expression.
+    // Ex: [/red$/] (selectors ending in 'red' will remain)
+    // https://www.purgecss.com/whitelisting
+    purgecssWhitelistPatterns: [],
+
     /**
      * Source Maps
      */

package.json

@@ -50,6 +50,7 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "purgecss-webpack-plugin": "^0.22.0",
+    "purgecss-whitelister": "^2.1.0",
     "rimraf": "^2.6.0",
     "sane": "^2.5.0",
     "semver": "^5.3.0",