Build a minified version of each theme file using cssnano

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - `EuiComboBox` now applies the provided `data-test-subj` to its options list element with the suffix `-optionsList` so you can find a specific combo box instance's options list. This wasn't previously possible because the options list is attached to the body element, not the combo box element. This is in addition to the existing `data-test-subj="comboBoxOptionsList"`. ([#1054](https://github.com/elastic/eui/pull/1054))
+- EUI now provides minified versions of the themes' CSS files. ([#1070](https://github.com/elastic/eui/pull/1070))
 
 **Bug fixes**
 

package.json

@@ -79,6 +79,7 @@
     "chromedriver": "2.37.0",
     "circular-dependency-plugin": "^4.3.0",
     "css-loader": "^0.28.7",
+    "cssnano": "^4.0.5",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.3.0",

scripts/compile-scss.js

@@ -13,6 +13,14 @@ const writeFile = util.promisify(fs.writeFile);
 const mkdir = util.promisify(fs.mkdir);
 const glob = util.promisify(globModule);
 
+const postcssConfigurationWithMinification = {
+  ...postcssConfiguration,
+  plugins: [
+    ...postcssConfiguration.plugins,
+    require('cssnano')({ preset: 'default' })
+  ],
+};
+
 async function compileScssFiles(sourcePattern, destinationDirectory) {
   try {
     await mkdir(destinationDirectory);
@@ -49,6 +57,8 @@ async function compileScssFiles(sourcePattern, destinationDirectory) {
 }
 
 async function compileScssFile(inputFilename, outputCssFilename, outputVarsFilename) {
+  const outputCssMinifiedFilename = outputCssFilename.replace(/\.css$/, '.min.css');
+
   const { css: renderedCss, vars: extractedVars } = await sassExtract.render(
     {
       file: inputFilename,
@@ -64,8 +74,14 @@ async function compileScssFile(inputFilename, outputCssFilename, outputVarsFilen
     to: outputCssFilename,
   });
 
+  const { css: postprocessedMinifiedCss } = await postcss(postcssConfigurationWithMinification).process(renderedCss, {
+    from: outputCssFilename,
+    to: outputCssMinifiedFilename,
+  });
+
   await Promise.all([
     writeFile(outputCssFilename, postprocessedCss),
+    writeFile(outputCssMinifiedFilename, postprocessedMinifiedCss),
     writeFile(outputVarsFilename, JSON.stringify(extractedVars, undefined, 2)),
   ]);