fix(styles): correctly output sourcemaps

package.json

@@ -47,7 +47,7 @@
     "autoprefixer": "^6.5.3",
     "chalk": "^1.1.3",
     "common-tags": "^1.3.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.1",
     "debug": "^2.1.3",
     "denodeify": "^1.2.1",
     "diff": "^2.2.2",
@@ -69,7 +69,7 @@
     "json-loader": "^0.5.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
-    "less": "^2.7.1",
+    "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "loader-utils": "^0.2.16",
     "lodash": "^4.11.1",
@@ -78,7 +78,7 @@
     "markdown-it-terminal": "0.0.3",
     "minimatch": "^3.0.3",
     "node-modules-path": "^1.0.0",
-    "node-sass": "^4.1.1",
+    "node-sass": "^4.3.0",
     "nopt": "^3.0.1",
     "opn": "4.0.1",
     "ora": "^0.2.0",
@@ -93,7 +93,7 @@
     "rimraf": "^2.5.3",
     "rsvp": "^3.0.17",
     "rxjs": "^5.0.1",
-    "sass-loader": "^4.0.1",
+    "sass-loader": "^4.1.1",
     "script-loader": "^0.7.0",
     "semver": "^5.3.0",
     "silent-error": "^1.0.0",
@@ -102,7 +102,7 @@
     "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
     "style-loader": "^0.13.1",
     "stylus": "^0.54.5",
-    "stylus-loader": "^2.1.0",
+    "stylus-loader": "^2.4.0",
     "temp": "0.8.3",
     "through": "^2.3.6",
     "tslint": "^4.0.2",

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

@@ -36,14 +36,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // discard comments in production
   const extraPostCssPlugins = buildOptions.target === 'production'
-                              ? [postcssDiscardComments]
-                              : [];
+    ? [postcssDiscardComments]
+    : [];
 
   // determine hashing format
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
 
   // use includePaths from appConfig
-  const includePaths: string [] = [];
+  const includePaths: string[] = [];
 
   if (appConfig.stylePreprocessorOptions
     && appConfig.stylePreprocessorOptions.includePaths
@@ -72,11 +72,13 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     { test: /\.scss$|\.sass$/, loaders: ['sass-loader'] },
     { test: /\.less$/, loaders: ['less-loader'] },
     // stylus-loader doesn't support webpack.LoaderOptionsPlugin properly,
-    // so we need to add options in it's query
-    { test: /\.styl$/, loaders: [`stylus-loader?${JSON.stringify({
-      sourceMap: buildOptions.sourcemap,
-      paths: includePaths
-    })}`] }
+    // so we need to add options in its query
+    {
+      test: /\.styl$/, loaders: [`stylus-loader?${JSON.stringify({
+        sourceMap: buildOptions.sourcemap,
+        paths: includePaths
+      })}`]
+    }
   ];
 
   const commonLoaders = ['postcss-loader'];
