chore: post processing css in webapp

packages/rax-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-cli",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "BSD-3-Clause",
   "description": "Command line interface for Rax",
   "main": "src/index.js",

packages/rax-cli/src/generator/miniapp/package.json

@@ -11,7 +11,7 @@
     "rax": "^1.0.0"
   },
   "devDependencies": {
-    "rax-scripts": "^1.1.0",
+    "rax-scripts": "^1.2.0",
     "eslint": "^5.15.1",
     "babel-eslint": "^10.0.1"
   }

packages/rax-cli/src/generator/webapp/README.md

@@ -17,3 +17,8 @@ You will see the lint errors in the console.
 ### `npm run build`
 
 Builds the app for production to the `build` folder.
+
+
+## Post-Processing CSS
+
+You can customize your target support browsers by adjusting the `browserslist` key in `package.json` according to the [Browserslist specification](https://github.com/browserslist/browserslist#readme).

packages/rax-cli/src/generator/webapp/package.json

@@ -2,6 +2,10 @@
   "name": "__YourProjectName__",
   "author": "__AuthorName__",
   "version": "0.0.0",
+  "browserslist": [
+    "last 1 version",
+    "> 1%"
+  ],
   "scripts": {
     "start": "rax-scripts start",
     "build": "rax-scripts build",
@@ -12,7 +16,7 @@
     "driver-dom": "^1.0.0"
   },
   "devDependencies": {
-    "rax-scripts": "^1.1.0",
+    "rax-scripts": "^1.2.0",
     "eslint": "^5.15.1",
     "babel-eslint": "^10.0.1",
     "eslint-plugin-react": "^7.12.4"

packages/rax-cli/src/generator/weexapp/package.json

@@ -12,7 +12,7 @@
     "driver-weex": "^1.0.0"
   },
   "devDependencies": {
-    "rax-scripts": "^1.1.0",
+    "rax-scripts": "^1.2.0",
     "eslint": "^5.15.1",
     "babel-eslint": "^10.0.1",
     "eslint-plugin-react": "^7.12.4"

packages/rax-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-scripts",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "BSD-3-Clause",
   "description": "Project scripts for Rax.",
   "bin": {
@@ -44,18 +44,21 @@
     "commander": "^2.19.0",
     "copy-webpack-plugin": "^4.6.0",
     "cross-spawn": "^6.0.5",
-    "css-loader": "^2.1.0",
+    "css-loader": "^2.1.1",
     "decamelize": "^2.0.0",
     "file-loader": "^2.0.0",
     "glob": "^7.1.3",
     "html-webpack-plugin": "^3.2.0",
     "image-source-loader": "^0.6.5",
     "internal-ip": "^3.0.1",
     "loader-utils": "^1.1.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "minimatch": "^3.0.4",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "path-exists": "^3.0.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.6.0",
     "rax-hot-loader": "^0.6.5",
     "rax-hot-module-replacement-webpack-plugin": "^0.6.5",
     "rax-webpack-plugin": "^0.6.5",

packages/rax-scripts/src/config/webapp/webpack.config.base.js

@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpackConfig = require('../webpack.config');
 const pathConfig = require('../path.config');
 const babelConfig = require('../babel.config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 babelConfig.presets.push([
   require.resolve('@babel/preset-react'), {
@@ -13,10 +14,6 @@ babelConfig.presets.push([
   }
 ]);
 
-babelConfig.plugins.push(
-  require.resolve('babel-plugin-transform-jsx-stylesheet')
-);
-
 module.exports = {
   mode: webpackConfig.mode,
   context: webpackConfig.context,
@@ -32,6 +29,10 @@ module.exports = {
       inject: true,
       template: pathConfig.appHtml,
     }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[id].css',
+    }),
     webpackConfig.plugins.define,
     webpackConfig.plugins.caseSensitivePaths,
     process.env.ANALYZER ? new BundleAnalyzerPlugin() : null,
@@ -61,9 +62,26 @@ module.exports = {
         test: /\.css$/,
         use: [
           {
-            loader: require.resolve('stylesheet-loader'),
+            loader: MiniCssExtractPlugin.loader,
           },
-        ],
+          {
+            loader: require.resolve('css-loader'),
+          },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              ident: 'postcss',
+              plugins: () => [
+                require('postcss-preset-env')({
+                  autoprefixer: {
+                    flexbox: 'no-2009',
+                  },
+                  stage: 3,
+                }),
+              ],
+            }
+          },
+        ]
       },
       // load inline images using image-source-loader for Image
       {

packages/rax-scripts/src/config/webapp/webpack.config.prod.js

@@ -4,6 +4,7 @@ const pathConfig = require('../path.config');
 const webpackMerge = require('webpack-merge');
 const webpackConfigBase = require('./webpack.config.base');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 const webpackConfigProd = webpackMerge(webpackConfigBase, {
   target: 'node',
@@ -13,11 +14,17 @@ const webpackConfigProd = webpackMerge(webpackConfigBase, {
   },
   optimization: {
     minimize: true,
-    minimizer: [new UglifyJSPlugin({
-      include: /\.min\.js$/,
-      cache: true,
-      sourceMap: true,
-    })]
+    minimizer: [
+      new UglifyJSPlugin({
+        include: /\.min\.js$/,
+        cache: true,
+        sourceMap: true,
+      }),
+      new OptimizeCSSAssetsPlugin({
+        // A boolean indicating if the plugin can print messages to the console
+        canPrint: true
+      })
+    ]
   },
 });