feat(build): add --extract-css flag (#3943)

Having css extraction on all the time makes dev rebuild times very slow for global styles.

This flag defaults to false on dev targets and true on prod targets.

Author: filipesilva

docs/documentation/build.md

@@ -35,3 +35,5 @@ ng build
 `--base-href` (`-bh`) base url for the application being built
 
 `--aot` flag whether to build using Ahead of Time compilation
+
+`--extract-css` extract css from global styles onto css files instead of js ones

docs/documentation/serve.md

@@ -34,4 +34,6 @@
 
 `--aot` flag to turn on Ahead of Time compilation
 
-`--open` (`-o`) opens the app in the default browser
+`--open` (`-o`) opens the app in the default browser
+
+`--extract-css` extract css from global styles onto css files instead of js ones

packages/angular-cli/commands/build.ts

@@ -18,6 +18,7 @@ export interface BuildOptions {
   locale?: string;
   deployUrl?: string;
   outputHashing?: string;
+  extractCss?: boolean | null;
 }
 
 const BuildCommand = Command.extend({
@@ -52,7 +53,8 @@ const BuildCommand = Command.extend({
       type: String,
       values: ['none', 'all', 'media', 'bundles'],
       description: 'define the output filename cache-busting hashing mode'
-    }
+    },
+    { name: 'extract-css',    type: Boolean, default: true }
   ],
 
   run: function (commandOptions: BuildOptions) {

packages/angular-cli/commands/serve.run.ts

@@ -20,6 +20,11 @@ export default function serveRun(commandOptions: ServeTaskOptions) {
     }
   }
 
+  // default to extractCss to true on prod target
+  if (typeof commandOptions.extractCss === 'undefined') {
+    commandOptions.extractCss = commandOptions.target === 'production';
+  }
+
   // Check angular version.
   Version.assertAngularVersionIs2_3_1OrHigher(this.project.root);
   commandOptions.liveReloadHost = commandOptions.liveReloadHost || commandOptions.host;

packages/angular-cli/commands/serve.ts

@@ -30,6 +30,7 @@ export interface ServeTaskOptions {
   i18nFile?: string;
   i18nFormat?: string;
   locale?: string;
+  extractCss?: boolean | null;
 }
 
 const ServeCommand = Command.extend({
@@ -103,7 +104,8 @@ const ServeCommand = Command.extend({
     },
     { name: 'i18n-file',       type: String, default: null },
     { name: 'i18n-format',     type: String, default: null },
-    { name: 'locale',         type: String, default: null }
+    { name: 'locale',         type: String, default: null },
+    { name: 'extract-css',    type: Boolean, default: null }
   ],
 
   run: function(commandOptions: ServeTaskOptions) {

packages/angular-cli/models/webpack-build-common.ts

@@ -34,6 +34,7 @@ export function getWebpackCommonConfig(
   verbose: boolean,
   progress: boolean,
   outputHashing: string,
+  extractCss: boolean,
 ) {
 
   const appRoot = path.resolve(projectRoot, appConfig.root);
@@ -92,7 +93,7 @@ export function getWebpackCommonConfig(
     // create css loaders for component css and for global css
     extraRules.push(...makeCssLoaders(globalStyles.map((style) => style.path)));
 
-    if (extractedCssEntryPoints.length > 0) {
+    if (extractCss && extractedCssEntryPoints.length > 0) {
       // don't emit the .js entry point for extracted styles
       extraPlugins.push(new SuppressEntryChunksWebpackPlugin({ chunks: extractedCssEntryPoints }));
     }
@@ -173,7 +174,10 @@ export function getWebpackCommonConfig(
       ].concat(extraRules)
     },
     plugins: [
-      new ExtractTextPlugin(`[name]${hashFormat.extract}.bundle.css`),
+      new ExtractTextPlugin({
+        filename: `[name]${hashFormat.extract}.bundle.css`,
+        disable: !extractCss
+      }),
       new HtmlWebpackPlugin({
         template: path.resolve(appRoot, appConfig.index),
         filename: path.resolve(appConfig.outDir, appConfig.index),

packages/angular-cli/models/webpack-config.ts

@@ -33,7 +33,8 @@ export class NgCliWebpackConfig {
     verbose = false,
     progress = true,
     deployUrl?: string,
-    outputHashing?: string
+    outputHashing?: string,
+    extractCss = true,
   ) {
     const appConfig = CliConfig.fromProject().config.apps[0];
     const projectRoot = this.ngCliProject.root;
@@ -50,7 +51,8 @@ export class NgCliWebpackConfig {
       vendorChunk,
       verbose,
       progress,
-      outputHashing
+      outputHashing,
+      extractCss,
     );
     let targetConfigPartial = this.getTargetConfig(projectRoot, appConfig, sourcemap, verbose);
 

packages/angular-cli/tasks/build-webpack-watch.ts

@@ -34,7 +34,8 @@ export default Task.extend({
       runTaskOptions.verbose,
       runTaskOptions.progress,
       deployUrl,
-      runTaskOptions.outputHashing
+      runTaskOptions.outputHashing,
+      runTaskOptions.extractCss,
     ).config;
     const webpackCompiler: any = webpack(config);
 

packages/angular-cli/tasks/build-webpack.ts

@@ -35,7 +35,8 @@ export default <any>Task.extend({
       runTaskOptions.verbose,
       runTaskOptions.progress,
       deployUrl,
-      runTaskOptions.outputHashing
+      runTaskOptions.outputHashing,
+      runTaskOptions.extractCss,
     ).config;
 
     const webpackCompiler: any = webpack(config);

packages/angular-cli/tasks/serve-webpack.ts

@@ -35,7 +35,10 @@ export default Task.extend({
       serveTaskOptions.sourcemap,
       serveTaskOptions.vendorChunk,
       serveTaskOptions.verbose,
-      serveTaskOptions.progress
+      serveTaskOptions.progress,
+      undefined,
+      undefined,
+      serveTaskOptions.extractCss
     ).config;
 
     // This allows for live reload of page when changes are made to repo.
@@ -55,6 +58,12 @@ export default Task.extend({
       ui.writeLine('  for information on working with HMR for Webpack.');
       entryPoints.push('webpack/hot/dev-server');
       config.plugins.push(new webpack.HotModuleReplacementPlugin());
+      if (serveTaskOptions.extractCss) {
+        ui.writeLine(oneLine`
+          ${chalk.yellow('NOTICE')} (HMR) does not allow for CSS hot reload when used
+          together with '--extract-css'.
+        `);
+      }
     }
     if (!config.entry.main) { config.entry.main = []; }
     config.entry.main.unshift(...entryPoints);

tests/e2e/tests/build/styles/styles-array.ts

@@ -40,10 +40,10 @@ export default function () {
     .then(() => expectFileToMatch('dist/common-entry.bundle.css', '.common-entry-style'))
     .then(() => expectFileToMatch('dist/common-entry.bundle.js', 'common-entry-script'))
     // there are no js entry points for css only bundles
-    .then(() => expectToFail(() => expectFileToExist('dist/styles.bundle.js')))
-    .then(() => expectToFail(() => expectFileToExist('dist/lazy-styles.bundle.js')))
-    .then(() => expectToFail(() => expectFileToExist('dist/renamed-styles.bundle.js')))
-    .then(() => expectToFail(() => expectFileToExist('dist/renamed-lazy-styles.bundle.js')))
+    .then(() => expectToFail(() => expectFileToExist('dist/style.bundle.js')))
+    .then(() => expectToFail(() => expectFileToExist('dist/lazy-style.bundle.js')))
+    .then(() => expectToFail(() => expectFileToExist('dist/renamed-style.bundle.js')))
+    .then(() => expectToFail(() => expectFileToExist('dist/renamed-lazy-style.bundle.js')))
     // index.html lists the right bundles
     .then(() => expectFileToMatch('dist/index.html', oneLineTrim`
       <link href="renamed-style.bundle.css" rel="stylesheet"/>
@@ -55,5 +55,11 @@ export default function () {
       <script type="text/javascript" src="vendor.bundle.js"></script>
       <script type="text/javascript" src="common-entry.bundle.js"></script>
       <script type="text/javascript" src="main.bundle.js"></script>
-    `));
+    `))
+    .then(() => ng('build', '--no-extract-css'))
+    // js files still exist when not extracting css
+    .then(() => expectFileToExist('dist/styles.bundle.js'))
+    .then(() => expectFileToExist('dist/lazy-style.bundle.js'))
+    .then(() => expectFileToExist('dist/renamed-style.bundle.js'))
+    .then(() => expectFileToExist('dist/renamed-lazy-style.bundle.js'));
 }