Skip to content

Commit 6babeb1

Browse files
evilebottnawievilebottnawi
authored
fix: source map generation with the map option for postcss (#476)
1 parent 9e5c9cf commit 6babeb1

4 files changed

Lines changed: 171 additions & 12 deletions

File tree

‎src/index.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,15 @@ export default async function loader(content, sourceMap, meta) {
7070
);
7171

7272
if (useSourceMap) {
73-
processOptions.map = { inline: false, annotation: false };
74-
75-
if (sourceMap) {
76-
processOptions.map.prev = normalizeSourceMap(sourceMap, this.context);
77-
}
78-
} else if (sourceMap && typeof processOptions.map !== 'undefined') {
79-
if (typeof processOptions.map === 'boolean') {
80-
processOptions.map = { inline: true };
81-
}
73+
processOptions.map = {
74+
inline: false,
75+
annotation: false,
76+
...processOptions.map,
77+
};
78+
}
8279

83-
processOptions.map.prev = sourceMap;
80+
if (sourceMap && processOptions.map) {
81+
processOptions.map.prev = normalizeSourceMap(sourceMap, this.context);
8482
}
8583

8684
let root;

‎src/utils.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,11 @@ function getPostcssOptions(
285285
}
286286
}
287287

288+
if (processOptions.map === true) {
289+
// https://github.com/postcss/postcss/blob/master/docs/source-maps.md
290+
processOptions.map = { inline: true };
291+
}
292+
288293
return { plugins, processOptions };
289294
}
290295

