Merge pull request #419 from pdehaan/autoprefixer

Add autoprefixer and cssnano support

.gitignore

@@ -8,3 +8,4 @@ public/polyfill.min.js
 static/*
 !static/info.txt
 test/frontend/bundle.js
+public/main.css

.stylelintrc

@@ -1,6 +1,11 @@
 extends: stylelint-config-standard
 
+plugins:
+  - stylelint-no-unsupported-browser-features
+
 rules:
+  plugin/no-unsupported-browser-features: [true, {severity: warning}]
+
   color-hex-case: lower
   declaration-colon-newline-after: null
   selector-list-comma-newline-after: null

browserslist

@@ -0,0 +1,5 @@
+last 2 chrome versions
+last 2 firefox versions
+firefox esr
+ie >= 9
+safari >= 9

package.json

@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "asmcrypto.js": "0.0.11",
+    "autoprefixer": "^7.1.2",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.1.1",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -24,6 +25,8 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "browserify": "^14.4.0",
+    "css-mqpacker": "^6.0.1",
+    "cssnano": "^3.10.0",
     "eslint": "^4.3.0",
     "eslint-plugin-mocha": "^4.11.0",
     "eslint-plugin-node": "^5.1.1",
@@ -34,6 +37,7 @@
     "l20n": "^5.0.0",
     "mocha": "^3.4.2",
     "npm-run-all": "^4.0.2",
+    "postcss-cli": "^4.1.0",
     "prettier": "^1.5.3",
     "proxyquire": "^1.8.0",
     "raven-js": "^3.17.0",
@@ -41,6 +45,7 @@
     "sinon": "^2.3.8",
     "stylelint": "^8.0.0",
     "stylelint-config-standard": "^17.0.0",
+    "stylelint-no-unsupported-browser-features": "^1.0.0",
     "supertest": "^3.0.0",
     "testpilot-ga": "^0.3.0",
     "webcrypto-liner": "^0.1.25",
@@ -92,16 +97,17 @@
   ],
   "scripts": {
     "build": "npm-run-all build:*",
+    "build:css": "postcss 'frontend/src/*.css' -d public",
     "build:js": "webpack -p",
-    "build:version": "node scripts/version",
     "build:vendor": "cp node_modules/l20n/dist/web/l20n.min.js node_modules/babel-polyfill/dist/polyfill.min.js public",
+    "build:version": "node scripts/version",
     "contributors": "git shortlog -s | awk -F\\t '{print $2}' > CONTRIBUTORS",
     "dev": "npm run build && npm start",
-    "format": "prettier '{frontend/src/,scripts/,server/,test/**/!(bundle)}*.js' 'public/*.css' --single-quote --write",
+    "format": "prettier '{,frontend/src/,scripts/,server/,test/**/!(bundle)}*.{js,css}' --single-quote --write",
     "get-prod-locales": "node scripts/get-prod-locales",
     "get-prod-locales:write": "npm run get-prod-locales -- --write",
     "lint": "npm-run-all lint:*",
-    "lint:css": "stylelint 'public/*.css'",
+    "lint:css": "stylelint 'frontend/src/*.css'",
     "lint:js": "eslint .",
     "lint-locales": "node scripts/lint-locales",
     "lint-locales:dev": "npm run lint-locales",

postcss.config.js

@@ -0,0 +1,15 @@
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const mqpacker = require('css-mqpacker');
+
+const conf = require('./server/config');
+
+const options = {
+  plugins: [autoprefixer, mqpacker, cssnano]
+};
+
+if (conf.env === 'development') {
+  options.map = { inline: true };
+}
+
+module.exports = options;