fix(purgecss-webpack-plugin): add sourcemap support #409

BREAKING CHANGE: drop webpack 4 support

Author: Ffloriel

package-lock.json

@@ -9,6 +9,7 @@ import {
  * 
  * @public
  */
-export interface UserDefinedOptions extends Omit<PurgeCSSUserDefinedOptions, "css"> {
+export interface UserDefinedOptions extends Omit<PurgeCSSUserDefinedOptions,"content" | "css"> {
+  content?: PurgeCSSUserDefinedOptions['content'];
   contentFunction?: (sourceFile: string) => Array<string | RawContent>;
 }

packages/postcss-purgecss/src/types/index.ts

@@ -11,6 +11,7 @@ const PATHS = {
 
 module.exports = {
   mode: "development",
+  devtool: false,
   entry: "./src/index.js",
   context: path.resolve(__dirname),
   optimization: {

packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/webpack.config.js

@@ -11,6 +11,7 @@ const PATHS = {
 
 module.exports = {
   mode: "development",
+  devtool: false,
   entry: {
     bundle: "./src/index.js",
     legacy: "./src/legacy.js",

packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/webpack.config.js

@@ -14,6 +14,7 @@ const PATHS = {
 
 module.exports = {
   mode: "development",
+  devtool: "source-map",
   optimization: {
     splitChunks: {
       cacheGroups: {

packages/purgecss-webpack-plugin/__tests__/cases/simple/expected/styles.css

@@ -38,19 +38,18 @@
   },
   "dependencies": {
     "purgecss": "^4.1.3",
-    "webpack": "*",
-    "webpack-sources": "^3.2.0"
+    "webpack": ">=5.0.0"
   },
   "bugs": {
     "url": "https://github.com/FullHuman/purgecss/issues"
   },
   "devDependencies": {
     "@types/webpack-sources": "^3.2.0",
-    "css-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.1.0"
+    "css-loader": "^6.6.0",
+    "mini-css-extract-plugin": "^2.5.0"
   },
   "peerDependencies": {
-    "webpack": "*"
+    "webpack": ">=5.0.0"
   },
   "publishConfig": {
     "access": "public",

packages/purgecss-webpack-plugin/__tests__/cases/simple/webpack.config.js

@@ -1,8 +1,12 @@
 import * as fs from "fs";
 import * as path from "path";
-import { PurgeCSS, defaultOptions } from "purgecss";
-import { Compilation, Compiler } from "webpack";
-import { ConcatSource } from "webpack-sources";
+import {
+  PurgeCSS,
+  defaultOptions,
+  ResultPurge,
+  UserDefinedOptions as PurgeCSSUserDefinedOptions,
+} from "purgecss";
+import { Compilation, Compiler, sources } from "webpack";
 import { PurgedStats, UserDefinedOptions } from "./types";
 
 export * from "./types";
@@ -12,6 +16,7 @@ const pluginName = "PurgeCSS";
 
 /**
  * Get the filename without ?hash
+ *
  * @param fileName - file name
  */
 function getFormattedFilename(fileName: string): string {
@@ -23,6 +28,7 @@ function getFormattedFilename(fileName: string): string {
 
 /**
  * Returns true if the filename is of types of one of the specified extensions
+ *
  * @param filename - file name
  * @param extensions - extensions
  */
@@ -31,6 +37,78 @@ function isFileOfTypes(filename: string, extensions: string[]): boolean {
   return extensions.includes(extension);
 }
 
+function getPurgeCSSOptions(
+  pluginOptions: UserDefinedOptions,
+  filesToSearch: string[],
+  asset: sources.Source,
+  fileName: string,
+  sourceMap: boolean
+): PurgeCSSUserDefinedOptions {
+  const options = {
+    ...defaultOptions,
+    ...pluginOptions,
+    content: filesToSearch,
+    css: [
+      {
+        raw: asset.source().toString(),
+      },
+    ],
+  };
+
+  if (typeof options.safelist === "function") {
+    options.safelist = options.safelist();
+  }
+
+  if (typeof options.blocklist === "function") {
+    options.blocklist = options.blocklist();
+  }
+
+  return {
+    content: options.content,
+    css: options.css,
+    defaultExtractor: options.defaultExtractor,
+    extractors: options.extractors,
+    fontFace: options.fontFace,
+    keyframes: options.keyframes,
+    output: options.output,
+    rejected: options.rejected,
+    variables: options.variables,
+    safelist: options.safelist,
+    blocklist: options.blocklist,
+    sourceMap: sourceMap ? { inline: false, to: fileName } : false,
+  };
+}
+
+/**
+ * Create the Source instance result of PurgeCSS
+ *
+ * @param name - asset name
+ * @param asset - webpack asset
+ * @param purgeResult - result of PurgeCSS purge method
+ * @param sourceMap - wether sourceMap is enabled
+ * @returns the new Source
+ */
+function createSource(
+  name: string,
+  asset: sources.Source,
+  purgeResult: ResultPurge,
+  sourceMap: boolean
+): sources.Source {
+  if (!sourceMap || !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
+  );
+}
+
 /**
  * @public
  */
@@ -80,60 +158,34 @@ export class PurgeCSSPlugin {
           return this.options.only.some((only) => name.includes(only));
         }
 
-        return Array.isArray(chunk.files)
-          ? chunk.files.includes(name)
-          : chunk.files.has(name);
+        return chunk.files.has(name);
       });
 
       for (const [name, asset] of assetsToPurge) {
         const filesToSearch = entryPaths.filter(
           (v) => !styleExtensions.some((ext) => v.endsWith(ext))
         );
 
-        // Compile through Purgecss and attach to output.
-        // This loses sourcemaps should there be any!
-        const options = {
-          ...defaultOptions,
-          ...this.options,
-          content: filesToSearch,
-          css: [
-            {
-              raw: asset.source().toString(),
-            },
-          ],
-        };
-
-        if (typeof options.safelist === "function") {
-          options.safelist
-          options.safelist = options.safelist();
-        }
-
-        if (typeof options.blocklist === "function") {
-          options.blocklist = options.blocklist();
-        }
+        const sourceMapEnabled = !!compilation.compiler.options.devtool;
+        const purgeCSSOptions = getPurgeCSSOptions(
+          this.options,
+          filesToSearch,
+          asset,
+          name,
+          sourceMapEnabled
+        );
 
-        const purgecss = await new PurgeCSS().purge({
-          content: options.content,
-          css: options.css,
-          defaultExtractor: options.defaultExtractor,
-          extractors: options.extractors,
-          fontFace: options.fontFace,
-          keyframes: options.keyframes,
-          output: options.output,
-          rejected: options.rejected,
-          variables: options.variables,
-          safelist: options.safelist,
-          blocklist: options.blocklist,
-        });
+        const purgecss = await new PurgeCSS().purge(purgeCSSOptions);
         const purged = purgecss[0];
 
         if (purged.rejected) {
           this.purgedStats[name] = purged.rejected;
         }
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        compilation.updateAsset(name, new ConcatSource(purged.css));
+        compilation.updateAsset(
+          name,
+          createSource(name, asset, purged, sourceMapEnabled)
+        );
       }
     }
   }

packages/purgecss-webpack-plugin/package.json

@@ -28,7 +28,7 @@ export type PurgedStats = {
 /**
  * @public
  */
-export type UserDefinedOptions = Omit<PurgeCSSUserDefinedOptions, "css" | "content" | "safelist" | "blocklist"> & {
+export type UserDefinedOptions = Omit<PurgeCSSUserDefinedOptions, "css" | "content" | "safelist" | "blocklist" | "sourceMap"> & {
   paths: string[] | PathFunction;
   moduleExtensions?: string[];
   verbose?: boolean;

packages/purgecss-webpack-plugin/src/index.ts

@@ -606,7 +606,10 @@ class PurgeCSS {
       if (this.options.keyframes) this.removeUnusedKeyframes();
       if (this.options.variables) this.removeUnusedCSSVariables();
 
-      const postCSSResult = root.toResult({ map: this.options.sourceMap });
+      const postCSSResult = root.toResult({
+        map: this.options.sourceMap,
+        to: typeof this.options.sourceMap === 'object' ? this.options.sourceMap.to : undefined
+      });
       const result: ResultPurge = {
         css: postCSSResult.toString(),
         file: typeof option === "string" ? option : option.name,