‎test/__snapshots__/sourceMap.test.js.snap‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,109 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`"sourceMap" option should generate inline source maps when the "devtool" is "false": css 1`] = `
4+
"a {
5+
color: black;
6+
}
7+
8+
a {
9+
color: red;
10+
}
11+
12+
a {
13+
color: green;
14+
}
15+
16+
a {
17+
color: blue;
18+
}
19+
20+
.class {
21+
-x-border-color: blue blue *;
22+
-x-color: * #fafafa;
23+
}
24+
25+
.class-foo {
26+
-z-border-color: blue blue *;
27+
-z-color: * #fafafa;
28+
}
29+
30+
.phone {
31+
&_title {
32+
width: 500px;
33+
34+
@media (max-width: 500px) {
35+
width: auto;
36+
}
37+
38+
body.is_dark & {
39+
color: white;
40+
}
41+
}
42+
43+
img {
44+
display: block;
45+
}
46+
}
47+
48+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7QUFDWjs7QUFFQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLDRCQUE0QjtFQUM1QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSw0QkFBNEI7RUFDNUIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0U7SUFDRSxZQUFZOztJQUVaO01BQ0UsV0FBVztJQUNiOztJQUVBO01BQ0UsWUFBWTtJQUNkO0VBQ0Y7O0VBRUE7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7XG4gIGNvbG9yOiBibGFjaztcbn1cblxuYSB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmEge1xuICBjb2xvcjogZ3JlZW47XG59XG5cbmEge1xuICBjb2xvcjogYmx1ZTtcbn1cblxuLmNsYXNzIHtcbiAgLXgtYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXgtY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLmNsYXNzLWZvbyB7XG4gIC16LWJvcmRlci1jb2xvcjogYmx1ZSBibHVlICo7XG4gIC16LWNvbG9yOiAqICNmYWZhZmE7XG59XG5cbi5waG9uZSB7XG4gICZfdGl0bGUge1xuICAgIHdpZHRoOiA1MDBweDtcblxuICAgIEBtZWRpYSAobWF4LXdpZHRoOiA1MDBweCkge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gICAgYm9keS5pc19kYXJrICYge1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgIH1cbiAgfVxuXG4gIGltZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */"
49+
`;
50+
51+
exports[`"sourceMap" option should generate inline source maps when the "devtool" is "false": errors 1`] = `Array []`;
52+
53+
exports[`"sourceMap" option should generate inline source maps when the "devtool" is "false": warnings 1`] = `Array []`;
54+
55+
exports[`"sourceMap" option should generate inline source maps when the "devtool" is "true": css 1`] = `
56+
"a {
57+
color: black;
58+
}
59+
60+
a {
61+
color: red;
62+
}
63+
64+
a {
65+
color: green;
66+
}
67+
68+
a {
69+
color: blue;
70+
}
71+
72+
.class {
73+
-x-border-color: blue blue *;
74+
-x-color: * #fafafa;
75+
}
76+
77+
.class-foo {
78+
-z-border-color: blue blue *;
79+
-z-color: * #fafafa;
80+
}
81+
82+
.phone {
83+
&_title {
84+
width: 500px;
85+
86+
@media (max-width: 500px) {
87+
width: auto;
88+
}
89+
90+
body.is_dark & {
91+
color: white;
92+
}
93+
}
94+
95+
img {
96+
display: block;
97+
}
98+
}
99+
100+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFVBQVU7QUFDWjs7QUFFQTtFQUNFLFlBQVk7QUFDZDs7QUFFQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLDRCQUE0QjtFQUM1QixtQkFBbUI7QUFDckI7O0FBRUE7RUFDRSw0QkFBNEI7RUFDNUIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0U7SUFDRSxZQUFZOztJQUVaO01BQ0UsV0FBVztJQUNiOztJQUVBO01BQ0UsWUFBWTtJQUNkO0VBQ0Y7O0VBRUE7SUFDRSxjQUFjO0VBQ2hCO0FBQ0YiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYSB7XG4gIGNvbG9yOiBibGFjaztcbn1cblxuYSB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmEge1xuICBjb2xvcjogZ3JlZW47XG59XG5cbmEge1xuICBjb2xvcjogYmx1ZTtcbn1cblxuLmNsYXNzIHtcbiAgLXgtYm9yZGVyLWNvbG9yOiBibHVlIGJsdWUgKjtcbiAgLXgtY29sb3I6ICogI2ZhZmFmYTtcbn1cblxuLmNsYXNzLWZvbyB7XG4gIC16LWJvcmRlci1jb2xvcjogYmx1ZSBibHVlICo7XG4gIC16LWNvbG9yOiAqICNmYWZhZmE7XG59XG5cbi5waG9uZSB7XG4gICZfdGl0bGUge1xuICAgIHdpZHRoOiA1MDBweDtcblxuICAgIEBtZWRpYSAobWF4LXdpZHRoOiA1MDBweCkge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgfVxuXG4gICAgYm9keS5pc19kYXJrICYge1xuICAgICAgY29sb3I6IHdoaXRlO1xuICAgIH1cbiAgfVxuXG4gIGltZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cbn1cbiJdfQ== */"
101+
`;
102+
103+
exports[`"sourceMap" option should generate inline source maps when the "devtool" is "true": errors 1`] = `Array []`;
104+
105+
exports[`"sourceMap" option should generate inline source maps when the "devtool" is "true": warnings 1`] = `Array []`;
106+
3107
exports[`"sourceMap" option should generate source maps using the "postcssOptions.map" option with "true" value and previous loader returns source maps ("sass-loader"): css 1`] = `
4108
"a {
5109
color: coral;

‎test/sourceMap.test.js‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@ describe('"sourceMap" option', () => {
175175
implementation: require('sass'),
176176
sassOptions: {
177177
sourceMap: true,
178+
sourceMapRoot: path.resolve(
179+
__dirname,
180+
'./fixtures/scss/'
181+
),
178182
outFile: path.resolve(
179183
__dirname,
180184
'./fixtures/scss/style.css.map'
@@ -234,6 +238,10 @@ describe('"sourceMap" option', () => {
234238
implementation: require('sass'),
235239
sassOptions: {
236240
sourceMap: true,
241+
sourceMapRoot: path.resolve(
242+
__dirname,
243+
'./fixtures/scss/'
244+
),
237245
outFile: path.resolve(
238246
__dirname,
239247
'./fixtures/scss/style.css.map'
@@ -337,11 +345,9 @@ describe('"sourceMap" option', () => {
337345
use: [
338346
{
339347
loader: require.resolve('./helpers/testLoader'),
340-
options: {},
341348
},
342349
{
343350
loader: path.resolve(__dirname, '../src'),
344-
options: {},
345351
},
346352
{
347353
loader: 'sass-loader',
@@ -428,4 +434,50 @@ describe('"sourceMap" option', () => {
428434
expect(getWarnings(stats)).toMatchSnapshot('warnings');
429435
expect(getErrors(stats)).toMatchSnapshot('errors');
430436
});
437+
438+
it('should generate inline source maps when the "devtool" is "false"', async () => {
439+
const compiler = getCompiler(
440+
'./css/index.js',
441+
{
442+
postcssOptions: {
443+
map: {
444+
inline: true,
445+
annotation: false,
446+
},
447+
},
448+
},
449+
{
450+
devtool: false,
451+
}
452+
);
453+
const stats = await compile(compiler);
454+
const { css } = getCodeFromBundle('style.css', stats);
455+
456+
expect(css).toMatchSnapshot('css');
457+
expect(getWarnings(stats)).toMatchSnapshot('warnings');
458+
expect(getErrors(stats)).toMatchSnapshot('errors');
459+
});
460+
461+
it('should generate inline source maps when the "devtool" is "true"', async () => {
462+
const compiler = getCompiler(
463+
'./css/index.js',
464+
{
465+
postcssOptions: {
466+
map: {
467+
inline: true,
468+
annotation: false,
469+
},
470+
},
471+
},
472+
{
473+
devtool: 'source-map',
474+
}
475+
);
476+
const stats = await compile(compiler);
477+
const { css } = getCodeFromBundle('style.css', stats);
478+
479+
expect(css).toMatchSnapshot('css');
480+
expect(getWarnings(stats)).toMatchSnapshot('warnings');
481+
expect(getErrors(stats)).toMatchSnapshot('errors');
482+
});
431483
});

0 commit comments

Comments
 (0)