purgecss-webpack-plugin 8.0.0 → 9.0.0

package/README.md

@@ -78,7 +78,7 @@ to filter out directories see the glob-all documentation [here](https://www.npmj
 
 ### Options
 
-The options available in purgecss [Configuration](https://www.purgecss.com/configuration.html) are also available in the webpack plugin with the exception of css and content.
+The webpack plugin passes the following options of the purgecss [Configuration](https://www.purgecss.com/configuration.html) to PurgeCSS: `defaultExtractor`, `extractors`, `fontFace`, `keyframes`, `variables`, `safelist`, `blocklist`, `dynamicAttributes` and `rejected`. The plugin purges the CSS assets of the compilation and uses `paths` as the content, so it doesn't take the `css` and `content` options. Source maps are generated when the webpack `devtool` option is set. Other options, such as `rejectedCss` or `skippedContentGlobs`, have no effect.
 
 - #### paths
 
@@ -116,6 +116,8 @@ new PurgeCSSPlugin({
 });
 ```
 
+The names are compared with the chunk names (for an entrypoint, its key in `entry`), not with the file names.
+
 - #### safelist
 
 Similar as for the `paths` option, you also can define a function for this option:

package/lib/purgecss-webpack-plugin.d.ts

@@ -32,8 +32,29 @@ export declare type ComplexSafelist = {
      * in the final CSS, even if `child-of-bg` is not found.
      *
      */
-    deep?: RegExp[];
-    greedy?: RegExp[];
+    deep?: StringRegExpArray;
+    /**
+     * You can safelist whole selectors if any part of that selector matches a
+     * pattern with `safelist.greedy`
+     *
+     * @example
+     *
+     * ```ts
+     * const purgecss = await new PurgeCSS().purge({
+     *   content: [],
+     *   css: [],
+     *   safelist: {
+     *     greedy: [/red$/]
+     *   }
+     * })
+     * ```
+     *
+     * In this example, selectors such as `button.bg-red.nonexistent-class`
+     * will be left in the final CSS, even if `button` and `nonexistent-class`
+     * are not found.
+     *
+     */
+    greedy?: StringRegExpArray;
     variables?: StringRegExpArray;
     keyframes?: StringRegExpArray;
 };
@@ -126,7 +147,7 @@ export declare interface PurgeCSSUserDefinedOptions {
     /** {@inheritDoc purgecss#Options.skippedContentGlobs} */
     skippedContentGlobs?: Array<string>;
     /** {@inheritDoc purgecss#Options.dynamicAttributes} */
-    dynamicAttributes?: string[];
+    dynamicAttributes?: StringRegExpArray;
 }
 
 /**
@@ -158,6 +179,12 @@ export declare interface RawCSS {
 export declare type SafelistFunction = () => ComplexSafelist;
 
 /**
+ * Strings and regular expressions an option is matched against. A string
+ * matches a value exactly, except a string written between slashes, like
+ * `"/^btn-/"` or `"/^btn-/i"`, which is parsed as a regular expression. This
+ * form lets configuration files that cannot contain regular expressions, such
+ * as `postcss.config.json`, use patterns.
+ *
  * @public
  */
 export declare type StringRegExpArray = Array<RegExp | string>;
@@ -169,8 +196,8 @@ export declare type UserDefinedOptions = Omit<PurgeCSSUserDefinedOptions, "css"
     paths: string[] | PathFunction;
     moduleExtensions?: string[];
     verbose?: boolean;
-    safelist: PurgeCSSUserDefinedOptions["safelist"] | SafelistFunction;
-    blocklist: PurgeCSSUserDefinedOptions["blocklist"] | BlocklistFunction;
+    safelist?: PurgeCSSUserDefinedOptions["safelist"] | SafelistFunction;
+    blocklist?: PurgeCSSUserDefinedOptions["blocklist"] | BlocklistFunction;
     only?: string[];
 };
 

package/lib/purgecss-webpack-plugin.esm.js

@@ -1,5 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
+import { pathToFileURL } from 'url';
 import { PurgeCSS, defaultOptions } from 'purgecss';
 import { sources } from 'webpack';
 
@@ -55,6 +56,7 @@ function getPurgeCSSOptions(pluginOptions, filesToSearch, asset, fileName, sourc
         variables: options.variables,
         safelist: options.safelist,
         blocklist: options.blocklist,
+        dynamicAttributes: options.dynamicAttributes,
         sourceMap: sourceMap ? { inline: false, to: fileName } : false,
     };
 }
@@ -72,7 +74,7 @@ function createSource(name, asset, purgeResult, sourceMap) {
         return new sources.RawSource(purgeResult.css);
     }
     const { source, map } = asset.sourceAndMap();
-    return new sources.SourceMapSource(purgeResult.css, name, purgeResult.sourceMap, source.toString(), map, false);
+    return new sources.SourceMapSource(purgeResult.css, name, purgeResult.sourceMap, source.toString(), map !== null && map !== void 0 ? map : undefined, false);
 }
 /**
  * @public
@@ -88,12 +90,23 @@ class PurgeCSSPlugin {
     initializePlugin(compilation) {
         compilation.hooks.additionalAssets.tapPromise(pluginName, async () => {
             let configFileOptions;
-            try {
-                const t = path.resolve(process.cwd(), "purgecss.config.js");
-                configFileOptions = await import(t);
-            }
-            catch {
-                // no config file present
+            const t = path.resolve(process.cwd(), "purgecss.config.js");
+            // the config file is optional, but an existing one that fails to load
+            // (e.g. a syntax error) is reported instead of being silently ignored
+            if (fs.existsSync(t)) {
+                try {
+                    const importedConfig = await import(pathToFileURL(t).href);
+                    // Handle both ES modules (direct export) and CommonJS (default export)
+                    configFileOptions =
+                        importedConfig.default && typeof importedConfig.default === "object"
+                            ? importedConfig.default
+                            : importedConfig;
+                }
+                catch (err) {
+                    throw new Error(`Error loading the config file ${t}: ${err}`, {
+                        cause: err,
+                    });
+                }
             }
             this.options = {
                 ...(configFileOptions ? configFileOptions : {}),
@@ -114,14 +127,14 @@ class PurgeCSSPlugin {
             return isFileOfTypes(name, [".css"]);
         });
         for (const chunk of compilation.chunks) {
-            const assetsToPurge = assetsFromCompilation.filter(([name]) => {
-                if (this.options.only) {
-                    if (!this.options.only.some((only) => name.includes(only))) {
-                        return false;
-                    }
-                }
-                return chunk.files.has(name);
-            });
+            // `only` lists chunk names, e.g. the entry names. Compare them with the
+            // chunk name, not with the asset path: a substring of the path also
+            // matches other chunks (`style` in `style_print.css` or `css/style/`)
+            if (this.options.only &&
+                !(chunk.name && this.options.only.includes(chunk.name))) {
+                continue;
+            }
+            const assetsToPurge = assetsFromCompilation.filter(([name]) => chunk.files.has(name));
             for (const [name, asset] of assetsToPurge) {
                 const filesToSearch = entryPaths.filter((v) => !styleExtensions.some((ext) => v.endsWith(ext)));
                 const sourceMapEnabled = !!compilation.compiler.options.devtool;

package/lib/purgecss-webpack-plugin.js

@@ -2,6 +2,7 @@
 
 var fs = require('fs');
 var path = require('path');
+var url = require('url');
 var purgecss = require('purgecss');
 var webpack = require('webpack');
 
@@ -77,6 +78,7 @@ function getPurgeCSSOptions(pluginOptions, filesToSearch, asset, fileName, sourc
         variables: options.variables,
         safelist: options.safelist,
         blocklist: options.blocklist,
+        dynamicAttributes: options.dynamicAttributes,
         sourceMap: sourceMap ? { inline: false, to: fileName } : false,
     };
 }
@@ -94,7 +96,7 @@ function createSource(name, asset, purgeResult, sourceMap) {
         return new webpack.sources.RawSource(purgeResult.css);
     }
     const { source, map } = asset.sourceAndMap();
-    return new webpack.sources.SourceMapSource(purgeResult.css, name, purgeResult.sourceMap, source.toString(), map, false);
+    return new webpack.sources.SourceMapSource(purgeResult.css, name, purgeResult.sourceMap, source.toString(), map !== null && map !== void 0 ? map : undefined, false);
 }
 /**
  * @public
@@ -110,12 +112,23 @@ class PurgeCSSPlugin {
     initializePlugin(compilation) {
         compilation.hooks.additionalAssets.tapPromise(pluginName, async () => {
             let configFileOptions;
-            try {
-                const t = path__namespace.resolve(process.cwd(), "purgecss.config.js");
-                configFileOptions = await import(t);
-            }
-            catch {
-                // no config file present
+            const t = path__namespace.resolve(process.cwd(), "purgecss.config.js");
+            // the config file is optional, but an existing one that fails to load
+            // (e.g. a syntax error) is reported instead of being silently ignored
+            if (fs__namespace.existsSync(t)) {
+                try {
+                    const importedConfig = await import(url.pathToFileURL(t).href);
+                    // Handle both ES modules (direct export) and CommonJS (default export)
+                    configFileOptions =
+                        importedConfig.default && typeof importedConfig.default === "object"
+                            ? importedConfig.default
+                            : importedConfig;
+                }
+                catch (err) {
+                    throw new Error(`Error loading the config file ${t}: ${err}`, {
+                        cause: err,
+                    });
+                }
             }
             this.options = {
                 ...(configFileOptions ? configFileOptions : {}),
@@ -136,14 +149,14 @@ class PurgeCSSPlugin {
             return isFileOfTypes(name, [".css"]);
         });
         for (const chunk of compilation.chunks) {
-            const assetsToPurge = assetsFromCompilation.filter(([name]) => {
-                if (this.options.only) {
-                    if (!this.options.only.some((only) => name.includes(only))) {
-                        return false;
-                    }
-                }
-                return chunk.files.has(name);
-            });
+            // `only` lists chunk names, e.g. the entry names. Compare them with the
+            // chunk name, not with the asset path: a substring of the path also
+            // matches other chunks (`style` in `style_print.css` or `css/style/`)
+            if (this.options.only &&
+                !(chunk.name && this.options.only.includes(chunk.name))) {
+                continue;
+            }
+            const assetsToPurge = assetsFromCompilation.filter(([name]) => chunk.files.has(name));
             for (const [name, asset] of assetsToPurge) {
                 const filesToSearch = entryPaths.filter((v) => !styleExtensions.some((ext) => v.endsWith(ext)));
                 const sourceMapEnabled = !!compilation.compiler.options.devtool;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "purgecss-webpack-plugin",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "PurgeCSS plugin for webpack - Remove unused css",
   "author": "Ffloriel",
   "homepage": "https://purgecss.com",
@@ -18,6 +18,9 @@
     "purify"
   ],
   "license": "MIT",
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "main": "lib/purgecss-webpack-plugin.js",
   "module": "./lib/purgecss-webpack-plugin.esm.js",
   "types": "./lib/purgecss-webpack-plugin.d.ts",
@@ -32,28 +35,27 @@
     "type": "git",
     "url": "git+https://github.com/FullHuman/purgecss.git"
   },
-  "scripts": {
-    "build": "ts-node build.ts",
-    "test": "jest"
-  },
   "dependencies": {
-    "purgecss": "^8.0.0",
-    "webpack": ">=5.95.0"
+    "purgecss": "^9.0.0"
   },
   "bugs": {
     "url": "https://github.com/FullHuman/purgecss/issues"
   },
   "devDependencies": {
-    "@types/webpack-sources": "^3.2.3",
-    "css-loader": "^7.1.2",
-    "mini-css-extract-plugin": "^2.9.1"
+    "css-loader": "^7.1.5",
+    "fast-glob": "^3.3.3",
+    "mini-css-extract-plugin": "^2.10.2",
+    "webpack": "^5.112.2"
   },
   "peerDependencies": {
-    "webpack": ">=5.0.0"
+    "webpack": "^5.0.0"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "9269dbc8b589832bab90d29f5821fc4cf55077d6"
-}
+  "scripts": {
+    "build": "ts-node build.ts",
+    "test": "jest"
+  }
+}