Skip to content

Commit c29ed53

Browse files
filipesilvafilipesilva
authored
fix(styles): correctly output sourcemaps (#4222)
Fix #2020
1 parent 76f8827 commit c29ed53

File tree

7 files changed

+42
-25
lines changed

7 files changed

+42
-25
lines changed

‎package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"autoprefixer": "^6.5.3",
4848
"chalk": "^1.1.3",
4949
"common-tags": "^1.3.1",
50-
"css-loader": "^0.23.1",
50+
"css-loader": "^0.26.1",
5151
"debug": "^2.1.3",
5252
"denodeify": "^1.2.1",
5353
"diff": "^2.2.2",
@@ -69,7 +69,7 @@
6969
"json-loader": "^0.5.4",
7070
"karma-sourcemap-loader": "^0.3.7",
7171
"karma-webpack": "^1.8.0",
72-
"less": "^2.7.1",
72+
"less": "^2.7.2",
7373
"less-loader": "^2.2.3",
7474
"loader-utils": "^0.2.16",
7575
"lodash": "^4.11.1",
@@ -78,7 +78,7 @@
7878
"markdown-it-terminal": "0.0.3",
7979
"minimatch": "^3.0.3",
8080
"node-modules-path": "^1.0.0",
81-
"node-sass": "^4.1.1",
81+
"node-sass": "^4.3.0",
8282
"nopt": "^3.0.1",
8383
"opn": "4.0.1",
8484
"ora": "^0.2.0",
@@ -93,7 +93,7 @@
9393
"rimraf": "^2.5.3",
9494
"rsvp": "^3.0.17",
9595
"rxjs": "^5.0.1",
96-
"sass-loader": "^4.0.1",
96+
"sass-loader": "^4.1.1",
9797
"script-loader": "^0.7.0",
9898
"semver": "^5.3.0",
9999
"silent-error": "^1.0.0",
@@ -102,7 +102,7 @@
102102
"sourcemap-istanbul-instrumenter-loader": "^0.2.0",
103103
"style-loader": "^0.13.1",
104104
"stylus": "^0.54.5",
105-
"stylus-loader": "^2.1.0",
105+
"stylus-loader": "^2.4.0",
106106
"temp": "0.8.3",
107107
"through": "^2.3.6",
108108
"tslint": "^4.0.2",

‎packages/angular-cli/models/webpack-configs/styles.ts

+20-11
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
3636

3737
// discard comments in production
3838
const extraPostCssPlugins = buildOptions.target === 'production'
39-
? [postcssDiscardComments]
40-
: [];
39+
? [postcssDiscardComments]
40+
: [];
4141

4242
// determine hashing format
4343
const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
4444

4545
// use includePaths from appConfig
46-
const includePaths: string [] = [];
46+
const includePaths: string[] = [];
4747

4848
if (appConfig.stylePreprocessorOptions
4949
&& appConfig.stylePreprocessorOptions.includePaths
@@ -72,11 +72,13 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
7272
{ test: /\.scss$|\.sass$/, loaders: ['sass-loader'] },
7373
{ test: /\.less$/, loaders: ['less-loader'] },
7474
// stylus-loader doesn't support webpack.LoaderOptionsPlugin properly,
75-
// so we need to add options in it's query
76-
{ test: /\.styl$/, loaders: [`stylus-loader?${JSON.stringify({
77-
sourceMap: buildOptions.sourcemap,
78-
paths: includePaths
79-
})}`] }
75+
// so we need to add options in its query
76+
{
77+
test: /\.styl$/, loaders: [`stylus-loader?${JSON.stringify({
78+
sourceMap: buildOptions.sourcemap,
79+
paths: includePaths
80+
})}`]
81+
}
8082
];
8183

8284
const commonLoaders = ['postcss-loader'];
@@ -91,7 +93,13 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
9193
rules.push(...baseRules.map(({test, loaders}) => ({
9294
include: globalStylePaths, test, loaders: ExtractTextPlugin.extract({
9395
remove: false,
94-
loader: ['css-loader', ...commonLoaders, ...loaders],
96+
loader: [
97+
// css-loader doesn't support webpack.LoaderOptionsPlugin properly,
98+
// so we need to add options in its query
99+
`css-loader?${JSON.stringify({ sourceMap: buildOptions.sourcemap })}`,
100+
...commonLoaders,
101+
...loaders
102+
],
95103
fallbackLoader: 'style-loader',
96104
// publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
97105
publicPath: ''
@@ -114,13 +122,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
114122
disable: !buildOptions.extractCss
115123
}),
116124
new webpack.LoaderOptionsPlugin({
125+
sourceMap: true,
117126
options: {
118127
postcss: [autoprefixer()].concat(extraPostCssPlugins),
119-
cssLoader: { sourceMap: buildOptions.sourcemap },
128+
// css-loader, stylus-loader don't support LoaderOptionsPlugin properly
129+
// options are in query instead
120130
sassLoader: { sourceMap: buildOptions.sourcemap, includePaths },
121131
// less-loader doesn't support paths
122132
lessLoader: { sourceMap: buildOptions.sourcemap },
123-
// stylus-loader doesn't support LoaderOptionsPlugin properly, options in query instead
124133
// context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
125134
context: projectRoot,
126135
},

‎packages/angular-cli/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"autoprefixer": "^6.5.3",
3838
"chalk": "^1.1.3",
3939
"common-tags": "^1.3.1",
40-
"css-loader": "^0.23.1",
40+
"css-loader": "^0.26.1",
4141
"debug": "^2.1.3",
4242
"denodeify": "^1.2.1",
4343
"diff": "^2.2.2",
@@ -58,14 +58,14 @@
5858
"json-loader": "^0.5.4",
5959
"karma-sourcemap-loader": "^0.3.7",
6060
"karma-webpack": "^1.8.0",
61-
"less": "^2.7.1",
61+
"less": "^2.7.2",
6262
"less-loader": "^2.2.3",
6363
"lodash": "^4.11.1",
6464
"markdown-it": "4.3.0",
6565
"markdown-it-terminal": "0.0.3",
6666
"minimatch": "^3.0.3",
6767
"node-modules-path": "^1.0.0",
68-
"node-sass": "^4.1.1",
68+
"node-sass": "^4.3.0",
6969
"nopt": "^3.0.1",
7070
"opn": "4.0.1",
7171
"ora": "^0.2.0",
@@ -78,15 +78,15 @@
7878
"resolve": "^1.1.7",
7979
"rimraf": "^2.5.3",
8080
"rsvp": "^3.0.17",
81-
"sass-loader": "^4.0.1",
81+
"sass-loader": "^4.1.1",
8282
"script-loader": "^0.7.0",
8383
"semver": "^5.1.0",
8484
"silent-error": "^1.0.0",
8585
"source-map-loader": "^0.1.5",
8686
"sourcemap-istanbul-instrumenter-loader": "^0.2.0",
8787
"style-loader": "^0.13.1",
8888
"stylus": "^0.54.5",
89-
"stylus-loader": "^2.1.0",
89+
"stylus-loader": "^2.4.0",
9090
"temp": "0.8.3",
9191
"through": "^2.3.6",
9292
"tslint": "^4.0.2",

‎tests/e2e/tests/build/styles/css.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
writeMultipleFiles,
33
expectFileToMatch,
44
} from '../../../utils/fs';
5+
import { expectToFail } from '../../../utils/utils';
56
import { ng } from '../../../utils/process';
67
import { stripIndents } from 'common-tags';
78

@@ -21,10 +22,11 @@ export default function () {
2122
}
2223
}
2324
`})
24-
.then(() => ng('build', '--extract-css'))
25+
.then(() => ng('build', '--extract-css', '--sourcemap'))
2526
.then(() => expectFileToMatch('dist/styles.bundle.css',
2627
/body\s*{\s*background-color: blue;\s*}/))
2728
.then(() => expectFileToMatch('dist/styles.bundle.css',
2829
/p\s*{\s*background-color: red;\s*}/))
30+
.then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
2931
.then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
3032
}

‎tests/e2e/tests/build/styles/less.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
expectFileToMatch,
55
replaceInFile
66
} from '../../../utils/fs';
7+
import { expectToFail } from '../../../utils/utils';
78
import { ng } from '../../../utils/process';
89
import { stripIndents } from 'common-tags';
910
import { updateJsonFile } from '../../../utils/project';
@@ -31,10 +32,11 @@ export default function () {
3132
}))
3233
.then(() => replaceInFile('src/app/app.component.ts',
3334
'./app.component.css', './app.component.less'))
34-
.then(() => ng('build', '--extract-css'))
35+
.then(() => ng('build', '--extract-css', '--sourcemap'))
3536
.then(() => expectFileToMatch('dist/styles.bundle.css',
3637
/body\s*{\s*background-color: blue;\s*}/))
3738
.then(() => expectFileToMatch('dist/styles.bundle.css',
3839
/p\s*{\s*background-color: red;\s*}/))
40+
.then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
3941
.then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
4042
}

‎tests/e2e/tests/build/styles/scss.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
expectFileToMatch,
55
replaceInFile
66
} from '../../../utils/fs';
7+
import { expectToFail } from '../../../utils/utils';
78
import { ng } from '../../../utils/process';
89
import { stripIndents } from 'common-tags';
910
import { updateJsonFile } from '../../../utils/project';
@@ -31,10 +32,11 @@ export default function () {
3132
}))
3233
.then(() => replaceInFile('src/app/app.component.ts',
3334
'./app.component.css', './app.component.scss'))
34-
.then(() => ng('build', '--extract-css'))
35+
.then(() => ng('build', '--extract-css', '--sourcemap'))
3536
.then(() => expectFileToMatch('dist/styles.bundle.css',
3637
/body\s*{\s*background-color: blue;\s*}/))
3738
.then(() => expectFileToMatch('dist/styles.bundle.css',
3839
/p\s*{\s*background-color: red;\s*}/))
40+
.then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
3941
.then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
4042
}

‎tests/e2e/tests/build/styles/stylus.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
expectFileToMatch,
55
replaceInFile
66
} from '../../../utils/fs';
7+
import { expectToFail } from '../../../utils/utils';
78
import { ng } from '../../../utils/process';
89
import { stripIndents } from 'common-tags';
910
import { updateJsonFile } from '../../../utils/project';
@@ -31,10 +32,11 @@ export default function () {
3132
}))
3233
.then(() => replaceInFile('src/app/app.component.ts',
3334
'./app.component.css', './app.component.styl'))
34-
.then(() => ng('build', '--extract-css'))
35+
.then(() => ng('build', '--extract-css', '--sourcemap'))
3536
.then(() => expectFileToMatch('dist/styles.bundle.css',
3637
/body\s*{\s*background-color: #00f;\s*}/))
3738
.then(() => expectFileToMatch('dist/styles.bundle.css',
3839
/p\s*{\s*background-color: #f00;\s*}/))
40+
.then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
3941
.then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
4042
}

0 commit comments

Comments
 (0)