diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
index 7761fff6875..6eff2a7a558 100644
--- a/packages/react-scripts/CHANGELOG.md
+++ b/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
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index f40fa97b083..5be28d2cfdf 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/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.
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
index dd2517ee14c..de6e8ea127e 100644
--- a/packages/react-scripts/config/webpack.config.ssr.js
+++ b/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.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index a3a81ed3fdc..493ad50bc9d 100644
--- a/packages/react-scripts/package.json
+++ b/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",