Added autoprefixer

Jason Ruesch · Jason Ruesch · commit d0ac100e1b5c · 2016-10-12T19:42:45.000-04:00
diff --git a/package.json b/package.json
@@ -135,6 +135,7 @@
     "@types/request": "0.0.30",
     "@types/rimraf": "0.0.25-alpha",
     "@types/webpack": "^1.12.22-alpha",
+    "autoprefixer": "^6.5.1",
     "chai": "^3.5.0",
     "conventional-changelog": "^1.1.0",
     "dtsgenerator": "^0.7.1",
diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts
@@ -4,7 +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(
   projectRoot: string,
@@ -131,6 +131,13 @@ export function getWebpackCommonConfig(
       new GlobCopyWebpackPlugin({
         patterns: appConfig.assets,
         globOptions: {cwd: appRoot, dot: true, ignore: '**/.gitkeep'}
+      }),
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          postcss: function () {
+            return [autoprefixer];
+          }
+        }
       })
     ],
     node: {
diff --git a/packages/angular-cli/models/webpack-config.ts b/packages/angular-cli/models/webpack-config.ts
@@ -11,6 +11,7 @@ import {
   getWebpackMobileConfigPartial,
   getWebpackMobileProdConfigPartial
 } from './';
+import * as webpack from 'webpack';
 
 export class NgCliWebpackConfig {
   // TODO: When webpack2 types are finished lets replace all these any types
@@ -45,13 +46,13 @@ export class NgCliWebpackConfig {
       let mobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, appConfig);
       let mobileProdConfigPartial = getWebpackMobileProdConfigPartial(this.ngCliProject.root,
                                                                       appConfig);
-      baseConfig = webpackMerge(baseConfig, mobileConfigPartial);
+      baseConfig = this.betterWebpackMerge(baseConfig, mobileConfigPartial);
       if (this.target == 'production') {
-        targetConfigPartial = webpackMerge(targetConfigPartial, mobileProdConfigPartial);
+        targetConfigPartial = this.betterWebpackMerge(targetConfigPartial, mobileProdConfigPartial);
       }
     }
 
-    this.config = webpackMerge(
+    this.config = this.betterWebpackMerge(
       baseConfig,
       targetConfigPartial,
       typescriptConfigPartial
@@ -68,4 +69,43 @@ export class NgCliWebpackConfig {
         throw new Error("Invalid build target. Only 'development' and 'production' are available.");
     }
   }
+
+  betterWebpackMerge(baseConfig: any, targetConfig: any, targetTypeScriptConfig?: any) {
+    let basePlugins = (baseConfig && baseConfig.plugins) || [];
+    let targetPlugins = (targetConfig && targetConfig.plugins) || [];
+    let targetTypeScriptPlugins = (targetTypeScriptConfig && targetTypeScriptConfig.plugins) || [];
+    let baseOptionsPlugins = basePlugins
+      .filter((plugin: any) => plugin instanceof webpack.LoaderOptionsPlugin)
+      .map((plugin: any) => plugin.options.options );
+    let targetOptionsPlugins = targetPlugins
+      .filter((plugin: any) => plugin instanceof webpack.LoaderOptionsPlugin)
+      .map((plugin: any) => plugin.options.options );
+    let targetTypeScriptOptionsPlugins = targetTypeScriptPlugins
+      .filter((plugin: any) => plugin instanceof webpack.LoaderOptionsPlugin)
+      .map((plugin: any) => plugin.options.options );
+    let mergedConfig = webpackMerge(baseConfig, targetConfig, targetTypeScriptConfig);
+    if (baseOptionsPlugins.length > 0 || targetOptionsPlugins.length > 0 || targetTypeScriptOptionsPlugins.length > 0) {
+      let mergedBase = baseOptionsPlugins.reduce((base: any, next: any) => {
+        Object.assign(base, next);
+        return base;
+      }, {});
+      let mergedTarget = targetOptionsPlugins.reduce((base: any, next: any) => {
+        Object.assign(base, next);
+        return base;
+      }, {});
+      let mergedTargetTypeScript = targetTypeScriptOptionsPlugins.reduce((base: any, next: any) => {
+        Object.assign(base, next);
+        return base;
+      }, {});
+      if (mergedConfig.plugins) {
+        mergedConfig.plugins = mergedConfig.plugins.filter((plugin: any) => {
+          return !(plugin instanceof webpack.LoaderOptionsPlugin);
+        });
+        mergedConfig.plugins.push(new webpack.LoaderOptionsPlugin({
+          options: Object.assign(mergedBase, mergedTarget, mergedTargetTypeScript)
+        }));
+      }
+    }
+    return mergedConfig;
+  }
 }
