[BPK-838] Add optimize-css-assets-webpack-plugin

packages/react-scripts/CHANGELOG.md

@@ -4,6 +4,9 @@
 
 _Nothing yet_
 
+### Fixed
+- Production and SSR builds will now use `optimize-css-assets-webpack-plugin` with `cssnano` to optimize output CSS. This gets rid of duplication of global CSS constructs such as keyframes.
+
 ## 4.0.1 - 2017-07-28
 ### Fixed
 - Deprecated BpkHeading and BpkParagraph

packages/react-scripts/config/webpack.config.prod.js

@@ -17,6 +17,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 // const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
@@ -447,6 +448,20 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new OptimizeCssAssetsPlugin({
+      cssProcessorOptions: {
+        postcssZindex: {
+          disable: true,
+        },
+        autoprefixer: { disable: true },
+        postcssDiscardComments: {
+          disable: true,
+        },
+        map: {
+          inline: false,
+        },
+      },
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

packages/react-scripts/config/webpack.config.ssr.js

@@ -18,6 +18,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 // const ManifestPlugin = require('webpack-manifest-plugin');
 // const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 // const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const sassFunctions = require('bpk-mixins/sass-functions');
 const paths = require('./paths');
@@ -440,6 +441,20 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new OptimizeCssAssetsPlugin({
+      cssProcessorOptions: {
+        postcssZindex: {
+          disable: true,
+        },
+        autoprefixer: { disable: true },
+        postcssDiscardComments: {
+          disable: true,
+        },
+        map: {
+          inline: false,
+        },
+      },
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

packages/react-scripts/package.json

@@ -44,6 +44,7 @@
     "jest": "20.0.4",
     "node-sass": "4.5.3",
     "object-assign": "4.1.1",
+    "optimize-css-assets-webpack-plugin": "3.0.0",
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.6",
     "promise": "7.1.1",