packages/cli: extract css in bundle prod builds

packages/cli/package.json

@@ -54,6 +54,7 @@
     "jest": "^25.1.0",
     "jest-css-modules": "^2.1.0",
     "jest-esm-transformer": "^1.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "ora": "^4.0.3",
     "raw-loader": "^4.0.1",
     "react": "^16.0.0",
@@ -81,6 +82,7 @@
     "@types/fs-extra": "^8.1.0",
     "@types/html-webpack-plugin": "^3.2.2",
     "@types/inquirer": "^6.5.0",
+    "@types/mini-css-extract-plugin": "^0.9.1",
     "@types/node": "^13.7.2",
     "@types/ora": "^3.2.0",
     "@types/react-dev-utils": "^9.0.4",

packages/cli/src/lib/bundle/transforms.ts

@@ -16,6 +16,7 @@
 
 import webpack, { Module, Plugin } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { BundlingOptions } from './types';
 import { BundlingPaths } from './paths';
 
@@ -65,7 +66,25 @@ export const transforms = (
     },
     {
       test: /\.css$/i,
-      use: [require.resolve('style-loader'), require.resolve('css-loader')],
+      use: [
+        isDev
+          ? {
+              loader: require.resolve('style-loader'),
+              options: {
+                attrs: { origin: 'main' },
+              },
+            }
+          : {
+              loader: MiniCssExtractPlugin.loader,
+            },
+
+        {
+          loader: require.resolve('css-loader'),
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
     },
   ];
 
@@ -79,6 +98,13 @@ export const transforms = (
 
   if (isDev) {
     plugins.push(new webpack.HotModuleReplacementPlugin());
+  } else {
+    plugins.push(
+      new MiniCssExtractPlugin({
+        filename: '[name].[contenthash:8].css',
+        chunkFilename: '[name].[id].[contenthash:8].css',
+      }),
+    );
   }
 
   return { loaders, plugins };