From 6a93a527543d0de4d9886a829707c3eaa14ec66d Mon Sep 17 00:00:00 2001
From: Seth Davenport <seth@rangle.io>
Date: Sun, 23 Oct 2016 22:21:21 -0400
Subject: [PATCH] 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.
---
 packages/angular-cli/models/webpack-build-common.ts | 9 ++++++++-
 tests/e2e/tests/build/styles/css.ts                 | 7 ++++++-
 tests/e2e/tests/build/styles/less.ts                | 5 +++++
 tests/e2e/tests/build/styles/scss.ts                | 5 +++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts
index aae14af6663c..2726873ff888 100644
--- a/packages/angular-cli/models/webpack-build-common.ts
+++ b/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',
diff --git a/tests/e2e/tests/build/styles/css.ts b/tests/e2e/tests/build/styles/css.ts
index aa081ef1f45c..7d49e5e94ba9 100644
--- a/tests/e2e/tests/build/styles/css.ts
+++ b/tests/e2e/tests/build/styles/css.ts
@@ -8,6 +8,8 @@ export default function() {
       @import './imported-styles.css';
       
       body { background-color: blue; }
+
+      div { flex: 1 }
     `,
     'src/imported-styles.css': `
       p { background-color: red; }
@@ -15,5 +17,8 @@ export default function() {
   })
     .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 }'));
 }
diff --git a/tests/e2e/tests/build/styles/less.ts b/tests/e2e/tests/build/styles/less.ts
index 279742be2ceb..1c9f0becba26 100644
--- a/tests/e2e/tests/build/styles/less.ts
+++ b/tests/e2e/tests/build/styles/less.ts
@@ -22,6 +22,8 @@ export default function() {
             background: #fff;
           }
         }
+
+        div { flex: 1 }
       `
     })
     .then(() => deleteFile('src/app/app.component.css'))
@@ -29,5 +31,8 @@ export default function() {
                               './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'));
 }
diff --git a/tests/e2e/tests/build/styles/scss.ts b/tests/e2e/tests/build/styles/scss.ts
index 52d7d46fbd42..deb3404f159c 100644
--- a/tests/e2e/tests/build/styles/scss.ts
+++ b/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'));
 }