Auto-configure sourceMap option, based on compiler.devtool (#19)

Author: retyui

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 4.1.0
+
+- Auto-configure `sourceMap` option, based on [`.devtool`](https://webpack.js.org/configuration/devtool/#devtool)
+
 ## 4.0.0
 
 - Migrate to the latest [`clean-css`](https://clean-css.github.io/) version `5.x.x`

README.md

@@ -29,7 +29,6 @@ Then add the plugin to your webpack config. For example:
 const isProduction = process.env.NODE_ENV === "production";
 
 module.exports = {
-  mode: isProduction ? "production" : "development",
   module: {
     rules: [
       {
@@ -77,6 +76,10 @@ This option enables/disables minify, useful to easily disable on development mod
 
 This option enables/disables output warnings (default: `false`)
 
+#### `sourceMap: boolean`
+
+Enables/Disables generation of source maps. (default: `compiler.devtool`)
+
 ## `CleanCSS` module options
 
 - [clean-css/clean-css#constructor-options](https://github.com/jakubpawlowicz/clean-css#constructor-options)

package.json

@@ -1,9 +1,9 @@
 {
 	"name": "clean-css-loader",
-	"version": "4.0.0",
+	"version": "4.1.0",
 	"main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "dependencies": {
+	"types": "lib/index.d.ts",
+	"dependencies": {
 		"clean-css": "^5.0.0"
 	},
 	"peerDependencies": {
@@ -19,7 +19,7 @@
 		}
 	},
 	"scripts": {
-    "pree2e": "yarn build",
+		"pree2e": "yarn build",
 		"e2e": "yarn update-e2e && yarn test",
 		"force-clean": "rimraf ./test/e2e/webpack*/node_modules/ ./test/e2e/webpack*/tests/**/*.test.js",
 		"install-sub": "yarn link && cd test/e2e/webpack5 && yarn && yarn build && cd ../../..",
@@ -36,7 +36,7 @@
 		"loader"
 	],
 	"repository": "https://github.com/retyui/clean-css-loader",
-  "author": "David <4661784+retyui@users.noreply.github.com>",
+	"author": "David <4661784+retyui@users.noreply.github.com>",
 	"license": "MIT",
 	"files": ["lib"],
 	"engines": {
@@ -53,6 +53,7 @@
 		"prettier": "^2.4.1",
 		"rimraf": "^3.0.2",
 		"schema-utils": "^3.1.1",
+		"source-maps": "^1.0.12",
 		"typescript": "^4.4.3",
 		"webpack": "^5.53.0"
 	}

prettier.config.js

@@ -1,7 +1,7 @@
 import CleanCSS from "clean-css";
 import { getOptions } from "loader-utils";
 import { validate } from "schema-utils";
-
+import type { RawSourceMap } from "source-map";
 import type { LoaderContext } from "webpack";
 import type { JSONSchema7 } from "schema-utils/declarations/validate";
 
@@ -15,6 +15,7 @@ type CleanCSSOptions = Omit<
 interface LoaderOptions extends CleanCSSOptions {
   skipWarn?: boolean;
   disable?: boolean;
+  sourceMap?: boolean;
 }
 
 interface SourceMap {
@@ -32,6 +33,16 @@ interface AdditionalData {
   webpackAST: object;
 }
 
+function parsePrevSourceMap(
+  prevSourceMap?: string | SourceMap
+): RawSourceMap | string | undefined {
+  if (prevSourceMap != null && typeof prevSourceMap === "object") {
+    return JSON.stringify(prevSourceMap);
+  }
+
+  return undefined;
+}
+
 function cleanCssLoader(
   this: LoaderContext<LoaderOptions>,
   content: string | Buffer,
@@ -44,38 +55,42 @@ function cleanCssLoader(
   const loaderOptions = getOptions(this) || {};
 
   validate(schema as JSONSchema7, loaderOptions, {
-    name: "group-css-media-queries-loader",
+    name: "clean-css-loader",
   });
 
-  const { disable, skipWarn, ...options } = loaderOptions;
+  const { sourceMap, disable, skipWarn, ...options } = loaderOptions;
+  const useSourceMap = Boolean(sourceMap ?? this.sourceMap);
 
   if (disable) {
     return callback(null, content, prevSourceMap, additionalData);
   }
 
   new CleanCSS({
-    returnPromise: true,
     ...options,
+    returnPromise: true,
+    sourceMap: useSourceMap,
   })
-    .minify(
-      content,
-      // @ts-ignore
-      prevSourceMap
-    )
+    .minify(content, parsePrevSourceMap(prevSourceMap))
     .then((output) => {
       if (!skipWarn && Array.isArray(output.warnings)) {
         output.warnings.forEach((warning) => {
           this.emitWarning(new Error(warning));
         });
       }
 
-      return callback(
-        null,
-        output.styles,
-        // @ts-ignore
-        output.sourceMap,
-        additionalData
-      );
+      let resultSourceMap;
+
+      if (useSourceMap && output.sourceMap) {
+        resultSourceMap = {
+          ...JSON.parse(output.sourceMap.toString()),
+          // @ts-ignore
+          sources: prevSourceMap?.sources || [this.resourcePath],
+          // @ts-ignore
+          sourcesContent: prevSourceMap?.sourcesContent || [content.toString()],
+        };
+      }
+
+      return callback(null, output.styles, resultSourceMap, additionalData);
     })
     .catch(callback);
 }

src/index.ts

@@ -19,8 +19,7 @@ const runW5 = (input, options = {}) =>
     );
   });
 
-const expectOutput = (input, output) =>
-  expect(input.replace(/\r\n/g, "\n")).toEqual(output);
+const expectOutput = (input, output) => expect(input.replace(/\r\n/g, "\n")).toEqual(output);
 
 describe("clean-css-loader", () => {
   describe("webpack 5", () => {
@@ -92,9 +91,7 @@ describe("clean-css-loader", () => {
       });
       expectOutput(css, "a{display:block}");
       expect(warn).toEqual([]);
-      expect(map.toString()).toEqual(
-        `{"version":3,"sources":["$stdin"],"names":[],"mappings":"AAAA,EAAI,QAAU"}`
-      );
+      expect(map).toEqual({ version: 3, sources: [undefined], names: [], mappings: "AAAA,EAAI,QAAU", sourcesContent: ["a { display : block; }"] });
     });
   });
 });

test/unit/test.js

@@ -2270,6 +2270,16 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+node-addon-api@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-2.0.2.tgz#432cfa82962ce494b132e9d72a15b29f71ff5d32"
+  integrity sha512-Ntyt4AIXyaLIuMHF6IOoTakB3K+RWxwtsHNRxllEoA6vPwP9o4866g6YWDLUdnucilZhmkxiHwHr11gAENw+QA==
+
+node-gyp-build@^4.2.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
+  integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -2585,6 +2595,14 @@ source-map@^0.7.3, source-map@~0.7.2:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+source-maps@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/source-maps/-/source-maps-1.0.12.tgz#0e0eee71102c0ace62a9fba8203a79989ca1f482"
+  integrity sha512-G7fZoB+oFf9lk+n59IxnRUnpDmz8vvTuGKZQQHXDhICLW9J0vvKhmQKFiSffEZ+DgLOAOSbRRA1NiJzf+BH0+Q==
+  dependencies:
+    node-addon-api "^2.0.0"
+    node-gyp-build "^4.2.1"
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"