feat(@angular/cli): add fallback for CSS variables #7514

In order to integrate with CSS frameworks that use the "var" keyword, cssnext needs to be added to the build toolchain to preprocess the CSS rules. This also replaces the need to call autoprefixer directly.

Author: garoyeri

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

@@ -9,7 +9,7 @@ import { pluginArgs, postcssArgs } from '../../tasks/eject';
 
 const cssnano = require('cssnano');
 const postcssUrl = require('postcss-url');
-const autoprefixer = require('autoprefixer');
+const cssnext = require('postcss-cssnext');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /**
@@ -78,14 +78,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           }
         }
       }),
-      autoprefixer(),
+      cssnext(),
     ].concat(
         minimizeCss ? [cssnano(minimizeOptions)] : []
     );
   };
   (postcssPluginCreator as any)[postcssArgs] = {
     variableImports: {
-      'autoprefixer': 'autoprefixer',
+      'postcss-cssnext': 'cssnext',
       'postcss-url': 'postcssUrl',
       'cssnano': 'cssnano'
     },

packages/@angular/cli/package.json

@@ -61,6 +61,7 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
+    "postcss-cssnext": "^3.0.2",
     "postcss-loader": "^1.3.3",
     "postcss-url": "^5.1.2",
     "raw-loader": "^0.5.1",