Use cssnano to minify main CSS file (facebook#569)

* Add cssnano to CSS generation

* Add babel-polyfill

* Call cssnano at the end

* Fix tests

* Add babelrc

Author: yangshun

.babelrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "test": {
+      "presets": [
+        "env"
+      ]
+    }
+  }
+}

lib/__tests__/build-files.tests.js

@@ -1,3 +1,4 @@
+const cssnano = require('cssnano');
 const filepath = require('filepath');
 const fm = require('front-matter');
 const fs = require('fs-extra');
@@ -38,10 +39,12 @@ beforeAll(() => {
     glob(docsDir + '/assets/*'),
     glob(buildDir + '/' + siteConfig.projectName + '/img/*'),
   ]).then(function(results) {
-    inputMarkdownFiles = results[0];
-    outputHTMLFiles = results[1];
-    inputAssetsFiles = results[2];
-    outputAssetsFiles = results[3];
+    [
+      inputMarkdownFiles,
+      outputHTMLFiles,
+      inputAssetsFiles,
+      outputAssetsFiles,
+    ] = results;
     return;
   });
 });
@@ -85,11 +88,11 @@ test('Concatenated CSS files', function() {
       'utf8'
     ),
   ]).then(function(results) {
-    const inputFiles = results[0];
-    const outputFile = results[1];
-    inputFiles.forEach(function(file) {
+    const [inputFiles, outputFile] = results;
+    inputFiles.forEach(async function(file) {
       const contents = fs.readFileSync(file, 'utf8');
-      expect(outputFile).toContain(contents);
+      const {css} = await cssnano.process(contents, {}, {preset: 'default'});
+      expect(outputFile).toContain(css);
     });
   });
 });

lib/build-files.js

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+require('babel-polyfill');
 require('babel-register')({
   babelrc: false,
   only: [__dirname, process.cwd() + '/core'],

lib/server/generate.js

@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-function execute() {
+async function execute() {
   const extractTranslations = require('../write-translations.js');
 
   const CWD = process.cwd();
+  const cssnano = require('cssnano');
   const fs = require('fs-extra');
   const readMetadata = require('./readMetadata.js');
   const path = require('path');
@@ -371,7 +372,7 @@ function execute() {
     }
   });
 
-  // copy all static files from user
+  // Copy all static files from user.
   files = glob.sync(join(CWD, 'static', '**'), {dot: true});
   files.forEach(file => {
     // Why normalize? In case we are on Windows.
@@ -409,6 +410,18 @@ function execute() {
     }
   });
 
+  // Use cssnano to minify the final combined CSS.
+  const mainCss = join(buildDir, 'css', 'main.css');
+  const cssContent = fs.readFileSync(mainCss, 'utf8');
+  const {css} = await cssnano.process(
+    cssContent,
+    /* postcssOpts */ {},
+    /* cssnanoOpts */ {
+      preset: 'default',
+    }
+  );
+  fs.writeFileSync(mainCss, css);
+
   // compile/copy pages from user
   let pagesArr = [];
   files = glob.sync(join(CWD, 'pages', '**'));