FullHuman · Quidam74 · Dec 17, 2021 · Dec 17, 2021 · Dec 17, 2021 · Dec 17, 2021
diff --git a/packages/purgecss-webpack-plugin/README.md b/packages/purgecss-webpack-plugin/README.md
@@ -136,6 +136,23 @@ new PurgeCSSPlugin({
 
 If `true` all removed selectors are added to the [Stats Data](https://webpack.js.org/api/stats/) as `purged`.
 
+* #### rejectedCss
+
+```ts
+// Output the rejected css as `[base]-rejected.[ext]`
+new PurgeCSSPlugin({
+  rejectedCss: true,
+});
+
+// or use a custom output path
+new PurgeCSSPlugin({
+  rejectedCss: '[base].rejected.css',
+});
+```
+Generate an output file containing the rejected css.  
+If the value is a string it will be used as a Webpack [template string](https://webpack.js.org/configuration/output/#template-strings) to generate the filename.
+If `true` the template path will default to `[base]-rejected.[ext]`. So for an entry point named `foo`, the purged file will be named `foo.css` and the rejected one `foo-rejected.css`  
+
 ## Contributing
 
 Please read [CONTRIBUTING.md](./../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

diff --git a/...ss-webpack-plugin/__tests__/cases/rejected-css-template-name/expected/styles.rejected.css b/...ss-webpack-plugin/__tests__/cases/rejected-css-template-name/expected/styles.rejected.css
@@ -0,0 +1,5 @@
+
+
+.rejected {
+  color: blue;
+}
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/src/content.html b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/src/content.html
@@ -0,0 +1,11 @@
+<html>
+
+<head>
+  <title>Purgecss webpack test</title>
+</head>
+
+<body>
+  <div class="preserved"></div>
+</body>
+
+</html>
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/src/index.js b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/src/index.js
@@ -0,0 +1 @@
+import "./style.css";
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/src/style.css b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/src/style.css
@@ -0,0 +1,8 @@
+
+.preserved {
+  color: red;
+}
+
+.rejected {
+  color: blue;
+}
diff --git a/...ages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/webpack.config.js b/...ages/purgecss-webpack-plugin/__tests__/cases/rejected-css-template-name/webpack.config.js
@@ -0,0 +1,44 @@
+const path = require("path");
+const glob = require("glob");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const PurgecssPlugin = require("../../../src").default;
+
+const PATHS = {
+  src: path.join(__dirname, "src"),
+};
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.js",
+  context: path.resolve(__dirname),
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          type: "css/mini-extract",
+          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}/*`),
+      rejectedCss: "[base].rejected.css",
+    }),
+  ],
+};
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/expected/styles-rejected.css b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/expected/styles-rejected.css
@@ -0,0 +1,5 @@
+
+
+.rejected {
+  color: blue;
+}
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/src/content.html b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/src/content.html
@@ -0,0 +1,11 @@
+<html>
+
+<head>
+  <title>Purgecss webpack test</title>
+</head>
+
+<body>
+  <div class="preserved"></div>
+</body>
+
+</html>
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/src/index.js b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/src/index.js
@@ -0,0 +1 @@
+import "./style.css";
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/src/style.css b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/src/style.css
@@ -0,0 +1,8 @@
+
+.preserved {
+  color: red;
+}
+
+.rejected {
+  color: blue;
+}
diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/webpack.config.js b/packages/purgecss-webpack-plugin/__tests__/cases/rejected-css/webpack.config.js
@@ -0,0 +1,44 @@
+const path = require("path");
+const glob = require("glob");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const PurgecssPlugin = require("../../../src").default;
+
+const PATHS = {
+  src: path.join(__dirname, "src"),
+};
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.js",
+  context: path.resolve(__dirname),
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          type: "css/mini-extract",
+          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}/*`),
+      rejectedCss: true,
+    }),
+  ],
+};
diff --git a/packages/purgecss-webpack-plugin/__tests__/index.test.ts b/packages/purgecss-webpack-plugin/__tests__/index.test.ts
@@ -38,6 +38,8 @@ describe("Webpack integration", () => {
     "path-and-safelist-functions",
     "simple",
     "simple-with-exclusion",
+    "rejected-css",
+    "rejected-css-template-name",
   ];
 
   for (const testCase of cases) {

diff --git a/packages/purgecss-webpack-plugin/src/index.ts b/packages/purgecss-webpack-plugin/src/index.ts
@@ -115,6 +115,7 @@ export default class PurgeCSSPlugin {
           keyframes: options.keyframes,
           output: options.output,
           rejected: options.rejected,
+          rejectedCss: !!options.rejectedCss,
           variables: options.variables,
           safelist: options.safelist,
           blocklist: options.blocklist,
@@ -128,6 +129,23 @@ export default class PurgeCSSPlugin {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         compilation.updateAsset(name, new ConcatSource(purged.css));
+        if (purged.rejectedCss !== undefined) {
+          const rejectedCssSource = new ConcatSource(purged.rejectedCss);
+          const rejectedNameTemplate = typeof options.rejectedCss === "string" ? options.rejectedCss : "[base]-rejected.[ext]";
+          const rejectedName = compilation.getPath(rejectedNameTemplate, {
+            basename: path.basename(name, path.extname(name)),
+            filename: name,
+          });
+          if (compilation.getAsset(rejectedName) === undefined) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            compilation.emitAsset(rejectedName, rejectedCssSource);
+          } else {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            compilation.updateAsset(rejectedName, rejectedCssSource);
+          }
+        }
       }
     }
   }

diff --git a/packages/purgecss-webpack-plugin/src/types/index.ts b/packages/purgecss-webpack-plugin/src/types/index.ts
@@ -29,6 +29,7 @@ export interface UserDefinedOptions {
   moduleExtensions?: string[];
   output?: string;
   rejected?: boolean;
+  rejectedCss?: boolean | string;
   stdin?: boolean;
   stdout?: boolean;
   variables?: boolean;