feat: support ECMA modules

Author: cap-Bernardito

src/index.js

@@ -59,7 +59,7 @@ export default async function loader(content, sourceMap, meta) {
       ? options.sourceMap
       : this.sourceMap;
 
-  const { plugins, processOptions } = getPostcssOptions(
+  const { plugins, processOptions } = await getPostcssOptions(
     this,
     loadedConfig,
     options.postcssOptions

src/utils.js

@@ -167,7 +167,26 @@ function pluginFactory() {
   };
 }
 
-function getPostcssOptions(
+async function getImportEsm(module, 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) {
+    const exports = await importESM(module);
+
+    return exports.default;
+  }
+
+  throw requireError;
+}
+
+async function getPostcssOptions(
   loaderContext,
   loadedConfig = {},
   postcssOptions = {}
@@ -255,38 +274,59 @@ function getPostcssOptions(
     try {
       // eslint-disable-next-line import/no-dynamic-require, global-require
       processOptions.parser = require(processOptions.parser);
-    } catch (error) {
-      loaderContext.emitError(
-        new Error(
-          `Loading PostCSS "${processOptions.parser}" parser failed: ${error.message}\n\n(@${file})`
-        )
-      );
+    } catch (requireError) {
+      try {
+        processOptions.parser = await getImportEsm(
+          processOptions.parser,
+          requireError
+        );
+      } catch (error) {
+        loaderContext.emitError(
+          new Error(
+            `Loading PostCSS "${processOptions.parser}" parser failed: ${error.message}\n\n(@${file})`
+          )
+        );
+      }
     }
   }
 
   if (typeof processOptions.stringifier === "string") {
     try {
       // eslint-disable-next-line import/no-dynamic-require, global-require
       processOptions.stringifier = require(processOptions.stringifier);
-    } catch (error) {
-      loaderContext.emitError(
-        new Error(
-          `Loading PostCSS "${processOptions.stringifier}" stringifier failed: ${error.message}\n\n(@${file})`
-        )
-      );
+    } catch (requireError) {
+      try {
+        processOptions.stringifier = await getImportEsm(
+          processOptions.stringifier,
+          requireError
+        );
+      } catch (error) {
+        loaderContext.emitError(
+          new Error(
+            `Loading PostCSS "${processOptions.stringifier}" stringifier failed: ${error.message}\n\n(@${file})`
+          )
+        );
+      }
     }
   }
 
   if (typeof processOptions.syntax === "string") {
     try {
       // eslint-disable-next-line import/no-dynamic-require, global-require
       processOptions.syntax = require(processOptions.syntax);
-    } catch (error) {
-      loaderContext.emitError(
-        new Error(
-          `Loading PostCSS "${processOptions.syntax}" syntax failed: ${error.message}\n\n(@${file})`
-        )
-      );
+    } catch (requireError) {
+      try {
+        processOptions.syntax = await getImportEsm(
+          processOptions.syntax,
+          requireError
+        );
+      } catch (error) {
+        loaderContext.emitError(
+          new Error(
+            `Loading PostCSS "${processOptions.syntax}" syntax failed: ${error.message}\n\n(@${file})`
+          )
+        );
+      }
     }
   }
 

test/fixtures/esparser/index.mjs

@@ -0,0 +1,9 @@
+function stringify() {
+  return "";
+}
+
+function parse() {
+  return "";
+}
+
+export default { stringify, parse };

test/fixtures/esparser/package.json

@@ -0,0 +1,11 @@
+{
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  },
+  "name": "test",
+  "version": "1.0.0"
+}

test/fixtures/esparser/runManual.mjs

@@ -0,0 +1,46 @@
+import webpack from 'webpack';
+import path from "path";
+
+const __dirname = path.resolve();
+const rootDir = path.resolve(__dirname, "test/helpers");
+
+const compiler = webpack({
+  target: 'node',
+  mode: "development",
+  devtool: false,
+  context: path.resolve(rootDir, "../fixtures"),
+  entry: path.resolve(rootDir, "../fixtures", "./sss/index.js"),
+  output: {
+    path: path.resolve(rootDir, "../outputs"),
+    filename: "[name].bundle.js",
+    chunkFilename: "[name].chunk.js",
+    publicPath: "/webpack/public/path/",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css|sss)$/i,
+        use: [
+          'css-loader',
+          {
+            loader: path.resolve(rootDir, "../../dist"),
+            options: {
+              postcssOptions: {
+                parser: path.resolve(rootDir, "../fixtures/esparser/index.mjs"),
+                stringifier: path.resolve(rootDir, "../fixtures/esparser/index.mjs"),
+                syntax: path.resolve(rootDir, "../fixtures/esparser/index.mjs"),
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [],
+});
+
+compiler.run((error) => {
+  if (error) {
+    throw error;
+  }
+});

test/postcssOptins.test.js

@@ -170,6 +170,54 @@ describe('"postcssOptions" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  // TODO jest have not good support for ES modules for testing it, tested manually
+  it.skip('should work with the "parser" option with "Object" value with ESM', async () => {
+    const compiler = getCompiler("./sss/index.js", {
+      postcssOptions: {
+        parser: path.resolve(__dirname, "../fixtures/esparser/index.mjs"),
+      },
+    });
+    const stats = await compile(compiler);
+
+    const codeFromBundle = getCodeFromBundle("style.sss", stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
+  // TODO jest have not good support for ES modules for testing it, tested manually
+  it.skip('should work with the "stringifier" option with "Object" value with ESM', async () => {
+    const compiler = getCompiler("./sss/index.js", {
+      postcssOptions: {
+        stringifier: path.resolve(__dirname, "../fixtures/esparser/index.mjs"),
+      },
+    });
+    const stats = await compile(compiler);
+
+    const codeFromBundle = getCodeFromBundle("style.sss", stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
+  // TODO jest have not good support for ES modules for testing it, tested manually
+  it.skip('should work with the "syntax" option with "Object" value with ESM', async () => {
+    const compiler = getCompiler("./sss/index.js", {
+      postcssOptions: {
+        syntax: path.resolve(__dirname, "../fixtures/esparser/index.mjs"),
+      },
+    });
+    const stats = await compile(compiler);
+
+    const codeFromBundle = getCodeFromBundle("style.sss", stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot("css");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
   it('should work with the "parser" option with "Function" value', async () => {
     const compiler = getCompiler("./sss/index.js", {
       postcssOptions: {