refactor: removed inline value for the sourceMap option (#454)

BREAKING CHANGE: the `inline` value was removed for the `sourceMap` option, please use `{ map: { inline: true, annotation: false } }` to achieve this

Author: evilebottnawi

README.md

@@ -118,7 +118,7 @@ module.exports = {
 |           [`exec`](#exec)           |         `{Boolean}`         |              `undefined`              | Enable PostCSS Parser support in `CSS-in-JS`    |
 |         [`config`](#config)         | `{String\|Object\|Boolean}` |              `undefined`              | Set `postcss.config.js` config path && `ctx`    |
 | [`postcssOptions`](#postcssOptions) |         `{Object}`          | `defaults values for Postcss.process` | Set Postcss.process options and postcss plugins |
-|      [`sourceMap`](#sourcemap)      |     `{String\|Boolean}`     |          `compiler.devtool`           | Enables/Disables generation of source maps      |
+|      [`sourceMap`](#sourcemap)      |         `{Boolean}`         |          `compiler.devtool`           | Enables/Disables generation of source maps      |
 
 ### `Exec`
 
@@ -649,70 +649,31 @@ module.exports = {
 
 ### `SourceMap`
 
-Type: `Boolean|String`
-Default: `compiler.devtool`
-
-By default generation of source maps depends on the devtool option.
-All values enable source map generation except eval and false value.
-In most cases this option should be discouraged.
-If need `postcss-loader` to generate an inline map, use the `inline` value.
-`postcss-loader` will use the previous source map given by other loaders and update it accordingly, if no previous loader is applied before `postcss-loader`, the loader will generate a source map for you.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: [
-          { loader: 'style-loader', options: { sourceMap: true } },
-          { loader: 'css-loader' },
-          { loader: 'postcss-loader' },
-          { loader: 'sass-loader' },
-        ],
-      },
-    ],
-  },
-};
-```
-
-#### `'inline'`
+Type: `Boolean`
+Default: depends on the `compiler.devtool` value
 
-You can set the `sourceMap: 'inline'` option to inline the source map
-within the CSS directly as an annotation comment.
+By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option. All values enable source map generation except `eval` and `false` value.
 
 **webpack.config.js**
 
 ```js
 module.exports = {
-  devtool: 'source-map',
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: [
-          { loader: 'style-loader', options: { sourceMap: true } },
-          { loader: 'css-loader' },
-          { loader: 'postcss-loader', options: { sourceMap: 'inline' } },
-          { loader: 'sass-loader' },
+          { loader: 'style-loader' },
+          { loader: 'css-loader', options: { sourceMap: true } },
+          { loader: 'postcss-loader', options: { sourceMap: true } },
+          { loader: 'sass-loader', options: { sourceMap: true } },
         ],
       },
     ],
   },
 };
 ```
 
-```css
-.class {
-  color: red;
-}
-
-/*# sourceMappingURL=data:application/json;base64, ... */
-```
-
 <h2 align="center">Examples</h2>
 
 ### `Stylelint`

src/index.js

@@ -103,10 +103,10 @@ export default async function loader(content, sourceMap, meta = {}) {
   }
 
   if (useSourceMap) {
-    processOptions.map =
-      options.sourceMap === 'inline'
-        ? { inline: true, annotation: false }
-        : { inline: false, annotation: false };
+    processOptions.map = { inline: false, annotation: false };
+    // options.sourceMap === 'inline'
+    //   ? { inline: true, annotation: false }
+    //   : { inline: false, annotation: false };
 
     if (sourceMap) {
       const sourceMapNormalized = normalizeSourceMap(sourceMap);

src/options.json

@@ -95,14 +95,7 @@
     },
     "sourceMap": {
       "description": "Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)",
-      "anyOf": [
-        {
-          "type": "string"
-        },
-        {
-          "type": "boolean"
-        }
-      ]
+      "type": "boolean"
     }
   },
   "additionalProperties": true

test/__snapshots__/validate-options.test.js.snap

@@ -248,40 +248,30 @@ exports[`validate options should throw an error on the "postcssOptions" option w
 
 exports[`validate options should throw an error on the "sourceMap" 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.sourceMap should be one of these:
-   string | boolean
-   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)
-   Details:
-    * options.sourceMap should be a string.
-    * options.sourceMap should be a boolean."
+ - options.sourceMap should be a boolean.
+   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)"
 `;
 
 exports[`validate options should throw an error on the "sourceMap" option with "[]" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.sourceMap should be one of these:
-   string | boolean
-   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)
-   Details:
-    * options.sourceMap should be a string.
-    * options.sourceMap should be a boolean."
+ - options.sourceMap should be a boolean.
+   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)"
 `;
 
 exports[`validate options should throw an error on the "sourceMap" option with "{}" value 1`] = `
 "Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- - options.sourceMap should be one of these:
-   string | boolean
-   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)
-   Details:
-    * options.sourceMap should be a string.
-    * options.sourceMap should be a boolean."
+ - options.sourceMap should be a boolean.
+   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)"
 `;
 
 exports[`validate options should throw an error on the "sourceMap" 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.sourceMap should be one of these:
-   string | boolean
-   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)
-   Details:
-    * options.sourceMap should be a string.
-    * options.sourceMap should be a boolean."
+ - options.sourceMap should be a boolean.
+   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)"
+`;
+
+exports[`validate options should throw an error on the "sourceMap" option with "something" value 1`] = `
+"Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
+ - options.sourceMap should be a boolean.
+   -> Enables/Disables generation of source maps (https://github.com/postcss/postcss-loader#sourcemap)"
 `;

test/options/__snapshots__/postcssOptins.test.js.snap

@@ -1,13 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Postcss options should work "from", "to" and "map" postcssOptions: css 1`] = `
+exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: css 1`] = `
+"a { color: black }
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFJLGFBQWEiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7IGNvbG9yOiBibGFjayB9XG4iXX0= */"
+`;
+
+exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: errors 1`] = `Array []`;
+
+exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: map 1`] = `undefined`;
+
+exports[`"postcssOptions" option should work the the "map" option and generate inlined source maps: warnings 1`] = `Array []`;
+
+exports[`"postcssOptions" option should work with "from", "to" and "map" options: css 1`] = `
 "a { color: black }
 "
 `;
 
-exports[`Postcss options should work "from", "to" and "map" postcssOptions: errors 1`] = `Array []`;
+exports[`"postcssOptions" option should work with "from", "to" and "map" options: errors 1`] = `Array []`;
 
-exports[`Postcss options should work "from", "to" and "map" postcssOptions: map 1`] = `
+exports[`"postcssOptions" option should work with "from", "to" and "map" options: map 1`] = `
 Object {
   "file": "x",
   "mappings": "AAAA,IAAI,aAAa",
@@ -23,4 +35,4 @@ Object {
 }
 `;
 
-exports[`Postcss options should work "from", "to" and "map" postcssOptions: warnings 1`] = `Array []`;
+exports[`"postcssOptions" option should work with "from", "to" and "map" options: warnings 1`] = `Array []`;

test/options/__snapshots__/sourceMap.test.js.snap

@@ -48,16 +48,6 @@ Object {
 
 exports[`Options Sourcemap should work Sourcemap - {Boolean}: warnings 1`] = `Array []`;
 
-exports[`Options Sourcemap should work Sourcemap - {String}: css 1`] = `
-"a { color: black }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFJLGFBQWEiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7IGNvbG9yOiBibGFjayB9XG4iXX0= */"
-`;
-
-exports[`Options Sourcemap should work Sourcemap - {String}: errors 1`] = `Array []`;
-
-exports[`Options Sourcemap should work Sourcemap - {String}: warnings 1`] = `Array []`;
-
 exports[`Options Sourcemap should work disable Sourcemap - {Boolean}: css 1`] = `
 "a { color: black }
 "

test/options/postcssOptins.test.js

@@ -6,8 +6,8 @@ import {
   getWarnings,
 } from '../helpers/index';
 
-describe('Postcss options', () => {
-  it.only('should work "from", "to" and "map" postcssOptions', async () => {
+describe('"postcssOptions" option', () => {
+  it('should work with "from", "to" and "map" options', async () => {
     const compiler = getCompiler('./css/index.js', {
       postcssOptions: {
         from: '/test/from.css',
@@ -38,4 +38,19 @@ describe('Postcss options', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should work the the "map" option and generate inlined source maps', async () => {
+    const compiler = getCompiler('./css/index.js', {
+      postcssOptions: {
+        map: { inline: true, annotation: false },
+      },
+    });
+    const stats = await compile(compiler);
+    const codeFromBundle = getCodeFromBundle('style.css', stats);
+
+    expect(codeFromBundle.css).toMatchSnapshot('css');
+    expect(codeFromBundle.map).toMatchSnapshot('map');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });

test/options/sourceMap.test.js

@@ -45,18 +45,6 @@ describe('Options Sourcemap', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should work Sourcemap - {String}', async () => {
-    const compiler = getCompiler('./css/index.js', { sourceMap: 'inline' });
-    const stats = await compile(compiler);
-
-    const codeFromBundle = getCodeFromBundle('style.css', stats);
-
-    expect(codeFromBundle.map).toBeUndefined();
-    expect(codeFromBundle.css).toMatchSnapshot('css');
-    expect(getWarnings(stats)).toMatchSnapshot('warnings');
-    expect(getErrors(stats)).toMatchSnapshot('errors');
-  });
-
   it('should work with prev sourceMap (sass-loader)', async () => {
     const compiler = getCompiler(
       './scss/index.js',
@@ -118,9 +106,6 @@ describe('Options Sourcemap', () => {
                 },
                 {
                   loader: path.resolve(__dirname, '../../src'),
-                  options: {
-                    config: false,
-                  },
                 },
                 {
                   loader: 'less-loader',

test/validate-options.test.js

@@ -61,8 +61,8 @@ describe('validate options', () => {
       ],
     },
     sourceMap: {
-      success: ['source-map', true],
-      failure: [1, /test/, [], {}],
+      success: [true, false],
+      failure: [1, /test/, [], {}, 'something'],
     },
   };