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 };

yarn.lock

@@ -3995,6 +3995,13 @@
   resolved "https://registry.npmjs.org/@types/mime/-/mime-2.0.1.tgz#dc488842312a7f075149312905b5e3c0b054c79d"
   integrity sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw==
 
+"@types/mini-css-extract-plugin@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz#d4bdde5197326fca039d418f4bdda03dc74dc451"
+  integrity sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==
+  dependencies:
+    "@types/webpack" "*"
+
 "@types/minimatch@*", "@types/minimatch@3.0.3":
   version "3.0.3"
   resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -13718,6 +13725,16 @@ mini-css-extract-plugin@^0.7.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+mini-css-extract-plugin@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
+  integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
+  dependencies:
+    loader-utils "^1.1.0"
+    normalize-url "1.9.1"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"