diff --git a/lib/server/__tests__/__fixtures__/test.css b/lib/server/__tests__/__fixtures__/test.css index b950ec790c..d0fd55c22c 100644 --- a/lib/server/__tests__/__fixtures__/test.css +++ b/lib/server/__tests__/__fixtures__/test.css @@ -18,4 +18,7 @@ } .hljs .comment { opacity: 0.7; -} \ No newline at end of file +} +::placeholder { + color: gray; +} diff --git a/lib/server/__tests__/__snapshots__/utils.test.js.snap b/lib/server/__tests__/__snapshots__/utils.test.js.snap index 64cf15a187..a74d43712d 100644 --- a/lib/server/__tests__/__snapshots__/utils.test.js.snap +++ b/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.]`; diff --git a/lib/server/__tests__/utils.test.js b/lib/server/__tests__/utils.test.js index 42c7280cf6..78769fbf11 100644 --- a/lib/server/__tests__/utils.test.js +++ b/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'); diff --git a/lib/server/generate.js b/lib/server/generate.js index 06a7e8e8a2..1ea3feb918 100644 --- a/lib/server/generate.js +++ b/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 diff --git a/lib/server/utils.js b/lib/server/utils.js index acd5c13373..d93c71265b 100644 --- a/lib/server/utils.js +++ b/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, }; diff --git a/package.json b/package.json index 6741d6d1b0..eb683b5cde 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "docusaurus-feed": "./lib/generate-feed.js" }, "dependencies": { + "autoprefixer": "^9.0.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-polyfill": "^6.26.0", @@ -81,6 +82,7 @@ "imagemin-svgo": "^6.0.0", "markdown-toc": "^1.2.0", "mkdirp": "^0.5.1", + "postcss": "^7.0.1", "prismjs": "^1.15.0", "react": "^16.4.1", "react-dev-utils": "^5.0.1", diff --git a/yarn.lock b/yarn.lock index 031dd6d73f..a94efdef47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -412,6 +412,17 @@ autoprefixer@^6.3.1: postcss "^5.2.16" postcss-value-parser "^3.2.3" +autoprefixer@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.0.0.tgz#fce072cb3c9c61374bf6fb7d1906f630afdb2889" + dependencies: + browserslist "^4.0.1" + caniuse-lite "^1.0.30000865" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^7.0.0" + postcss-value-parser "^3.2.3" + aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" @@ -1189,6 +1200,14 @@ browserslist@^3.2.6: caniuse-lite "^1.0.30000844" electron-to-chromium "^1.3.47" +browserslist@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.0.1.tgz#61c05ce2a5843c7d96166408bc23d58b5416e818" + dependencies: + caniuse-lite "^1.0.30000865" + electron-to-chromium "^1.3.52" + node-releases "^1.0.0-alpha.10" + bser@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -1307,6 +1326,10 @@ caniuse-lite@^1.0.30000844: version "1.0.30000861" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000861.tgz#a32bb9607c34e4639b497ff37de746fc8a160410" +caniuse-lite@^1.0.30000865: + version "1.0.30000865" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz#70026616e8afe6e1442f8bb4e1092987d81a2f25" + capture-exit@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f" @@ -1347,7 +1370,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1: +chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e" dependencies: @@ -2090,6 +2113,10 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.47: version "1.3.50" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.50.tgz#7438b76f92b41b919f3fbdd350fbd0757dacddf7" +electron-to-chromium@^1.3.52: + version "1.3.52" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.52.tgz#d2d9f1270ba4a3b967b831c40ef71fb4d9ab5ce0" + elegant-spinner@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e" @@ -4819,6 +4846,12 @@ node-pre-gyp@^0.10.0: semver "^5.3.0" tar "^4" +node-releases@^1.0.0-alpha.10: + version "1.0.0-alpha.10" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.10.tgz#61c8d5f9b5b2e05d84eba941d05b6f5202f68a2a" + dependencies: + semver "^5.3.0" + node-status-codes@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f" @@ -5478,6 +5511,14 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0 source-map "^0.5.6" supports-color "^3.2.3" +postcss@^7.0.0, postcss@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.1.tgz#db20ca4fc90aa56809674eea75864148c66b67fa" + dependencies: + chalk "^2.4.1" + source-map "^0.6.1" + supports-color "^5.4.0" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -6264,7 +6305,7 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, sour version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" -source-map@~0.6.1: +source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" @@ -6501,7 +6542,7 @@ supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.4.0: version "5.4.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54" dependencies: