fix(@angular/cli): postCssOption

Author: jycouet

docs/documentation/angular-cli.md

@@ -86,6 +86,7 @@
     - *preserveSymlinks* (`boolean`): Do not use the real path when resolving modules. Default is `false`.
     - *showCircularDependencies* (`boolean`): Show circular dependency warnings on builds. Default is `true`.
     - *namedChunks* (`boolean`): Use file name for lazy loaded chunks.
+    - *withPostCssWarnings* (`boolean`): Flag to have post CSS warnings. Default is `true`.
   - *serve*: Properties to be passed to the serve command
     - *port* (`number`): The port the application will be served on. Default is `4200`.
     - *host* (`string`): The host the application will be served on. Default is `localhost`.

packages/@angular/cli/commands/build.ts

@@ -12,7 +12,7 @@ const Command = require('../ember-cli/lib/models/command');
 const config = CliConfig.fromProject() || CliConfig.fromGlobal();
 const buildConfigDefaults = config.getPaths('defaults.build', [
   'sourcemaps', 'baseHref', 'progress', 'poll', 'deleteOutputPath', 'preserveSymlinks',
-  'showCircularDependencies', 'commonChunk', 'namedChunks'
+  'showCircularDependencies', 'commonChunk', 'namedChunks', 'withPostCssWarnings'
 ]);
 
 // defaults for BuildOptions
@@ -207,6 +207,12 @@ export const baseBuildCommandOptions: any = [
     type: Boolean,
     description: 'Flag to prevent building an app shell',
     default: false
+  },
+  {
+    name: 'with-post-css-warnings',
+    type: Boolean,
+    description: 'Flag to have post CSS warnings.',
+    default: buildConfigDefaults['withPostCssWarnings']
   }
 ];
 

packages/@angular/cli/lib/config/schema.json

@@ -519,6 +519,11 @@
             "namedChunks": {
               "description": "Use file name for lazy loaded chunks.",
               "type": "boolean"
+            },
+            "withPostCssWarnings": {
+              "description": "Flag to have post CSS warnings.",
+              "type": "boolean",
+              "default": true
             }
           }
         },

packages/@angular/cli/models/build-options.ts

@@ -33,4 +33,5 @@ export interface BuildOptions {
   forceTsCommonjs?: boolean;
   serviceWorker?: boolean;
   skipAppShell?: boolean;
+  withPostCssWarnings?: boolean;
 }

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

@@ -105,7 +105,8 @@ export class NgCliWebpackConfig<T extends BuildOptions = BuildOptions> {
         extractCss: false,
         namedChunks: true,
         aot: false,
-        buildOptimizer: false
+        buildOptimizer: false,
+        withPostCssWarnings: true
       },
       production: {
         environment: 'prod',

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

@@ -46,6 +46,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   // Convert absolute resource URLs to account for base-href and deploy-url.
   const baseHref = wco.buildOptions.baseHref || '';
   const deployUrl = wco.buildOptions.deployUrl || '';
+  const withPostCssWarnings = wco.buildOptions.withPostCssWarnings || true;
 
   const postcssPluginCreator = function() {
     // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
@@ -86,7 +87,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         }
       ]),
       autoprefixer(),
-      customProperties({ preserve: true })
+      customProperties({ preserve: true, warnings: withPostCssWarnings })
     ].concat(
         minimizeCss ? [cssnano(minimizeOptions)] : []
     );

tests/e2e/tests/build/with-post-css-warnings.ts

@@ -0,0 +1,43 @@
+import {
+  killAllProcesses,
+  waitForAnyProcessOutputToMatch,
+  execAndWaitForOutputToMatch
+} from '../../utils/process';
+import { appendToFile } from '../../utils/fs';
+import { getGlobalVariable } from '../../utils/env';
+import { updateJsonFile } from '../../utils/project';
+
+const webpackGoodRegEx = /webpack: Compiled successfully./;
+const webpackWarningRegEx = /webpack: Compiled with warnings./;
+
+export default function () {
+  if (process.platform.startsWith('win')) {
+    return Promise.resolve();
+  }
+  // Skip this in ejected tests.
+  if (getGlobalVariable('argv').eject) {
+    return Promise.resolve();
+  }
+
+
+  return execAndWaitForOutputToMatch('ng', ['serve'], webpackGoodRegEx)
+    // Should trigger a rebuild.
+    .then(() => appendToFile('src/app/app.component.css', 'body { color: var(--white); }'))
+    // Should see some warnings
+    .then(() => waitForAnyProcessOutputToMatch(webpackWarningRegEx, 10000))
+    .then(() => killAllProcesses(), (err: any) => {
+      killAllProcesses();
+      throw err;
+    })
+    // update withPostCssWarnings flag
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      configJson['defaults']['build'] = {};
+      configJson['defaults']['build']['withPostCssWarnings'] = false
+    }))
+    // should remove warnings
+    .then(() => execAndWaitForOutputToMatch('ng', ['serve'], webpackGoodRegEx))
+    .then(() => killAllProcesses(), (err: any) => {
+      killAllProcesses();
+      throw err;
+    })
+}