From 52d8050335ca803572e9cc9eae9583c2bb505612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Lid=C3=A9n?= <jonas@lideen.se>
Date: Wed, 28 Feb 2024 12:40:16 +0100
Subject: [PATCH] fix: respect `default` when loading postcss esm configs

---
 src/utils.js                                  |  8 ++++
 test/config-autoload.test.js                  | 39 +++++++++++++++++++
 .../js/array-esm-js/imports/section.css       |  3 ++
 .../config-autoload/js/array-esm-js/index.css |  5 +++
 .../config-autoload/js/array-esm-js/index.js  |  3 ++
 .../js/array-esm-js/postcss.config.js         | 21 ++++++++++
 .../js/array-mjs/imports/section.css          |  3 ++
 .../config-autoload/js/array-mjs/index.css    |  5 +++
 .../config-autoload/js/array-mjs/index.js     |  3 ++
 .../js/array-mjs/postcss.config.mjs           | 21 ++++++++++
 10 files changed, 111 insertions(+)
 create mode 100644 test/fixtures/config-autoload/js/array-esm-js/imports/section.css
 create mode 100644 test/fixtures/config-autoload/js/array-esm-js/index.css
 create mode 100644 test/fixtures/config-autoload/js/array-esm-js/index.js
 create mode 100644 test/fixtures/config-autoload/js/array-esm-js/postcss.config.js
 create mode 100644 test/fixtures/config-autoload/js/array-mjs/imports/section.css
 create mode 100644 test/fixtures/config-autoload/js/array-mjs/index.css
 create mode 100644 test/fixtures/config-autoload/js/array-mjs/index.js
 create mode 100644 test/fixtures/config-autoload/js/array-mjs/postcss.config.mjs

diff --git a/src/utils.js b/src/utils.js
index 6f7d7014..0624d43d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -108,6 +108,10 @@ async function loadConfig(loaderContext, config, postcssOptions) {
         }
       }
 
+      if (result.default) {
+        return result.default;
+      }
+
       return result;
     },
     ".cjs": defaultLoadersSync[".cjs"],
@@ -130,6 +134,10 @@ async function loadConfig(loaderContext, config, postcssOptions) {
         throw new Error("ESM is not supported");
       }
 
+      if (result.default) {
+        return result.default;
+      }
+
       return result;
     },
   };
diff --git a/test/config-autoload.test.js b/test/config-autoload.test.js
index b3139828..5ef5b1ea 100644
--- a/test/config-autoload.test.js
+++ b/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,
diff --git a/test/fixtures/config-autoload/js/array-esm-js/imports/section.css b/test/fixtures/config-autoload/js/array-esm-js/imports/section.css
new file mode 100644
index 00000000..4568aa99
--- /dev/null
+++ b/test/fixtures/config-autoload/js/array-esm-js/imports/section.css
@@ -0,0 +1,3 @@
+.import {
+  color: goldenrod;
+}
diff --git a/test/fixtures/config-autoload/js/array-esm-js/index.css b/test/fixtures/config-autoload/js/array-esm-js/index.css
new file mode 100644
index 00000000..3b228825
--- /dev/null
+++ b/test/fixtures/config-autoload/js/array-esm-js/index.css
@@ -0,0 +1,5 @@
+@import 'imports/section.css';
+
+.test {
+  color: cyan;
+}
diff --git a/test/fixtures/config-autoload/js/array-esm-js/index.js b/test/fixtures/config-autoload/js/array-esm-js/index.js
new file mode 100644
index 00000000..07bf0b31
--- /dev/null
+++ b/test/fixtures/config-autoload/js/array-esm-js/index.js
@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style
diff --git a/test/fixtures/config-autoload/js/array-esm-js/postcss.config.js b/test/fixtures/config-autoload/js/array-esm-js/postcss.config.js
new file mode 100644
index 00000000..53cd49c0
--- /dev/null
+++ b/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 */ }),
+    ]
+  }
+};
diff --git a/test/fixtures/config-autoload/js/array-mjs/imports/section.css b/test/fixtures/config-autoload/js/array-mjs/imports/section.css
new file mode 100644
index 00000000..4568aa99
--- /dev/null
+++ b/test/fixtures/config-autoload/js/array-mjs/imports/section.css
@@ -0,0 +1,3 @@
+.import {
+  color: goldenrod;
+}
diff --git a/test/fixtures/config-autoload/js/array-mjs/index.css b/test/fixtures/config-autoload/js/array-mjs/index.css
new file mode 100644
index 00000000..3b228825
--- /dev/null
+++ b/test/fixtures/config-autoload/js/array-mjs/index.css
@@ -0,0 +1,5 @@
+@import 'imports/section.css';
+
+.test {
+  color: cyan;
+}
diff --git a/test/fixtures/config-autoload/js/array-mjs/index.js b/test/fixtures/config-autoload/js/array-mjs/index.js
new file mode 100644
index 00000000..07bf0b31
--- /dev/null
+++ b/test/fixtures/config-autoload/js/array-mjs/index.js
@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style
diff --git a/test/fixtures/config-autoload/js/array-mjs/postcss.config.mjs b/test/fixtures/config-autoload/js/array-mjs/postcss.config.mjs
new file mode 100644
index 00000000..53cd49c0
--- /dev/null
+++ b/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 */ }),
+    ]
+  }
+};