Skip to content

Commit

Permalink
refactor: removed inline value for the sourceMap option (#454)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: the `inline` value was removed for the `sourceMap` option, please use `{ map: { inline: true, annotation: false } }` to achieve this
  • Loading branch information
evilebottnawi authored Sep 1, 2020
1 parent d8d84f7 commit 677c2fe
Show file tree
Hide file tree
Showing 9 changed files with 62 additions and 116 deletions.
55 changes: 8 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down Expand Up @@ -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`
Expand Down
8 changes: 4 additions & 4 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
9 changes: 1 addition & 8 deletions src/options.json
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
38 changes: 14 additions & 24 deletions test/__snapshots__/validate-options.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
`;
20 changes: 16 additions & 4 deletions test/options/__snapshots__/postcssOptins.test.js.snap
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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 []`;
10 changes: 0 additions & 10 deletions test/options/__snapshots__/sourceMap.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
"
Expand Down
19 changes: 17 additions & 2 deletions test/options/postcssOptins.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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');
});
});
15 changes: 0 additions & 15 deletions test/options/sourceMap.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -118,9 +106,6 @@ describe('Options Sourcemap', () => {
},
{
loader: path.resolve(__dirname, '../../src'),
options: {
config: false,
},
},
{
loader: 'less-loader',
Expand Down
4 changes: 2 additions & 2 deletions test/validate-options.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ describe('validate options', () => {
],
},
sourceMap: {
success: ['source-map', true],
failure: [1, /test/, [], {}],
success: [true, false],
failure: [1, /test/, [], {}, 'something'],
},
};

Expand Down

0 comments on commit 677c2fe

Please sign in to comment.