From 31d8d16e806922a0f83f9d9b226256ed9cea525e Mon Sep 17 00:00:00 2001 From: David <4661784+retyui@users.noreply.github.com> Date: Thu, 23 Sep 2021 07:59:51 +0300 Subject: [PATCH] Auto-configure `sourceMap` option, based on `compiler.devtool` --- CHANGELOG.md | 4 ++++ README.md | 5 ++++- package.json | 11 ++++++----- prettier.config.js | 5 ----- src/index.ts | 47 ++++++++++++++++++++++++++++++---------------- test/unit/test.js | 7 ++----- yarn.lock | 18 ++++++++++++++++++ 7 files changed, 65 insertions(+), 32 deletions(-) delete mode 100644 prettier.config.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d90a9b..b2a63a3 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/README.md b/README.md index 91bd500..9a95510 100644 --- a/README.md +++ b/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) diff --git a/package.json b/package.json index 13258af..a94e341 100644 --- a/package.json +++ b/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" } diff --git a/prettier.config.js b/prettier.config.js deleted file mode 100644 index 2f821c7..0000000 --- a/prettier.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - printWidth: 80, - useTabs: false, - tabWidth: 2, -}; diff --git a/src/index.ts b/src/index.ts index 394501f..4261b95 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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, content: string | Buffer, @@ -44,24 +55,22 @@ 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) => { @@ -69,13 +78,19 @@ function cleanCssLoader( }); } - 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); } diff --git a/test/unit/test.js b/test/unit/test.js index b6705d3..8b32cea 100644 --- a/test/unit/test.js +++ b/test/unit/test.js @@ -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; }"] }); }); }); }); diff --git a/yarn.lock b/yarn.lock index c154f28..d002228 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"