feat: added support processorOptions for cssnano

webpack-contrib · Mar 11, 2021 · 8865423 · 8865423
1 parent 53cba69
commit 8865423
Show file tree

Hide file tree

Showing 11 changed files with 1,458 additions and 1,188 deletions.
diff --git a/README.md b/README.md
@@ -380,6 +380,53 @@ module.exports = {
 };
 ```
 
+#### `processorOptions`
+
+Type: `Object`
+Default: `{ to: assetName, from: assetName }`
+
+Allows to specify options [`processoptions`](https://postcss.org/api/#processoptions) for the cssnano.
+The `parser`,` stringifier` and `syntax` can be either a function or a string indicating the module that will be imported.
+
+> ⚠️ **If a function is passed, the `parallel` option must be disabled.**.
+
+```js
+import sugarss from 'sugarss';
+
+module.exports = {
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin({
+        parallel: false,
+        minimizerOptions: {
+          processorOptions: {
+            parser: sugarss,
+          },
+        },
+      }),
+    ],
+  },
+};
+```
+
+```js
+module.exports = {
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          processorOptions: {
+            parser: 'sugarss',
+          },
+        },
+      }),
+    ],
+  },
+};
+```
+
 ### `warningsFilter`
 
 Type: `Function<(warning, file, source) -> Boolean>`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "prettier": "^2.1.2",
     "sass-loader": "^10.0.2",
     "standard-version": "^9.0.0",
+    "sugarss": "^3.0.3",
     "webpack": "^4.45.0"
   },
   "keywords": [

diff --git a/src/minify.js b/src/minify.js
@@ -1,5 +1,4 @@
 const cssnano = require('cssnano');
-
 /*
  * We bring to the line here, because when passing result from the worker,
  * the warning.toString is replaced with native Object.toString
@@ -8,6 +7,34 @@ function warningsToString(warnings) {
   return warnings.map((i) => i.toString());
 }
 
+async function load(module) {
+  let exports;
+
+  try {
+    // eslint-disable-next-line import/no-dynamic-require, global-require
+    exports = require(module);
+
+    return exports;
+  } catch (requireError) {
+    let importESM;
+
+    try {
+      // eslint-disable-next-line no-new-func
+      importESM = new Function('id', 'return import(id);');
+    } catch (e) {
+      importESM = null;
+    }
+
+    if (requireError.code === 'ERR_REQUIRE_ESM' && importESM) {
+      exports = await importESM(module);
+
+      return exports.default;
+    }
+
+    throw requireError;
+  }
+}
+
 const minify = async (options) => {
   const {
     name,
@@ -18,8 +45,6 @@ const minify = async (options) => {
     minify: minifyFn,
   } = options;
 
-  const postcssOptions = { to: name, from: name };
-
   if (minifyFn) {
     const result = await minifyFn(
       { [name]: input },
@@ -35,6 +60,42 @@ const minify = async (options) => {
     };
   }
 
+  const postcssOptions = {
+    to: name,
+    from: name,
+    ...minimizerOptions.processorOptions,
+  };
+
+  if (typeof postcssOptions.parser === 'string') {
+    try {
+      postcssOptions.parser = await load(postcssOptions.parser);
+    } catch (error) {
+      throw new Error(
+        `Loading PostCSS "${postcssOptions.parser}" parser failed: ${error.message}\n\n(@${name})`
+      );
+    }
+  }
+
+  if (typeof postcssOptions.stringifier === 'string') {
+    try {
+      postcssOptions.stringifier = await load(postcssOptions.stringifier);
+    } catch (error) {
+      throw new Error(
+        `Loading PostCSS "${postcssOptions.stringifier}" stringifier failed: ${error.message}\n\n(@${name})`
+      );
+    }
+  }
+
+  if (typeof postcssOptions.syntax === 'string') {
+    try {
+      postcssOptions.syntax = await load(postcssOptions.syntax);
+    } catch (error) {
+      throw new Error(
+        `Loading PostCSS "${postcssOptions.syntax}" syntax failed: ${error.message}\n\n(@${name})`
+      );
+    }
+  }
+
   if (inputSourceMap) {
     // TODO remove `inline` value for the `sourceMap` option
     postcssOptions.map = {
@@ -66,7 +127,6 @@ async function transform(options) {
     '__dirname',
     `'use strict'\nreturn ${options}`
   )(exports, require, module, __filename, __dirname);
-
   const result = await minify(options);
 
   if (result.error) {

diff --git a/test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack5 b/test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack5
@@ -104,7 +104,7 @@ exports[`CssMinimizerPlugin should work and do not use memory cache when the "ca
 
 exports[`CssMinimizerPlugin should work and generate real content hash: assets 1`] = `
 Object {
-  "entry.19e4764f9c1d9fe130e2.01741fc98b90f2f0954e.635720ae0ca713ce150b.css": "body{color:red}a{color:#00f}",
+  "entry.19e4764f9c1d9fe130e2.c5d73cda61db28e71841.6a2aa6642f0109a40c41.css": "body{color:red}a{color:#00f}",
 }
 `;
 

diff --git a/test/__snapshots__/cssMinimizerOptions-option.test.js.snap.webpack4 b/test/__snapshots__/cssMinimizerOptions-option.test.js.snap.webpack4
@@ -20,3 +20,15 @@ exports[`when applied with "minimizerOptions" option matches snapshot for "disca
 exports[`when applied with "minimizerOptions" option matches snapshot for "mergeRules" option (disable): entry.css 1`] = `"body{color:red}body{font-weight:700}"`;
 
 exports[`when applied with "minimizerOptions" option matches snapshot for "mergeRules" option (enable [default]): entry.css 1`] = `"body{color:red;font-weight:700}"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "parser" option with "Function" value: index.sss 1`] = `"a{color:#000}"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "parser" option with "String" value: index.sss 1`] = `"a{color:#000}"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "stringifier" option with "Function" value: entry.css 1`] = `"body  color:reda  color:#00f"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "stringifier" option with "String" value: entry.css 1`] = `"body  color:reda  color:#00f"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "syntax" option with "Function" value: index.sss 1`] = `"a  color:#000"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "syntax" option with "String" value: index.sss 1`] = `"a  color:#000"`;
diff --git a/test/__snapshots__/cssMinimizerOptions-option.test.js.snap.webpack5 b/test/__snapshots__/cssMinimizerOptions-option.test.js.snap.webpack5
@@ -20,3 +20,15 @@ exports[`when applied with "minimizerOptions" option matches snapshot for "disca
 exports[`when applied with "minimizerOptions" option matches snapshot for "mergeRules" option (disable): entry.css 1`] = `"body{color:red}body{font-weight:700}"`;
 
 exports[`when applied with "minimizerOptions" option matches snapshot for "mergeRules" option (enable [default]): entry.css 1`] = `"body{color:red;font-weight:700}"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "parser" option with "Function" value: index.sss 1`] = `"a{color:#000}"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "parser" option with "String" value: index.sss 1`] = `"a{color:#000}"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "stringifier" option with "Function" value: entry.css 1`] = `"body  color:reda  color:#00f"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "stringifier" option with "String" value: entry.css 1`] = `"body  color:reda  color:#00f"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "syntax" option with "Function" value: index.sss 1`] = `"a  color:#000"`;
+
+exports[`when applied with "minimizerOptions" option matches snapshot for "syntax" option with "String" value: index.sss 1`] = `"a  color:#000"`;