feat(@angular/cli): use clean-css to optimize stylesheets

Author: clydin

package-lock.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",
@@ -123,6 +123,7 @@
     "@types/semver": "^5.3.30",
     "@types/source-map": "^0.5.0",
     "@types/webpack": "^3.0.5",
+    "@types/webpack-sources": "^0.1.3",
     "conventional-changelog": "1.1.0",
     "dtsgenerator": "^0.9.1",
     "eslint": "^3.11.0",

package.json

@@ -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');
@@ -48,15 +48,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([
         {
@@ -87,15 +78,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 }
@@ -225,6 +213,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/models/webpack-configs/styles.ts

@@ -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/package.json

@@ -0,0 +1,102 @@
+/**
+ * @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: () => 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];
+
+            let content: string;
+            let map: any;
+            if (asset.sourceAndMap) {
+              const sourceAndMap = asset.sourceAndMap();
+              content = sourceAndMap.source;
+              map = sourceAndMap.map;
+            } else {
+              content = asset.source();
+            }
+
+            return 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;
+              })
+              .catch((error: Error) => compilation.errors.push(error));
+          });
+
+        Promise.all(actions).then(() => callback());
+      });
+    });
+  }
+}

packages/@angular/cli/plugins/cleancss-webpack-plugin.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 { InsertConcatAssetsWebpackPlugin } from './insert-concat-assets-webpack-plugin';
 export { NamedLazyChunksWebpackPlugin } from './named-lazy-chunks-webpack-plugin';

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

@@ -203,6 +203,7 @@ class JsonWebpackSerializer {
           this._addImport('webpack.optimize', 'ModuleConcatenationPlugin');
           break;
         case angularCliPlugins.BaseHrefWebpackPlugin:
+        case angularCliPlugins.CleanCssWebpackPlugin:
         case angularCliPlugins.NamedLazyChunksWebpackPlugin:
         case angularCliPlugins.SuppressExtractedTextChunksWebpackPlugin:
           this._addImport('@angular/cli/plugins/webpack', plugin.constructor.name);