Add autoprefixing to CSS pipeline (#867)

Add [autoprefixer](https://github.com/postcss/autoprefixer) as a final build step in the CSS pipeline.

lib/server/__tests__/__fixtures__/test.css

@@ -18,4 +18,7 @@
 }
 .hljs .comment {
   opacity: 0.7;
-}
+}
+::placeholder {
+  color: gray;
+}

lib/server/__tests__/__snapshots__/utils.test.js.snap

@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`server utils minify css 1`] = `".hljs{margin-left:-15px;margin-right:-15px;border:1px solid #eee;border-radius:6px;padding:15px;font-size:15px;max-width:50rem}.hljs.javascript{background-color:rgba(247,223,30,.03)}.hljs .comment{opacity:.7}"`;
+exports[`server utils autoprefix css 1`] = `
+"/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+.hljs {
+  margin-left: -15px;
+  margin-right: -15px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  padding: 15px;
+  font-size: 15px;
+  max-width: 50rem;
+}
+.hljs.javascript {
+  background-color: rgba(247, 223, 30, 0.03);
+}
+.hljs .comment {
+  opacity: 0.7;
+}
+::-webkit-input-placeholder {
+  color: gray;
+}
+:-ms-input-placeholder {
+  color: gray;
+}
+::-ms-input-placeholder {
+  color: gray;
+}
+::placeholder {
+  color: gray;
+}
+"
+`;
+
+exports[`server utils minify css 1`] = `".hljs{margin-left:-15px;margin-right:-15px;border:1px solid #eee;border-radius:6px;padding:15px;font-size:15px;max-width:50rem}.hljs.javascript{background-color:rgba(247,223,30,.03)}.hljs .comment{opacity:.7}::placeholder{color:gray}"`;
 
 exports[`server utils minify css 2`] = `[Error: Unexpected "space" found.]`;

lib/server/__tests__/utils.test.js

@@ -40,6 +40,15 @@ describe('server utils', () => {
     utils.minifyCss(notCss).catch(e => expect(e).toMatchSnapshot());
   });
 
+  test('autoprefix css', () => {
+    const testCss = fs.readFileSync(
+      path.join(__dirname, '__fixtures__', 'test.css'),
+      'utf8'
+    );
+
+    utils.autoPrefixCss(testCss).then(css => expect(css).toMatchSnapshot());
+  });
+
   test('getLanguage', () => {
     const testDocEnglish = path.join('translated_docs', 'en', 'test.md');
     const testDocJapanese = path.join('translated_docs', 'ja', 'test.md');

lib/server/generate.js

@@ -16,7 +16,7 @@ async function execute() {
   const readMetadata = require('./readMetadata.js');
   const path = require('path');
   const {getPath} = require('../core/utils.js');
-  const {minifyCss, isSeparateCss} = require('./utils');
+  const {minifyCss, isSeparateCss, autoPrefixCss} = require('./utils');
   const React = require('react');
   const mkdirp = require('mkdirp');
   const glob = require('glob');
@@ -336,9 +336,11 @@ async function execute() {
   });
 
   // Use cssnano to minify the final combined CSS.
+  // Use autoprefixer to add vendor prefixes
   const mainCss = join(buildDir, 'css', 'main.css');
   const cssContent = fs.readFileSync(mainCss, 'utf8');
-  const css = await minifyCss(cssContent);
+  const minifiedCSS = await minifyCss(cssContent);
+  const css = await autoPrefixCss(minifiedCSS);
   fs.writeFileSync(mainCss, css);
 
   // compile/copy pages from user

lib/server/utils.js

@@ -6,6 +6,8 @@
  */
 
 const cssnano = require('cssnano');
+const autoprefixer = require('autoprefixer');
+const postcss = require('postcss');
 const path = require('path');
 const escapeStringRegexp = require('escape-string-regexp');
 
@@ -54,9 +56,18 @@ function minifyCss(cssContent) {
     .then(result => result.css);
 }
 
+function autoPrefixCss(cssContent) {
+  return postcss([autoprefixer])
+    .process(cssContent, {
+      from: undefined,
+    })
+    .then(result => result.css);
+}
+
 module.exports = {
   getSubDir,
   getLanguage,
   isSeparateCss,
   minifyCss,
+  autoPrefixCss,
 };