fix: default export for plugins (#465)

Author: evilebottnawi

src/utils.js

@@ -84,18 +84,29 @@ async function loadConfig(loaderContext, config) {
 }
 
 function loadPlugin(plugin, options, file) {
-  // TODO defaults
   try {
     if (!options || Object.keys(options).length === 0) {
-      // eslint-disable-next-line global-require,import/no-dynamic-require
-      return require(plugin);
+      // eslint-disable-next-line global-require, import/no-dynamic-require
+      const loadedPlugin = require(plugin);
+
+      if (loadedPlugin.default) {
+        return loadedPlugin.default;
+      }
+
+      return loadedPlugin;
+    }
+
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    const loadedPlugin = require(plugin);
+
+    if (loadedPlugin.default) {
+      return loadedPlugin.default(options);
     }
 
-    // eslint-disable-next-line global-require,import/no-dynamic-require
-    return require(plugin)(options);
+    return loadedPlugin(options);
   } catch (error) {
     throw new Error(
-      `Loading PostCSS Plugin failed: ${error.message}\n\n(@${file})`
+      `Loading PostCSS "${plugin}" plugin failed: ${error.message}\n\n(@${file})`
     );
   }
 }

test/__snapshots__/plugins.test.js.snap

@@ -3,7 +3,7 @@
 exports[`"plugins" option should throw an error on the unresolved plugin: errors 1`] = `
 Array [
   "ModuleError: Module Error (from \`replaced original path\`):
-Loading PostCSS Plugin failed: Cannot find module 'postcss-unresolved' from 'src/utils.js'",
+Loading PostCSS \\"postcss-unresolved\\" plugin failed: Cannot find module 'postcss-unresolved' from 'src/utils.js'",
 ]
 `;
 
@@ -587,3 +587,105 @@ a {
 exports[`"plugins" option should work with empty "Object" value: errors 1`] = `Array []`;
 
 exports[`"plugins" option should work with empty "Object" value: warnings 1`] = `Array []`;
+
+exports[`"plugins" option should work with the "default" property with options: css 1`] = `
+"a {
+  color: black;
+}
+
+a {
+  color: rgba(0, 0, 255, 0.5);
+}
+
+a {
+  color: green;
+}
+
+a {
+  color: blue;
+}
+
+.class {
+  -x-border-color: blue blue *;
+  -x-color: * #fafafa;
+}
+
+.class-foo {
+  -z-border-color: blue blue *;
+  -z-color: * #fafafa;
+}
+
+.phone {
+  &_title {
+    width: 500px;
+
+    @media (max-width: 500px) {
+      width: auto;
+    }
+
+    body.is_dark & {
+      color: white;
+    }
+  }
+
+  img {
+    display: block;
+  }
+}
+"
+`;
+
+exports[`"plugins" option should work with the "default" property with options: errors 1`] = `Array []`;
+
+exports[`"plugins" option should work with the "default" property with options: warnings 1`] = `Array []`;
+
+exports[`"plugins" option should work with the "default" property without options: css 1`] = `
+"a {
+  color: black;
+}
+
+a {
+  color: red;
+}
+
+a {
+  color: green;
+}
+
+a {
+  color: rgba(0, 0, 255, 1.0);
+}
+
+.class {
+  -x-border-color: blue blue *;
+  -x-color: * #fafafa;
+}
+
+.class-foo {
+  -z-border-color: blue blue *;
+  -z-color: * #fafafa;
+}
+
+.phone {
+  &_title {
+    width: 500px;
+
+    @media (max-width: 500px) {
+      width: auto;
+    }
+
+    body.is_dark & {
+      color: white;
+    }
+  }
+
+  img {
+    display: block;
+  }
+}
+"
+`;
+
+exports[`"plugins" option should work with the "default" property without options: errors 1`] = `Array []`;
+
+exports[`"plugins" option should work with the "default" property without options: warnings 1`] = `Array []`;

test/fixtures/plugin/default-other-plugin.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const postcss = require('postcss');
+
+module.exports = {
+  default: postcss.plugin('my-plugin', (options) => {
+    options = { alpha: '1.0', color: 'blue', ...options };
+
+    return (root, result) => {
+      root.walkDecls((decl) => {
+        if (decl.value === options.color) {
+          decl.value = 'rgba(0, 0, 255, ' + options.alpha + ')'
+        }
+      })
+    }
+  }),
+};

test/plugins.test.js

@@ -260,4 +260,42 @@ describe('"plugins" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats, true)).toMatchSnapshot('errors');
   });
+
+  it('should work with the "default" property without options', async () => {
+    const compiler = getCompiler('./css/index.js', {
+      postcssOptions: {
+        plugins: [
+          path.resolve(__dirname, './fixtures/plugin/default-other-plugin.js'),
+        ],
+      },
+    });
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle('style.css', stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should work with the "default" property with options', async () => {
+    const compiler = getCompiler('./css/index.js', {
+      postcssOptions: {
+        plugins: [
+          [
+            path.resolve(
+              __dirname,
+              './fixtures/plugin/default-other-plugin.js'
+            ),
+            { alpha: 0.5, color: 'red' },
+          ],
+        ],
+      },
+    });
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle('style.css', stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });