Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: removed inline value for the sourceMap option #454

Merged
merged 2 commits into from
Sep 1, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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