refactor: execute option (#464)

BREKING CHANGE: the `exec` option was renamed to the `execute` option, always set the option to `true` if you use `postcss-js`
webpack-contrib · Sep 7, 2020 · 38ebe08 · 38ebe08
1 parent d0ea725
commit 38ebe08
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -124,16 +124,16 @@ And run `webpack` via your preferred method.
 
 |                Name                 |         Type         |                Default                | Description                                  |
 | :---------------------------------: | :------------------: | :-----------------------------------: | :------------------------------------------- |
-|           [`exec`](#exec)           |     `{Boolean}`      |              `undefined`              | Enable PostCSS Parser support in `CSS-in-JS` |
+|        [`execute`](#execute)        |     `{Boolean}`      |              `undefined`              | Enable PostCSS Parser support in `CSS-in-JS` |
 | [`postcssOptions`](#postcssOptions) | `{Object\/Function}` | `defaults values for Postcss.process` | Set `postcss` options and plugins            |
 |      [`sourceMap`](#sourcemap)      |     `{Boolean}`      |          `compiler.devtool`           | Enables/Disables generation of source maps   |
 
-### `exec`
+### `execute`
 
 Type: `Boolean`
 Default: `undefined`
 
-If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exec` option.
+If you use JS styles the [`postcss-js`](https://github.com/postcss/postcss-js) parser, add the `execute` option.
 
 **webpack.config.js**
 
@@ -147,13 +147,12 @@ module.exports = {
           'style-loader',
           {
             loader: 'css-loader',
-            options: { importLoaders: 1 },
           },
           {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
-                parser: 'sugarss',
+                parser: 'postcss-js',
               },
               exec: true,
             },
@@ -867,6 +866,7 @@ module.exports = {
               postcssOptions: {
                 parser: 'postcss-js',
               },
+              execute: true,
             },
           },
           'babel-loader',

diff --git a/src/index.js b/src/index.js
@@ -59,13 +59,13 @@ export default async function loader(content, sourceMap) {
       ? options.sourceMap
       : this.sourceMap;
 
-  const { plugins, processOptions, needExecute } = getPostcssOptions(
+  const { plugins, processOptions } = getPostcssOptions(
     this,
     loadedConfig,
     options.postcssOptions
   );
 
-  if (options.exec || needExecute) {
+  if (options.execute) {
     // eslint-disable-next-line no-param-reassign
     content = exec(content, this);
   }

diff --git a/src/options.json b/src/options.json
@@ -71,7 +71,7 @@
         }
       ]
     },
-    "exec": {
+    "execute": {
       "description": "Enables/Disables PostCSS Parser support in 'CSS-in-JS' (https://github.com/postcss/postcss-loader#exec)",
       "type": "boolean"
     },

diff --git a/src/utils.js b/src/utils.js
@@ -200,14 +200,7 @@ function getPostcssOptions(loaderContext, config, postcssOptions = {}) {
     ...processOptionsFromOptions,
   };
 
-  let needExecute = false;
-
   if (typeof processOptions.parser === 'string') {
-    // TODO respect the `syntax` option too or remove this options
-    if (processOptions.parser === 'postcss-js') {
-      needExecute = true;
-    }
-
     try {
       // eslint-disable-next-line import/no-dynamic-require, global-require
       processOptions.parser = require(processOptions.parser);
@@ -246,7 +239,7 @@ function getPostcssOptions(loaderContext, config, postcssOptions = {}) {
     }
   }
 
-  return { plugins, processOptions, needExecute };
+  return { plugins, processOptions };
 }
 
 const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;

diff --git a/test/__snapshots__/exec.test.js.snap b/test/__snapshots__/exec.test.js.snap
diff --git a/test/__snapshots__/execute.test.js.snap b/test/__snapshots__/execute.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`"execute" option should work with "Boolean" value: css 1`] = `
+"a {
+    color: green
+}"
+`;
+
+exports[`"execute" option should work with "Boolean" value: errors 1`] = `Array []`;
+
+exports[`"execute" option should work with "Boolean" value: warnings 1`] = `Array []`;
+
+exports[`"execute" option should work with "postcss-js" parser: css 1`] = `
+"a {
+    color: yellow
+}"
+`;
+
+exports[`"execute" option should work with "postcss-js" parser: errors 1`] = `Array []`;
+
+exports[`"execute" option should work with "postcss-js" parser: warnings 1`] = `Array []`;
diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap
@@ -1,38 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`validate options should throw an error on the "exec" option with "/test/" value 1`] = `
+exports[`validate options should throw an error on the "execute" option with "/test/" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.exec should be a boolean.
+ - options.execute should be a boolean.
    -> Enables/Disables PostCSS Parser support in 'CSS-in-JS' (https://github.com/postcss/postcss-loader#exec)"
 `;
 
-exports[`validate options should throw an error on the "exec" option with "[]" value 1`] = `
+exports[`validate options should throw an error on the "execute" option with "[]" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.exec should be a boolean.
+ - options.execute should be a boolean.
    -> Enables/Disables PostCSS Parser support in 'CSS-in-JS' (https://github.com/postcss/postcss-loader#exec)"
 `;
 
-exports[`validate options should throw an error on the "exec" option with "{"foo":"bar"}" value 1`] = `
+exports[`validate options should throw an error on the "execute" option with "{"foo":"bar"}" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.exec should be a boolean.
+ - options.execute should be a boolean.
    -> Enables/Disables PostCSS Parser support in 'CSS-in-JS' (https://github.com/postcss/postcss-loader#exec)"
 `;
 
-exports[`validate options should throw an error on the "exec" option with "{}" value 1`] = `
+exports[`validate options should throw an error on the "execute" option with "{}" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.exec should be a boolean.
+ - options.execute should be a boolean.
    -> Enables/Disables PostCSS Parser support in 'CSS-in-JS' (https://github.com/postcss/postcss-loader#exec)"
 `;
 
-exports[`validate options should throw an error on the "exec" option with "1" value 1`] = `
+exports[`validate options should throw an error on the "execute" option with "1" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.exec should be a boolean.
+ - options.execute should be a boolean.
    -> Enables/Disables PostCSS Parser support in 'CSS-in-JS' (https://github.com/postcss/postcss-loader#exec)"
 `;
 
-exports[`validate options should throw an error on the "exec" option with "test" value 1`] = `
+exports[`validate options should throw an error on the "execute" option with "test" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.exec should be a boolean.
+ - options.execute should be a boolean.
    -> Enables/Disables PostCSS Parser support in 'CSS-in-JS' (https://github.com/postcss/postcss-loader#exec)"
 `;
 

diff --git a/test/exec.test.js → test/execute.test.js b/test/exec.test.js → test/execute.test.js
@@ -8,7 +8,7 @@ import {
   getWarnings,
 } from './helpers';
 
-describe('"exec" option', () => {
+describe('"execute" option', () => {
   it('should work with "Boolean" value', async () => {
     const compiler = getCompiler(
       './jss/exec/index.js',
@@ -26,7 +26,7 @@ describe('"exec" option', () => {
                 {
                   loader: path.resolve(__dirname, '../src'),
                   options: {
-                    exec: true,
+                    execute: true,
                   },
                 },
               ],
@@ -44,9 +44,9 @@ describe('"exec" option', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should work with "JSS" parser', async () => {
+  it('should work with "postcss-js" parser', async () => {
     const compiler = getCompiler(
-      './jss/index.js',
+      './jss/postcss-js/index.js',
       {},
       {
         module: {
@@ -64,6 +64,7 @@ describe('"exec" option', () => {
                     postcssOptions: {
                       parser: 'postcss-js',
                     },
+                    execute: true,
                   },
                 },
               ],

diff --git a/test/fixtures/jss/index.js → test/fixtures/jss/postcss-js/index.js b/test/fixtures/jss/index.js → test/fixtures/jss/postcss-js/index.js
diff --git a/test/fixtures/jss/style.js → test/fixtures/jss/postcss-js/style.js b/test/fixtures/jss/style.js → test/fixtures/jss/postcss-js/style.js
diff --git a/test/validate-options.test.js b/test/validate-options.test.js
@@ -5,7 +5,7 @@ import { getCompiler, compile } from './helpers/index';
 
 describe('validate options', () => {
   const tests = {
-    exec: {
+    execute: {
       success: [false],
       failure: [1, 'test', /test/, [], {}, { foo: 'bar' }],
     },