feat(@angular/cli): optimize stylesheet resource processing

Author: clydin

package-lock.json

@@ -54,11 +54,9 @@
     "common-tags": "^1.3.1",
     "copy-webpack-plugin": "^4.1.1",
     "core-object": "^3.1.0",
-    "css-loader": "^0.28.1",
     "denodeify": "^1.2.1",
     "ember-cli-string-utils": "^1.0.0",
     "enhanced-resolve": "^3.4.1",
-    "exports-loader": "^0.6.3",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",
     "fs-extra": "^4.0.0",
@@ -78,6 +76,7 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
+    "postcss": "^6.0.16",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.10",
     "postcss-url": "^7.1.2",
@@ -124,7 +123,7 @@
     "@types/request": "~2.0.0",
     "@types/semver": "^5.3.30",
     "@types/source-map": "0.5.2",
-    "@types/webpack": "^3.0.5",
+    "@types/webpack": "^3.8.2",
     "@types/webpack-sources": "^0.1.3",
     "builtin-modules": "2.0.0",
     "conventional-changelog": "1.1.0",

package.json

@@ -1,26 +1,25 @@
 import * as webpack from 'webpack';
 import * as path from 'path';
 import {
-  SuppressExtractedTextChunksWebpackPlugin
-} from '../../plugins/suppress-entry-chunks-webpack-plugin';
+  CleanCssWebpackPlugin,
+  SuppressExtractedTextChunksWebpackPlugin,
+} from '../../plugins/webpack';
 import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
 import { pluginArgs, postcssArgs } from '../../tasks/eject';
-import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 
 const postcssUrl = require('postcss-url');
 const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const postcssImports = require('postcss-import');
