fix(loadConfig): added fix when loading postcss esm configs

src/utils.js

@@ -108,6 +108,10 @@
         }
       }
 
+      if (result.default) {
+        return result.default;
+      }
+
       return result;
     },
     ".cjs": defaultLoadersSync[".cjs"],
@@ -130,6 +134,10 @@
         throw new Error("ESM is not supported");
       }
 
+      if (result.default) {
+        return result.default;
+      }
+
       return result;
     },
   };

test/config-autoload.test.js

@@ -116,6 +116,45 @@ describe("autoload config", () => {
     );
   });
 
+  it('should load ESM version of "postcss.config.js" with "Array" syntax of plugins', async () => {
+    const loadedConfig = await loadConfig(
+      loaderContext,
+      path.resolve(testDirectory, "js/array-esm-js"),
+    );
+
+    expect(loadedConfig.config.map).toEqual(false);
+    expect(loadedConfig.config.from).toEqual(
+      "./test/fixtures/config-autoload/js/object/index.css",
+    );
+    expect(loadedConfig.config.to).toEqual(
+      "./test/fixtures/config-autoload/js/object/expect/index.css",
+    );
+    expect(Object.keys(loadedConfig.config.plugins).length).toEqual(4);
+    expect(loadedConfig.filepath).toEqual(
+      path.resolve(testDirectory, "js/array-esm-js", "postcss.config.js"),
+    );
+  });
+
+  // TODO Test manually with NODE_OPTIONS=--experimental-vm-modules to enable ESM support in jest
+  it.skip('should load "postcss.config.mjs" with "Array" syntax of plugins', async () => {
+    const loadedConfig = await loadConfig(
+      loaderContext,
+      path.resolve(testDirectory, "js/array-mjs"),
+    );
+
+    expect(loadedConfig.config.map).toEqual(false);
+    expect(loadedConfig.config.from).toEqual(
+      "./test/fixtures/config-autoload/js/object/index.css",
+    );
+    expect(loadedConfig.config.to).toEqual(
+      "./test/fixtures/config-autoload/js/object/expect/index.css",
+    );
+    expect(Object.keys(loadedConfig.config.plugins).length).toEqual(4);
+    expect(loadedConfig.filepath).toEqual(
+      path.resolve(testDirectory, "js/array-mjs", "postcss.config.mjs"),
+    );
+  });
+
   it('should load "postcss.config.ts" with "Array" syntax of plugins', async () => {
     const loadedConfig = await loadConfig(
       loaderContext,

test/fixtures/config-autoload/js/array-esm-js/imports/section.css

@@ -0,0 +1,3 @@
+.import {
+  color: goldenrod;
+}

test/fixtures/config-autoload/js/array-esm-js/index.css

@@ -0,0 +1,5 @@
+@import 'imports/section.css';
+
+.test {
+  color: cyan;
+}

test/fixtures/config-autoload/js/array-esm-js/index.js

@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style

test/fixtures/config-autoload/js/array-esm-js/postcss.config.js

@@ -0,0 +1,21 @@
+import postcssNested from 'postcss-nested';
+export default function (api) {
+  return {
+    parser: 'sugarss',
+    syntax: 'sugarss',
+    map: api.mode === 'development' ? 'inline' : false,
+    from: './test/fixtures/config-autoload/js/object/index.css',
+    to: './test/fixtures/config-autoload/js/object/expect/index.css',
+    plugins: [
+      'postcss-import',
+      [
+        'postcss-nested',
+        {
+          // Options
+        }
+      ],
+      postcssNested,
+      postcssNested({ /* Options */ }),
+    ]
+  }
+};

test/fixtures/config-autoload/js/array-mjs/imports/section.css

@@ -0,0 +1,3 @@
+.import {
+  color: goldenrod;
+}

test/fixtures/config-autoload/js/array-mjs/index.css

@@ -0,0 +1,5 @@
+@import 'imports/section.css';
+
+.test {
+  color: cyan;
+}

test/fixtures/config-autoload/js/array-mjs/index.js

@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style

test/fixtures/config-autoload/js/array-mjs/postcss.config.mjs

@@ -0,0 +1,21 @@
+import postcssNested from 'postcss-nested';
+export default function (api) {
+  return {
+    parser: 'sugarss',
+    syntax: 'sugarss',
+    map: api.mode === 'development' ? 'inline' : false,
+    from: './test/fixtures/config-autoload/js/object/index.css',
+    to: './test/fixtures/config-autoload/js/object/expect/index.css',
+    plugins: [
+      'postcss-import',
+      [
+        'postcss-nested',
+        {
+          // Options
+        }
+      ],
+      postcssNested,
+      postcssNested({ /* Options */ }),
+    ]
+  }
+};