feat(@angular/cli): allow component css imports (#4667)

Fix #4285

package.json

@@ -55,6 +55,7 @@
     "ember-cli-normalize-entity-name": "^1.0.0",
     "ember-cli-string-utils": "^1.0.0",
     "enhanced-resolve": "^3.1.0",
+    "exports-loader": "^0.6.3",
     "extract-text-webpack-plugin": "^2.0.0-rc.3",
     "file-loader": "^0.10.0",
     "findup": "0.1.5",

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

@@ -14,7 +14,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
  * Enumerate loaders and their dependencies from this file to let the dependency validator
  * know they are used.
  *
- * require('raw-loader')
+ * require('exports-loader')
  * require('style-loader')
  * require('postcss-loader')
  * require('css-loader')
@@ -86,21 +86,27 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     }
   ];
 
-  const commonLoaders = ['postcss-loader'];
+  const commonLoaders = [
+    // css-loader doesn't support webpack.LoaderOptionsPlugin properly,
+    // so we need to add options in its query
+    `css-loader?${JSON.stringify({ sourceMap: cssSourceMap, importLoaders: 1 })}`,
+    'postcss-loader'
+  ];
 
   // load component css as raw strings
   let rules: any = baseRules.map(({test, loaders}) => ({
-    exclude: globalStylePaths, test, loaders: ['raw-loader', ...commonLoaders, ...loaders]
+    exclude: globalStylePaths, test, loaders: [
+      'exports-loader?module.exports.toString()',
+      ...commonLoaders,
+      ...loaders
+    ]
   }));
 
   // load global css as css files
   if (globalStylePaths.length > 0) {
     rules.push(...baseRules.map(({test, loaders}) => ({
       include: globalStylePaths, test, loaders: ExtractTextPlugin.extract({
         use: [
-          // css-loader doesn't support webpack.LoaderOptionsPlugin properly,
-          // so we need to add options in its query
-          `css-loader?${JSON.stringify({ sourceMap: cssSourceMap })}`,
           ...commonLoaders,
           ...loaders
         ],

packages/@angular/cli/package.json

@@ -39,6 +39,7 @@
     "diff": "^3.1.0",
     "ember-cli-normalize-entity-name": "^1.0.0",
     "ember-cli-string-utils": "^1.0.0",
+    "exports-loader": "^0.6.3",
     "extract-text-webpack-plugin": "^2.0.0-rc.3",
     "file-loader": "^0.10.0",
     "findup": "0.1.5",

tests/e2e/tests/build/styles/imports.ts

@@ -0,0 +1,70 @@
+import {
+  writeMultipleFiles,
+  deleteFile,
+  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';
+
+export default function () {
+  const extensions = ['css', 'scss', 'less', 'styl'];
+  let promise = Promise.resolve();
+
+  extensions.forEach(ext => {
+    promise = promise.then(() => {
+      return writeMultipleFiles({
+        [`src/styles.${ext}`]: stripIndents`
+          @import './imported-styles.${ext}';
+          body { background-color: #00f; }
+        `,
+        [`src/imported-styles.${ext}`]: stripIndents`
+          p { background-color: #f00; }
+        `,
+        [`src/app/app.component.${ext}`]: stripIndents`
+          @import './imported-component-styles.${ext}';
+          .outer {
+            .inner {
+              background: #fff;
+            }
+          }
+        `,
+        [`src/app/imported-component-styles.${ext}`]: stripIndents`
+          h1 { background: #000; }
+        `})
+        // change files to use preprocessor
+        .then(() => updateJsonFile('angular-cli.json', configJson => {
+          const app = configJson['apps'][0];
+          app['styles'] = [`styles.${ext}`];
+        }))
+        .then(() => replaceInFile('src/app/app.component.ts',
+          './app.component.css', `./app.component.${ext}`))
+        // run build app
+        .then(() => ng('build', '--extract-css', '--sourcemap'))
+        // verify global styles
+        .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*}/))
+        // verify global styles sourcemap
+        .then(() => expectToFail(() =>
+          expectFileToMatch('dist/styles.bundle.css', '"mappings":""')))
+        // verify component styles
+        .then(() => expectFileToMatch('dist/main.bundle.js',
+          /.outer.*.inner.*background:\s*#[fF]+/))
+        .then(() => expectFileToMatch('dist/main.bundle.js',
+          /h1.*background:\s*#000+/))
+        // change files back
+        .then(() => updateJsonFile('angular-cli.json', configJson => {
+          const app = configJson['apps'][0];
+          app['styles'] = ['styles.css'];
+        }))
+        .then(() => replaceInFile('src/app/app.component.ts',
+          `./app.component.${ext}`, './app.component.css'));
+    });
+  });
+
+  return promise;
+}