+const PostcssCliResources = require('../../plugins/webpack').PostcssCliResources;
 
 /**
  * Enumerate loaders and their dependencies from this file to let the dependency validator
  * know they are used.
  *
- * require('exports-loader')
  * require('style-loader')
  * require('postcss-loader')
- * require('css-loader')
  * require('stylus')
  * require('stylus-loader')
  * require('less')
@@ -48,6 +47,8 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   const maximumInlineSize = 10;
   // Minify/optimize css in production.
   const minimizeCss = buildOptions.target === 'production';
+  // determine hashing format
+  const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
   // Convert absolute resource URLs to account for base-href and deploy-url.
   const baseHref = wco.buildOptions.baseHref || '';
   const deployUrl = wco.buildOptions.deployUrl || '';
@@ -122,21 +123,26 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         },
         { url: 'rebase' },
       ]),
+      PostcssCliResources({
+        deployUrl: loader.loaders[loader.loaderIndex].options.ident == 'extracted' ? '' : deployUrl,
+        loader,
+        filename: `[name]${hashFormat.file}.[ext]`,
+      }),
       autoprefixer({ grid: true }),
     ];
   };
   (postcssPluginCreator as any)[postcssArgs] = {
+    imports: {
+      '@angular/cli/plugins/webpack': 'PostcssCliResources',
+    },
     variableImports: {
       'autoprefixer': 'autoprefixer',
       'postcss-url': 'postcssUrl',
       'postcss-import': 'postcssImports',
     },
-    variables: { minimizeCss, baseHref, deployUrl, projectRoot, maximumInlineSize }
+    variables: { hashFormat, baseHref, deployUrl, projectRoot, maximumInlineSize }
   };
 
-  // determine hashing format
-  const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
-
   // use includePaths from appConfig
   const includePaths: string[] = [];
   let lessPathOptions: { paths: string[] };
@@ -198,29 +204,21 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   ];
 
   const commonLoaders: webpack.Loader[] = [
-    {
-      loader: 'css-loader',
-      options: {
-        sourceMap: cssSourceMap,
-        import: false,
-      }
-    },
-    {
-      loader: 'postcss-loader',
-      options: {
-        // A non-function property is required to workaround a webpack option handling bug
-        ident: 'postcss',
-        plugins: postcssPluginCreator,
-        sourceMap: cssSourceMap
-      }
-    }
+    { loader: 'raw-loader' },
   ];
 
   // load component css as raw strings
   const rules: webpack.Rule[] = baseRules.map(({test, use}) => ({
     exclude: globalStylePaths, test, use: [
-      'exports-loader?module.exports.toString()',
       ...commonLoaders,
+      {
+        loader: 'postcss-loader',
+        options: {
+          ident: 'embedded',
+          plugins: postcssPluginCreator,
+          sourceMap: cssSourceMap
+        }
+      },
       ...(use as webpack.Loader[])
     ]
   }));
@@ -231,6 +229,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       const extractTextPlugin = {
         use: [
           ...commonLoaders,
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: buildOptions.extractCss ? 'extracted' : 'embedded',
+              plugins: postcssPluginCreator,
+              sourceMap: cssSourceMap
+            }
+          },
           ...(use as webpack.Loader[])
         ],
         // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035

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

@@ -42,10 +42,8 @@
     "common-tags": "^1.3.1",
     "copy-webpack-plugin": "^4.1.1",
     "core-object": "^3.1.0",
-    "css-loader": "^0.28.1",
     "denodeify": "^1.2.1",
     "ember-cli-string-utils": "^1.0.0",
-    "exports-loader": "^0.6.3",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",
     "fs-extra": "^4.0.0",
@@ -63,6 +61,7 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
+    "postcss": "^6.0.16",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.10",
     "postcss-url": "^7.1.2",

packages/@angular/cli/package.json

@@ -0,0 +1,154 @@
+/**
+ * @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 { interpolateName } from 'loader-utils';
+import * as postcss from 'postcss';
+import * as url from 'url';
+import * as webpack from 'webpack';
+
+function wrapUrl(url: string): string {
+  let wrappedUrl;
+  const hasSingleQuotes = url.indexOf('\'') >= 0;
+
+  if (hasSingleQuotes) {
+    wrappedUrl = `"${url}"`;
+  } else {
+    wrappedUrl = `'${url}'`;
+  }
+
+  return `url(${wrappedUrl})`;
+}
+
+export interface PostcssCliResourcesOptions {
+  deployUrl?: string;
+  filename: string;
+  loader: webpack.loader.LoaderContext;
+}
+
+async function resolve(
+  file: string,
+  base: string,
+  resolver: (file: string, base: string) => Promise<string>
+): Promise<string> {
+  try {
+    return await resolver('./' + file, base);
+  } catch (err) {
+    return resolver(file, base);
+  }
+}
+
+export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResourcesOptions) => {
+  const { deployUrl, filename, loader } = options;
+
+  const process = async (inputUrl: string, resourceCache: Map<string, string>) => {
+    // If root-relative or absolute, leave as is
+    if (inputUrl.match(/^(?:\w+:\/\/|data:|chrome:|#|\/)/)) {
+      return inputUrl;
+    }
+    // If starts with a caret, remove and return remainder
+    // this supports bypassing asset processing
+    if (inputUrl.startsWith('^')) {
+      return inputUrl.substr(1);
+    }
+
+    const cachedUrl = resourceCache.get(inputUrl);
+    if (cachedUrl) {
+      return cachedUrl;
+    }
+
+    const { pathname, hash, search } = url.parse(inputUrl.replace(/\\/g, '/'));
+    const resolver = (file: string, base: string) => new Promise<string>((resolve, reject) => {
+      loader.resolve(base, file, (err, result) => {
+        if (err) {
+         reject(err);
+         return;
+        }
+        resolve(result);
+      });
+    });
+
+    const result = await resolve(pathname, loader.context, resolver);
+
+    return new Promise<string>((resolve, reject) => {
+      loader.fs.readFile(result, (err: Error, data: Buffer) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+
+        const content = data.toString();
+        const outputPath = interpolateName(
+          { resourcePath: result } as webpack.loader.LoaderContext,
+          filename,
+          { content },
+        );
+
+        loader.addDependency(result);
+        loader.emitFile(outputPath, content, undefined);
+
+        let outputUrl = outputPath.replace(/\\/g, '/');
+        if (hash || search) {
+          outputUrl = url.format({ pathname: outputUrl, hash, search });
+        }
+
+        if (deployUrl) {
+          outputUrl = url.resolve(deployUrl, outputUrl);
+        }
+
+        resourceCache.set(inputUrl, outputUrl);
+
+        resolve(outputUrl);
+      });
+    });
+  };
+
+  return (root) => {
+    const resourceCache = new Map<string, string>();
+
+    return root.walkDecls(async decl => {
+      const value = decl.value;
+
+      if (!value || value.indexOf('url') === -1) {
+        return;
+      }
+
+      const urlRegex = /url\(\s*['"]?([ \S]+?)['"]??\s*\)/g;
+      const segments: string[] = [];
+
+      let match;
+      let lastIndex = 0;
+      let modified = false;
+      // tslint:disable-next-line:no-conditional-assignment
+      while (match = urlRegex.exec(value)) {
+        let processedUrl;
+        try {
+          processedUrl = await process(match[1], resourceCache);
+        } catch (err) {
+          loader.emitError(decl.error(err.message, { word: match[1] }).toString());
+          continue;
+        }
+
+        if (lastIndex !== match.index) {
+          segments.push(value.slice(lastIndex, match.index));
+        }
+
+        if (!processedUrl || match[1] === processedUrl) {
+          segments.push(match[0]);
+        } else {
+          segments.push(wrapUrl(processedUrl));
+          modified = true;
+        }
+
+        lastIndex = urlRegex.lastIndex;
+      }
+
+      if (modified) {
+        decl.value = segments.join('');
+      }
+    });
+  };
+});

packages/@angular/cli/plugins/postcss-cli-resources.ts

@@ -6,3 +6,7 @@ export { BundleBudgetPlugin, BundleBudgetPluginOptions } from './bundle-budget';
 export { NamedLazyChunksWebpackPlugin } from './named-lazy-chunks-webpack-plugin';
 export { ScriptsWebpackPlugin, ScriptsWebpackPluginOptions } from './scripts-webpack-plugin';
 export { SuppressExtractedTextChunksWebpackPlugin } from './suppress-entry-chunks-webpack-plugin';
+export {
+  default as PostcssCliResources,
+  PostcssCliResourcesOptions,
+} from './postcss-cli-resources';

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

@@ -323,9 +323,12 @@ class JsonWebpackSerializer {
       if (loader.loader) {
         loader.loader = this._loaderReplacer(loader.loader);
       }
-      if (loader.loader === 'postcss-loader' && !this._postcssProcessed) {
-        const args: any = loader.options.plugins[postcssArgs];
+      if (loader.loader === 'postcss-loader') {
+        if (!this._postcssProcessed) {
+          const args: any = loader.options.plugins[postcssArgs];
 
+        Object.keys(args.imports)
+          .forEach(key => this._addImport(key, args.imports[key]));
         Object.keys(args.variableImports)
           .forEach(key => this.variableImports[key] = args.variableImports[key]);
         Object.keys(args.variables)
@@ -341,10 +344,12 @@ class JsonWebpackSerializer {
             }
           });
 
-        this.variables['postcssPlugins'] = loader.options.plugins;
-        loader.options.plugins = this._escape('postcssPlugins');
+          this.variables['postcssPlugins'] = loader.options.plugins;
+
+          this._postcssProcessed = true;
+        }
 
-        this._postcssProcessed = true;
+        loader.options.plugins = this._escape('postcssPlugins');
       }
     }
     return loader;
@@ -368,13 +373,16 @@ class JsonWebpackSerializer {
     };
 
     if (value[pluginArgs]) {
+      const options = value[pluginArgs];
+      options.use = options.use.map((loader: any) => this._loaderReplacer(loader));
+
       return {
         include: Array.isArray(value.include)
           ? value.include.map((x: any) => replaceExcludeInclude(x))
           : replaceExcludeInclude(value.include),
         test: this._serializeRegExp(value.test),
         loaders: this._escape(
-          `ExtractTextPlugin.extract(${JSON.stringify(value[pluginArgs], null, 2)})`)
+          `ExtractTextPlugin.extract(${JSON.stringify(options, null, 2)})`)
       };
     }