feat(autoprefixer) Hook up autoprefixer for less, scss, and css.

[Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that uses data from caniuse.com to add vendor prefixes for styles that need them. It saves developers from having to manually prefix things, and is widely used these days.

Since it's available as a postcss plugin, it makes sense to inlcude it in the angular-cli build step by default.

This implementation uses the default browser targeting settings: last two versions, or whatever's in the user's project's [browserslist](https://github.com/ai/browserslist).

Closes #1512.

Author: Seth Davenport

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

@@ -4,6 +4,7 @@ import {GlobCopyWebpackPlugin} from '../plugins/glob-copy-webpack-plugin';
 import {BaseHrefWebpackPlugin} from '@angular-cli/base-href-webpack';
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const autoprefixer = require('autoprefixer');
 
 
 export function getWebpackCommonConfig(
@@ -131,7 +132,13 @@ export function getWebpackCommonConfig(
       new GlobCopyWebpackPlugin({
         patterns: appConfig.assets,
         globOptions: {cwd: appRoot, dot: true, ignore: '**/.gitkeep'}
-      })
+      }),
+      new webpack.LoaderOptionsPlugin({
+        test: /\.(css|scss|sass|less|styl)$/,
+        options: {
+          postcss: [ autoprefixer() ]
+        },
+      }),
     ],
     node: {
       fs: 'empty',

tests/e2e/tests/build/styles/css.ts

@@ -8,12 +8,17 @@ export default function() {
       @import './imported-styles.css';
       
       body { background-color: blue; }
+
+      div { flex: 1 }
     `,
     'src/imported-styles.css': `
       p { background-color: red; }
     `
   })
     .then(() => ng('build'))
     .then(() => expectFileToMatch('dist/styles.bundle.js', 'body { background-color: blue; }'))
-    .then(() => expectFileToMatch('dist/styles.bundle.js', 'p { background-color: red; }'));
+    .then(() => expectFileToMatch('dist/styles.bundle.js', 'p { background-color: red; }'))
+    .then(() => expectFileToMatch(
+      'dist/styles.bundle.js',
+      'div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }'));
 }

tests/e2e/tests/build/styles/less.ts

@@ -22,12 +22,17 @@ export default function() {
             background: #fff;
           }
         }
+
+        div { flex: 1 }
       `
     })
     .then(() => deleteFile('src/app/app.component.css'))
     .then(() => replaceInFile('src/app/app.component.ts',
                               './app.component.css', './app.component.less'))
     .then(() => ng('build'))
     .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/))
+    .then(() => expectFileToMatch(
+      'dist/main.bundle.js',
+      'div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }'))
     .then(() => moveFile('src/app/app.component.less', 'src/app/app.component.css'));
 }

tests/e2e/tests/build/styles/scss.ts

@@ -24,6 +24,8 @@ export default function() {
             background: #def;
           }
         }
+
+        div { flex: 1 }
       `,
       'src/app/app.component.partial.scss': stripIndents`
         .partial {
@@ -37,5 +39,8 @@ export default function() {
     .then(() => ng('build'))
     .then(() => expectFileToMatch('dist/main.bundle.js', /\.outer.*\.inner.*background.*#def/))
     .then(() => expectFileToMatch('dist/main.bundle.js', /\.partial.*\.inner.*background.*#def/))
+    .then(() => expectFileToMatch(
+      'dist/main.bundle.js',
+      'div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }'))
     .then(() => moveFile('src/app/app.component.scss', 'src/app/app.component.css'));
 }