feat: added lightningcss support (#192)

Author: alexander-akait

README.md

@@ -231,11 +231,11 @@ Useful for using and testing unpublished versions or forks.
 
 Possible options:
 
-- CssMinimizerPlugin.cssnanoMinify
-- CssMinimizerPlugin.cssoMinify
-- CssMinimizerPlugin.cleanCssMinify
-- CssMinimizerPlugin.esbuildMinify
-- CssMinimizerPlugin.parcelCssMinify
+- `CssMinimizerPlugin.cssnanoMinify`
+- `CssMinimizerPlugin.cssoMinify`
+- `CssMinimizerPlugin.cleanCssMinify`
+- `CssMinimizerPlugin.esbuildMinify`
+- `CssMinimizerPlugin.lightningCssMinify` (previously`CssMinimizerPlugin.parcelCssMinify`, the package was renamed, but we keep it for backward compatibility)
 - `async (data, inputMap, minimizerOptions) => {return {code: "a{color: red}", map: "...", warnings: [], errors: []}}`
 
 > **Warning**
@@ -558,7 +558,7 @@ module.exports = {
 };
 ```
 
-### Using custom minifier [@parcel/css](https://github.com/parcel-bundler/parcel-css)
+### Using custom minifier [lightningcss](https://github.com/parcel-bundler/lightningcss), previously `@parcel/css`
 
 **webpack.config.js**
 
@@ -570,7 +570,7 @@ module.exports = {
     minimize: true,
     minimizer: [
       new CssMinimizerPlugin({
-        minify: CssMinimizerPlugin.parcelCssMinify,
+        minify: CssMinimizerPlugin.lightningCssMinify,
         // Uncomment this line for options
         // minimizerOptions: { targets: { ie: 11 }, drafts: { nesting: true } },
       }),

package-lock.json

@@ -56,53 +56,57 @@
     },
     "@parcel/css": {
       "optional": true
+    },
+    "lightningcss": {
+      "optional": true
     }
   },
   "dependencies": {
-    "cssnano": "^5.1.13",
+    "cssnano": "^5.1.8",
     "jest-worker": "^27.5.1",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.13",
     "schema-utils": "^4.0.0",
     "serialize-javascript": "^6.0.0",
     "source-map": "^0.6.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.13",
-    "@babel/preset-env": "^7.18.10",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@parcel/css": "^1.13.0",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.12",
+    "@babel/preset-env": "^7.17.12",
+    "@commitlint/cli": "^17.0.0",
+    "@commitlint/config-conventional": "^17.0.0",
+    "@parcel/css": "^1.8.3",
     "@types/clean-css": "^4.2.5",
     "@types/csso": "^5.0.0",
     "@types/serialize-javascript": "^5.0.2",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^28.1.2",
-    "clean-css": "^5.3.1",
+    "babel-jest": "^28.1.0",
+    "clean-css": "^5.3.0",
     "copy-webpack-plugin": "^9.1.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "cssnano-preset-simple": "^4.0.0",
-    "csso": "^5.0.5",
-    "del": "^6.1.1",
-    "del-cli": "^4.0.0",
-    "esbuild": "^0.14.54",
-    "eslint": "^8.23.0",
+    "csso": "^5.0.3",
+    "del": "^6.1.0",
+    "del-cli": "^5.0.0",
+    "esbuild": "^0.15.7",
+    "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "lint-staged": "^12.5.0",
-    "memfs": "^3.4.7",
-    "mini-css-extract-plugin": "^2.6.1",
+    "jest": "^28.1.0",
+    "lightningcss": "^1.14.0",
+    "lint-staged": "^12.4.1",
+    "memfs": "^3.4.1",
+    "mini-css-extract-plugin": "^2.6.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "sass": "^1.54.8",
-    "sass-loader": "^13.0.2",
+    "prettier": "^2.6.2",
+    "sass": "^1.51.0",
+    "sass-loader": "^13.0.0",
     "standard-version": "^9.5.0",
     "sugarss": "^4.0.1",
-    "typescript": "^4.8.2",
-    "webpack": "^5.74.0"
+    "typescript": "^4.6.4",
+    "webpack": "^5.72.1"
   },
   "keywords": [
     "cssnano",

package.json

@@ -12,10 +12,11 @@ const {
   cleanCssMinify,
   esbuildMinify,
   parcelCssMinify,
+  lightningCssMinify,
 } = require("./utils");
 
 const schema = require("./options.json");
-const { minify } = require("./minify");
+const { minify: minifyWorker } = require("./minify");
 
 /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
 /** @typedef {import("webpack").Compiler} Compiler */
@@ -535,7 +536,7 @@ class CssMinimizerPlugin {
           try {
             result = await (getWorker
               ? getWorker().transform(serialize(options))
-              : minify(options));
+              : minifyWorker(options));
           } catch (error) {
             const hasSourceMap =
               inputSourceMap && CssMinimizerPlugin.isSourceMap(inputSourceMap);
@@ -721,5 +722,6 @@ CssMinimizerPlugin.cssoMinify = cssoMinify;
 CssMinimizerPlugin.cleanCssMinify = cleanCssMinify;
 CssMinimizerPlugin.esbuildMinify = esbuildMinify;
 CssMinimizerPlugin.parcelCssMinify = parcelCssMinify;
+CssMinimizerPlugin.lightningCssMinify = lightningCssMinify;
 
 module.exports = CssMinimizerPlugin;

src/index.js

@@ -306,16 +306,16 @@ async function esbuildMinify(input, sourceMap, minimizerOptions) {
         ? result.warnings.map((item) => {
             return {
               source: item.location && item.location.file,
-              // eslint-disable-next-line no-undefined
               line:
                 item.location && item.location.line
                   ? item.location.line
-                  : undefined,
-              // eslint-disable-next-line no-undefined
+                  : // eslint-disable-next-line no-undefined
+                    undefined,
               column:
                 item.location && item.location.column
                   ? item.location.column
-                  : undefined,
+                  : // eslint-disable-next-line no-undefined
+                    undefined,
               plugin: item.pluginName,
               message: `${item.text}${
                 item.detail ? `\nDetails:\n${item.detail}` : ""
@@ -347,6 +347,7 @@ async function esbuildMinify(input, sourceMap, minimizerOptions) {
   };
 }
 
+// TODO remove in the next major release
 /* istanbul ignore next */
 /**
  * @param {Input} input
@@ -391,11 +392,56 @@ async function parcelCssMinify(input, sourceMap, minimizerOptions) {
   };
 }
 
+/* istanbul ignore next */
+/**
+ * @param {Input} input
+ * @param {RawSourceMap | undefined} sourceMap
+ * @param {CustomOptions} minimizerOptions
+ * @return {Promise<MinimizedResult>}
+ */
+async function lightningCssMinify(input, sourceMap, minimizerOptions) {
+  const [[filename, code]] = Object.entries(input);
+  /**
+   * @param {Partial<import("lightningcss").TransformOptions>} [lightningCssOptions={}]
+   * @returns {import("lightningcss").TransformOptions}
+   */
+  const buildLightningCssOptions = (lightningCssOptions = {}) => {
+    // Need deep copy objects to avoid https://github.com/terser/terser/issues/366
+    return {
+      minify: true,
+      ...lightningCssOptions,
+      sourceMap: false,
+      filename,
+      code: Buffer.from(code),
+    };
+  };
+
+  // eslint-disable-next-line import/no-extraneous-dependencies, global-require
+  const lightningCss = require("lightningcss");
+
+  // Copy `esbuild` options
+  const lightningCssOptions = buildLightningCssOptions(minimizerOptions);
+
+  // Let `esbuild` generate a SourceMap
+  if (sourceMap) {
+    lightningCssOptions.sourceMap = true;
+  }
+
+  const result = await lightningCss.transform(lightningCssOptions);
+
+  return {
+    code: result.code.toString(),
+    // eslint-disable-next-line no-undefined
+    map: result.map ? JSON.parse(result.map.toString()) : undefined,
+  };
+}
+
 module.exports = {
   throttleAll,
   cssnanoMinify,
   cssoMinify,
   cleanCssMinify,
   esbuildMinify,
   parcelCssMinify,
+  lightningCssMinify,
 };

src/utils.js

@@ -191,6 +191,7 @@ describe("CssMinimizerPlugin", () => {
       CssMinimizerPlugin.buildWarning(
         "Warning test.css:1:1",
         "test.css",
+        // eslint-disable-next-line no-undefined
         undefined,
         new SourceMapConsumer(rawSourceMap)
       )
@@ -199,6 +200,7 @@ describe("CssMinimizerPlugin", () => {
       CssMinimizerPlugin.buildWarning(
         "Warning test.css:1:1",
         "test.css",
+        // eslint-disable-next-line no-undefined
         undefined,
         new SourceMapConsumer(rawSourceMap),
         new RequestShortener("/example.com/www/js/")
@@ -483,6 +485,7 @@ describe("CssMinimizerPlugin", () => {
     for (const assetName of Object.keys(assets)) {
       const [, webpackHash] = assetName.match(/^.+?\.(.+?)\..+$/);
       const { hashDigestLength, hashDigest, hashFunction } = output;
+      // eslint-disable-next-line global-require
       const cryptoHash = require("webpack")
         .util.createHash(hashFunction)
         .update(readAsset(assetName, compiler, stats))

test/CssMinimizerPlugin.test.js

@@ -315,6 +315,50 @@ exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" min
 
 exports[`"minify" option should work with "CssMinimizerPlugin.esbuildMinify" minifier: warning 1`] = `Array []`;
 
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps #2: assets 1`] = `
+Object {
+  "foo/foo.css": "body{color:red;font-weight:700}body a{text-align:center}
+/*# sourceMappingURL=foo.css.map*/",
+  "foo/foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo/foo.css\\",\\"mappings\\":\\"AAAA,+BCIE\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n  font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n  color: red;\\\\n  a {\\\\n    text-align: center;\\\\n  }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
+}
+`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps #2: error 1`] = `Array []`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps #2: warning 1`] = `Array []`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps: assets 1`] = `
+Object {
+  "foo.css": "body{color:red;font-weight:700}body a{text-align:center}
+/*# sourceMappingURL=foo.css.map*/",
+  "foo.css.map": "{\\"version\\":3,\\"file\\":\\"foo.css\\",\\"mappings\\":\\"AAAA,+BCIE\\",\\"sources\\":[\\"webpack:///./sourcemap/bar.scss\\",\\"webpack:///./sourcemap/foo.scss\\"],\\"sourcesContent\\":[\\"body {\\\\n  font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n  color: red;\\\\n  a {\\\\n    text-align: center;\\\\n  }\\\\n}\\"],\\"names\\":[],\\"sourceRoot\\":\\"\\"}",
+}
+`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps: error 1`] = `Array []`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and generate source maps: warning 1`] = `Array []`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and options for "lightningcss": assets 1`] = `
+Object {
+  "foo.css": "table.colortable td{text-align:center}table.colortable td.c{text-transform:uppercase}table.colortable td:first-child,table.colortable td:first-child+td{border:1px solid #000}table.colortable th{text-align:center;color:#fff;background:#000}.example{user-select:none;background:linear-gradient(#fff,#000);transition:all .5s;display:grid}",
+}
+`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and options for "lightningcss": error 1`] = `Array []`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier and options for "lightningcss": warning 1`] = `Array []`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier: assets 1`] = `
+Object {
+  "foo.css": "body{color:red;font-weight:700}body a{text-align:center}",
+}
+`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier: error 1`] = `Array []`;
+
+exports[`"minify" option should work with "CssMinimizerPlugin.lightningCssMinify" minifier: warning 1`] = `Array []`;
+
 exports[`"minify" option should work with "CssMinimizerPlugin.parcelCssMinify" minifier and generate source maps #2: assets 1`] = `
 Object {
   "foo/foo.css": "body{color:red;font-weight:700}body a{text-align:center}