feat(@angular/cli): optimize stylesheets after full bundling

Author: clydin

package.json

@@ -47,11 +47,11 @@
     "autoprefixer": "^6.5.3",
     "chalk": "~2.2.0",
     "circular-dependency-plugin": "^4.2.1",
+    "clean-css": "^4.1.9",
     "common-tags": "^1.3.1",
     "copy-webpack-plugin": "^4.1.1",
     "core-object": "^3.1.0",
     "css-loader": "^0.28.1",
-    "cssnano": "^3.10.0",
     "denodeify": "^1.2.1",
     "ember-cli-string-utils": "^1.0.0",
     "enhanced-resolve": "^3.4.1",

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

@@ -6,8 +6,8 @@ import {
 import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
 import { pluginArgs, postcssArgs } from '../../tasks/eject';
+import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 
-const cssnano = require('cssnano');
 const postcssUrl = require('postcss-url');
 const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -45,15 +45,6 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const deployUrl = wco.buildOptions.deployUrl || '';
 
   const postcssPluginCreator = function() {
-    // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
-    const importantCommentRe = /@preserve|@licen[cs]e|[@#]\s*source(?:Mapping)?URL|^!/i;
-    const minimizeOptions = {
-      autoprefixer: false, // full pass with autoprefixer is run separately
-      safe: true,
-      mergeLonghand: false, // version 3+ should be safe; cssnano currently uses 2.x
-      discardComments : { remove: (comment: string) => !importantCommentRe.test(comment) }
-    };
-
     return [
       postcssUrl([
         {
@@ -84,15 +75,12 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       ]),
       autoprefixer(),
       customProperties({ preserve: true })
-    ].concat(
-        minimizeCss ? [cssnano(minimizeOptions)] : []
-    );
+    ];
   };
   (postcssPluginCreator as any)[postcssArgs] = {
     variableImports: {
       'autoprefixer': 'autoprefixer',
       'postcss-url': 'postcssUrl',
-      'cssnano': 'cssnano',
       'postcss-custom-properties': 'customProperties'
     },
     variables: { minimizeCss, baseHref, deployUrl }
@@ -222,6 +210,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin());
   }
 
+  if (minimizeCss) {
+    extraPlugins.push(new CleanCssWebpackPlugin({ sourceMap: cssSourceMap }));
+  }
+
   return {
     entry: entryPoints,
     module: { rules },

packages/@angular/cli/package.json

@@ -35,11 +35,11 @@
     "autoprefixer": "^6.5.3",
     "chalk": "~2.2.0",
     "circular-dependency-plugin": "^4.2.1",
+    "clean-css": "^4.1.9",
     "common-tags": "^1.3.1",
     "copy-webpack-plugin": "^4.1.1",
     "core-object": "^3.1.0",
     "css-loader": "^0.28.1",
-    "cssnano": "^3.10.0",
     "denodeify": "^1.2.1",
     "ember-cli-string-utils": "^1.0.0",
     "exports-loader": "^0.6.3",

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

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Compiler } from 'webpack';
+import { RawSource, SourceMapSource } from 'webpack-sources';
+
+const CleanCSS = require('clean-css');
+
+interface Chunk {
+  files: string[];
+}
+
+export interface CleanCssWebpackPluginOptions {
+  sourceMap: boolean;
+}
+
+export class CleanCssWebpackPlugin {
+
+  constructor(private options: Partial<CleanCssWebpackPluginOptions> = {}) {}
+
+  apply(compiler: Compiler): void {
+    compiler.plugin('compilation', (compilation: any) => {
+      compilation.plugin('optimize-chunk-assets',
+      (chunks: Array<Chunk>, callback: (err?: Error) => void) => {
+
+        const cleancss = new CleanCSS({
+          compatibility: 'ie9',
+          level: 2,
+          inline: false,
+          returnPromise: true,
+          sourceMap: this.options.sourceMap,
+        });
+
+        const files: string[] = [...compilation.additionalChunkAssets];
+
+        chunks.forEach(chunk => {
+          if (chunk.files && chunk.files.length > 0) {
+            files.push(...chunk.files);
+          }
+        });
+
+        const actions = files
+          .filter(file => file.endsWith('.css'))
+          .map(file => {
+            const asset = compilation.assets[file];
+            if (!asset) {
+              return Promise.resolve();
+            }
+
+            let content: string;
+            let map: any;
+            if (asset.sourceAndMap) {
+              const sourceAndMap = asset.sourceAndMap();
+              content = sourceAndMap.source;
+              map = sourceAndMap.map;
+            } else {
+              content = asset.source();
+            }
+
+            if (content.length === 0) {
+              return Promise.resolve();
+            }
+
+            return Promise.resolve()
+              .then(() => cleancss.minify(content, map))
+              .then((output: any) => {
+                let hasWarnings = false;
+                if (output.warnings && output.warnings.length > 0) {
+                  compilation.warnings.push(...output.warnings);
+                  hasWarnings = true;
+                }
+
+                if (output.errors && output.errors.length > 0) {
+                  output.errors
+                    .forEach((error: string) => compilation.errors.push(new Error(error)));
+                  return;
+                }
+
+                // generally means invalid syntax so bail
+                if (hasWarnings && output.stats.minifiedSize === 0) {
+                  return;
+                }
+
+                let newSource;
+                if (output.sourceMap) {
+                  newSource = new SourceMapSource(
+                    output.styles,
+                    file,
+                    output.sourceMap.toString(),
+                    content,
+                    map,
+                  );
+                } else {
+                  newSource = new RawSource(output.styles);
+                }
+
+                compilation.assets[file] = newSource;
+              });
+          });
+
+        Promise.all(actions)
+          .then(() => callback())
+          .catch(err => callback(err));
+      });
+    });
+  }
+}

packages/@angular/cli/plugins/webpack.ts

@@ -1,5 +1,6 @@
 // Exports the webpack plugins we use internally.
 export { BaseHrefWebpackPlugin } from '../lib/base-href-webpack/base-href-webpack-plugin';
+export { CleanCssWebpackPlugin, CleanCssWebpackPluginOptions } from './cleancss-webpack-plugin';
 export { GlobCopyWebpackPlugin, GlobCopyWebpackPluginOptions } from './glob-copy-webpack-plugin';
 export { NamedLazyChunksWebpackPlugin } from './named-lazy-chunks-webpack-plugin';
 export { ScriptsWebpackPlugin, ScriptsWebpackPluginOptions } from './scripts-webpack-plugin';

packages/@angular/cli/tasks/eject.ts

@@ -190,6 +190,7 @@ class JsonWebpackSerializer {
           this._addImport('webpack.optimize', 'ModuleConcatenationPlugin');
           break;
         case angularCliPlugins.BaseHrefWebpackPlugin:
+        case angularCliPlugins.CleanCssWebpackPlugin:
         case angularCliPlugins.NamedLazyChunksWebpackPlugin:
         case angularCliPlugins.ScriptsWebpackPlugin:
         case angularCliPlugins.SuppressExtractedTextChunksWebpackPlugin:
@@ -565,7 +566,6 @@ export default Task.extend({
           'webpack',
           'autoprefixer',
           'css-loader',
-          'cssnano',
           'exports-loader',
           'file-loader',
           'html-webpack-plugin',