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 */ }), + ] + } +};