Add whitelistPatternsChildren to config options

See https://www.purgecss.com/whitelisting#patterns

Author: Betree

README.md

@@ -157,7 +157,7 @@ new PurgecssPlugin({
 })
 ```
 
-* #### whitelist and whitelistPatterns
+* #### whitelist, whitelistPatterns and whitelistPatternsChildren
 
 Similar as for the `paths` option, you also can define functions for the these options:
 
@@ -171,10 +171,16 @@ function collectWhitelistPatterns() {
     return [/^whitelisted-/];
 }
 
+function collectWhitelistPatternsChildren() {
+    // do something to collect the whitelist
+    return [/^whitelisted-/];
+}
+
 // In the webpack configuration
 new PurgecssPlugin({
   whitelist: collectWhitelist,
-  whitelistPatterns: collectWhitelistPatterns
+  whitelistPatterns: collectWhitelistPatterns,
+  whitelistPatternsChildren: collectWhitelistPatternsChildren
 })
 ```
 

__tests__/__snapshots__/webpack-integration.test.js.snap

@@ -13,6 +13,10 @@ exports[`Webpack Integration Tests path-and-whitelist-functions 1`] = `
   color: rebeccapurple;
 }
 
+.whitelistedPatternChildren > p a {
+  color: orange;
+}
+
 md\\\\:w-2\\\\/3 {
   color: red;
 }

__tests__/cases/path-and-whitelist-functions/expected/styles.css

@@ -10,6 +10,10 @@
   color: rebeccapurple;
 }
 
+.whitelistedPatternChildren > p a {
+  color: orange;
+}
+
 md\:w-2\/3 {
   color: red;
 }

__tests__/cases/path-and-whitelist-functions/style.css

@@ -14,6 +14,10 @@
   color: rebeccapurple;
 }
 
+.whitelistedPatternChildren > p a {
+  color: orange;
+}
+
 md\:w-2\/3 {
   color: red;
 }

__tests__/cases/path-and-whitelist-functions/webpack.config.js

@@ -1,55 +1,56 @@
-const path = require('path')
-const glob = require('glob')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const PurgecssPlugin = require('../../../src/').default
+const path = require("path");
+const glob = require("glob");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const PurgecssPlugin = require("../../../src/").default;
 
 class CustomExtractor {
-    static extract(content) {
-        return content.match(/[A-z0-9-:/]+/g)
-    }
+  static extract(content) {
+    return content.match(/[A-z0-9-:/]+/g);
+  }
 }
 
 const PATHS = {
-    src: path.join(__dirname, 'src')
-}
+  src: path.join(__dirname, "src")
+};
 
 module.exports = {
-    mode: 'development',
-    entry: './src/index.js',
-    optimization: {
-        splitChunks: {
-            cacheGroups: {
-                styles: {
-                    name: 'styles',
-                    test: /\.css$/,
-                    chunks: 'all',
-                    enforce: true
-                }
-            }
+  mode: "development",
+  entry: "./src/index.js",
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          test: /\.css$/,
+          chunks: "all",
+          enforce: true
         }
-    },
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                use: [MiniCssExtractPlugin.loader, 'css-loader']
-            }
-        ]
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: '[name].css'
-        }),
-        new PurgecssPlugin({
-            paths: () => glob.sync(`${PATHS.src}/*`),
-            whitelist: () => ['whitelisted'],
-            whitelistPatterns: () => [/^whitelistedPat/],
-            extractors: [
-                {
-                    extractor: CustomExtractor,
-                    extensions: ['html', 'js']
-                }
-            ]
-        })
+      }
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"]
+      }
     ]
-}
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].css"
+    }),
+    new PurgecssPlugin({
+      paths: () => glob.sync(`${PATHS.src}/*`),
+      whitelist: () => ["whitelisted"],
+      whitelistPatterns: () => [/^whitelistedPat/],
+      whitelistPatternsChildren: () => [/^whitelistedPatternChildren/],
+      extractors: [
+        {
+          extractor: CustomExtractor,
+          extensions: ["html", "js"]
+        }
+      ]
+    })
+  ]
+};

lib/purgecss-webpack-plugin.d.ts

@@ -11,14 +11,16 @@ interface _Options extends Partial<PurgecssOptions> {
   content?: never
   whitelist?: any
   whitelistPatterns?: any
+  whitelistPatternsChildren?: any
 }
 
 declare namespace PurgecssWebpackPlugin {
   interface Options extends _Options {
     paths: string[] | (() => string[])
     only?: string[]
     whitelist?: string[] | (() => string[])
-    whitelistPatterns?: RegExp[] | (() => RegExp[])
+    whitelistPatterns?: RegExp[] | (() => RegExp[]),
+    whitelistPatternsChildren?: RegExp[] | (() => RegExp[]),
   }
 }
 

lib/purgecss-webpack-plugin.es.js

@@ -254,6 +254,10 @@ function () {
             options.whitelistPatterns = options.whitelistPatterns();
           }
 
+          if (typeof options.whitelistPatternsChildren === 'function') {
+            options.whitelistPatternsChildren = options.whitelistPatternsChildren();
+          }
+
           var purgecss = new Purgecss(options);
           compilation.assets[name] = new ConcatSource(purgecss.purge()[0].css);
         });

lib/purgecss-webpack-plugin.js

@@ -258,6 +258,10 @@ function () {
             options.whitelistPatterns = options.whitelistPatterns();
           }
 
+          if (typeof options.whitelistPatternsChildren === 'function') {
+            options.whitelistPatternsChildren = options.whitelistPatternsChildren();
+          }
+
           var purgecss = new Purgecss(options);
           compilation.assets[name] = new webpackSources.ConcatSource(purgecss.purge()[0].css);
         });

src/index.js

@@ -97,6 +97,9 @@ export default class PurgecssPlugin {
                 if (typeof options.whitelistPatterns === 'function') {
                     options.whitelistPatterns = options.whitelistPatterns()
                 }
+                if (typeof options.whitelistPatternsChildren === 'function') {
+                    options.whitelistPatternsChildren = options.whitelistPatternsChildren()
+                }
                 const purgecss = new Purgecss(options)
                 compilation.assets[name] = new ConcatSource(purgecss.purge()[0].css)
             })