@@ -91,7 +93,13 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     rules.push(...baseRules.map(({test, loaders}) => ({
       include: globalStylePaths, test, loaders: ExtractTextPlugin.extract({
         remove: false,
-        loader: ['css-loader', ...commonLoaders, ...loaders],
+        loader: [
+          // css-loader doesn't support webpack.LoaderOptionsPlugin properly,
+          // so we need to add options in its query
+          `css-loader?${JSON.stringify({ sourceMap: buildOptions.sourcemap })}`,
+          ...commonLoaders,
+          ...loaders
+        ],
         fallbackLoader: 'style-loader',
         // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
         publicPath: ''
@@ -114,13 +122,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         disable: !buildOptions.extractCss
       }),
       new webpack.LoaderOptionsPlugin({
+        sourceMap: true,
         options: {
           postcss: [autoprefixer()].concat(extraPostCssPlugins),
-          cssLoader: { sourceMap: buildOptions.sourcemap },
+          // css-loader, stylus-loader don't support LoaderOptionsPlugin properly
+          // options are in query instead
           sassLoader: { sourceMap: buildOptions.sourcemap, includePaths },
           // less-loader doesn't support paths
           lessLoader: { sourceMap: buildOptions.sourcemap },
-          // stylus-loader doesn't support LoaderOptionsPlugin properly, options in query instead
           // context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
           context: projectRoot,
         },

packages/angular-cli/package.json

@@ -37,7 +37,7 @@
     "autoprefixer": "^6.5.3",
     "chalk": "^1.1.3",
     "common-tags": "^1.3.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.1",
     "debug": "^2.1.3",
     "denodeify": "^1.2.1",
     "diff": "^2.2.2",
@@ -58,14 +58,14 @@
     "json-loader": "^0.5.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
-    "less": "^2.7.1",
+    "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "lodash": "^4.11.1",
     "markdown-it": "4.3.0",
     "markdown-it-terminal": "0.0.3",
     "minimatch": "^3.0.3",
     "node-modules-path": "^1.0.0",
-    "node-sass": "^4.1.1",
+    "node-sass": "^4.3.0",
     "nopt": "^3.0.1",
     "opn": "4.0.1",
     "ora": "^0.2.0",
@@ -78,15 +78,15 @@
     "resolve": "^1.1.7",
     "rimraf": "^2.5.3",
     "rsvp": "^3.0.17",
-    "sass-loader": "^4.0.1",
+    "sass-loader": "^4.1.1",
     "script-loader": "^0.7.0",
     "semver": "^5.1.0",
     "silent-error": "^1.0.0",
     "source-map-loader": "^0.1.5",
     "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
     "style-loader": "^0.13.1",
     "stylus": "^0.54.5",
-    "stylus-loader": "^2.1.0",
+    "stylus-loader": "^2.4.0",
     "temp": "0.8.3",
     "through": "^2.3.6",
     "tslint": "^4.0.2",

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

@@ -2,6 +2,7 @@ import {
   writeMultipleFiles,
   expectFileToMatch,
 } from '../../../utils/fs';
+import { expectToFail } from '../../../utils/utils';
 import { ng } from '../../../utils/process';
 import { stripIndents } from 'common-tags';
 
@@ -21,10 +22,11 @@ export default function () {
         }
       }
     `})
-    .then(() => ng('build', '--extract-css'))
+    .then(() => ng('build', '--extract-css', '--sourcemap'))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /body\s*{\s*background-color: blue;\s*}/))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /p\s*{\s*background-color: red;\s*}/))
+    .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
     .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
 }

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

@@ -4,6 +4,7 @@ import {
   expectFileToMatch,
   replaceInFile
 } from '../../../utils/fs';
+import { expectToFail } from '../../../utils/utils';
 import { ng } from '../../../utils/process';
 import { stripIndents } from 'common-tags';
 import { updateJsonFile } from '../../../utils/project';
@@ -31,10 +32,11 @@ export default function () {
     }))
     .then(() => replaceInFile('src/app/app.component.ts',
       './app.component.css', './app.component.less'))
-    .then(() => ng('build', '--extract-css'))
+    .then(() => ng('build', '--extract-css', '--sourcemap'))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /body\s*{\s*background-color: blue;\s*}/))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /p\s*{\s*background-color: red;\s*}/))
+    .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
     .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
 }

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

@@ -4,6 +4,7 @@ import {
   expectFileToMatch,
   replaceInFile
 } from '../../../utils/fs';
+import { expectToFail } from '../../../utils/utils';
 import { ng } from '../../../utils/process';
 import { stripIndents } from 'common-tags';
 import { updateJsonFile } from '../../../utils/project';
@@ -31,10 +32,11 @@ export default function () {
     }))
     .then(() => replaceInFile('src/app/app.component.ts',
       './app.component.css', './app.component.scss'))
-    .then(() => ng('build', '--extract-css'))
+    .then(() => ng('build', '--extract-css', '--sourcemap'))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /body\s*{\s*background-color: blue;\s*}/))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /p\s*{\s*background-color: red;\s*}/))
+    .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
     .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
 }

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

@@ -4,6 +4,7 @@ import {
   expectFileToMatch,
   replaceInFile
 } from '../../../utils/fs';
+import { expectToFail } from '../../../utils/utils';
 import { ng } from '../../../utils/process';
 import { stripIndents } from 'common-tags';
 import { updateJsonFile } from '../../../utils/project';
@@ -31,10 +32,11 @@ export default function () {
     }))
     .then(() => replaceInFile('src/app/app.component.ts',
       './app.component.css', './app.component.styl'))
-    .then(() => ng('build', '--extract-css'))
+    .then(() => ng('build', '--extract-css', '--sourcemap'))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /body\s*{\s*background-color: #00f;\s*}/))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /p\s*{\s*background-color: #f00;\s*}/))
+    .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
     .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/));
 }