feat: add CSS autoprefixing support based on build env (#2)

packages/web-client/package.json

@@ -24,6 +24,8 @@
     "eslint-plugin-react": "7.9.1",
     "extract-css-chunks-webpack-plugin": "3.0.11",
     "jest": "23.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-preset-env": "5.3.0",
     "react-hot-loader": "4.3.3",
     "stats-webpack-plugin": "0.6.2",
     "uglifyjs-webpack-plugin": "1.2.7",

packages/web-client/resources/build/browserslist/index.js

@@ -0,0 +1,39 @@
+const DEVELOPMENT = ['Chrome >= 67'];
+
+const PRODUCTION = [
+  'last 2 versions',
+  'last 4 years',
+  'Chrome >= 54',
+  'ChromeAndroid >= 54',
+  'IE >= 11',
+  'Edge >= 15',
+  'Firefox >= 51',
+  'iOS >= 9',
+  'Safari >= 10',
+];
+
+const NONE = [];
+
+/**
+ * @param {Object} options
+ * @param {String} options.mode
+ */
+function getBrowserslist(options) {
+  switch (options.mode) {
+    case 'development': {
+      return DEVELOPMENT;
+    }
+
+    case 'production': {
+      return PRODUCTION;
+    }
+
+    default: {
+      return NONE;
+    }
+  }
+}
+
+module.exports = {
+  getBrowserslist,
+};

packages/web-client/resources/build/webpack/app.config.js

@@ -8,6 +8,7 @@ const defaults = require('shared/src/features/env/defaults');
 const { createSubenv } = require('shared/src/features/env/sub');
 
 const { getClientBabelConfig } = require('../babel/client');
+const { getBrowserslist } = require('../browserslist');
 const merge = require('./utils/merge');
 
 const context = path.join(__dirname, '../../../'),
@@ -27,6 +28,44 @@ function getEntry() {
   return ['./src/index.js'];
 }
 
+function getPostCssLoader() {
+  const defaultOptions = {
+    config: {
+      path: path.join(context, 'resources/build/postcss'),
+    },
+    plugins: [],
+  };
+
+  if (__DEV__) {
+    return {
+      loader: 'postcss-loader',
+      options: {
+        ...defaultOptions,
+        plugins: [
+          ...defaultOptions.plugins,
+          require('postcss-preset-env')({
+            browsers: getBrowserslist({ mode: 'development' }),
+          }),
+        ],
+        sourceMap: true,
+      },
+    };
+  }
+
+  return {
+    loader: 'postcss-loader',
+    options: {
+      ...defaultOptions,
+      plugins: [
+        ...defaultOptions.plugins,
+        require('postcss-preset-env')({
+          browsers: getBrowserslist({ mode: 'production' }),
+        }),
+      ],
+    },
+  };
+}
+
 function getWebpackStatsPath() {
   let statsPath = subenv(process.env.WEBPACK_CLIENT_STATS_PATH);
 
@@ -110,9 +149,11 @@ if (__DEV__) {
             {
               loader: 'css-loader',
               options: {
+                importLoaders: 1,
                 sourceMap: true,
               },
             },
+            getPostCssLoader(),
           ],
         },
       ],
@@ -152,7 +193,14 @@ if (__DEV__) {
         {
           test: /\.css$/,
           exclude: /node_modules/,
-          use: [ExtractCssChunksWebpackPlugin.loader, { loader: 'css-loader' }],
+          use: [
+            ExtractCssChunksWebpackPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: { importLoaders: 1 },
+            },
+            getPostCssLoader(),
+          ],
         },
       ],
     },