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

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.run.ts

@@ -22,6 +22,9 @@ export default function buildRun(commandOptions: BuildOptions) {
     }
   }
 
+  // default to extractCss to true on dev target
+  commandOptions.extractCss = commandOptions.extractCss || commandOptions.target === 'development';
+
   const project = this.project;
 
   // Check angular version.

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: null }
   ],
 
   run: function (commandOptions: BuildOptions) {

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

@@ -20,6 +20,9 @@ export default function serveRun(commandOptions: ServeTaskOptions) {
     }
   }
 
+  // default to extractCss to true on dev target
+  commandOptions.extractCss = commandOptions.extractCss || commandOptions.target === 'development';
+
   // 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);

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 config: CliConfig = CliConfig.fromProject();
     const appConfig = config.config.apps[0];
@@ -50,7 +51,8 @@ export class NgCliWebpackConfig {
       vendorChunk,
       verbose,
       progress,
-      outputHashing
+      outputHashing,
+      extractCss,
     );
     let targetConfigPartial = this.getTargetConfig(
       this.ngCliProject.root, 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,9 @@ export default Task.extend({
       serveTaskOptions.sourcemap,
       serveTaskOptions.vendorChunk,
       serveTaskOptions.verbose,
-      serveTaskOptions.progress
+      serveTaskOptions.progress,
+      undefined,
+      serveTaskOptions.extractCss
     ).config;
 
     // This allows for live reload of page when changes are made to repo.