fix(@angular/cli): ensure external component styles are optimized

Author: clydin

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

@@ -276,7 +276,11 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   }
 
   if (minimizeCss) {
-    extraPlugins.push(new CleanCssWebpackPlugin({ sourceMap: cssSourceMap }));
+    extraPlugins.push(new CleanCssWebpackPlugin({
+      sourceMap: cssSourceMap,
+      // component styles retain their original file name
+      test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
+    }));
   }
 
   return {

packages/@angular/cli/plugins/cleancss-webpack-plugin.ts

@@ -16,11 +16,19 @@ interface Chunk {
 
 export interface CleanCssWebpackPluginOptions {
   sourceMap: boolean;
+  test: (file: string) => boolean;
 }
 
 export class CleanCssWebpackPlugin {
-
-  constructor(private options: Partial<CleanCssWebpackPluginOptions> = {}) {}
+  private readonly _options: CleanCssWebpackPluginOptions;
+
+  constructor(options: Partial<CleanCssWebpackPluginOptions>) {
+    this._options = {
+      sourceMap: false,
+      test: (file) => file.endsWith('.css'),
+      ...options,
+    };
+  }
 
   apply(compiler: Compiler): void {
     compiler.plugin('compilation', (compilation: any) => {
@@ -32,7 +40,7 @@ export class CleanCssWebpackPlugin {
           level: 2,
           inline: false,
           returnPromise: true,
-          sourceMap: this.options.sourceMap,
+          sourceMap: this._options.sourceMap,
         });
 
         const files: string[] = [...compilation.additionalChunkAssets];
@@ -44,7 +52,7 @@ export class CleanCssWebpackPlugin {
         });
 
         const actions = files
-          .filter(file => file.endsWith('.css'))
+          .filter(file => this._options.test(file))
           .map(file => {
             const asset = compilation.assets[file];
             if (!asset) {