Merge pull request #1146 from simonihmig/mini-css-extract-for-fastboot

Use MiniCssExtractPlugin for FastBoot builds
embroider-build · Mar 3, 2022 · be9de27 · be9de27
2 parents cbe9159 + de5adcc
commit be9de27
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
@@ -37,7 +37,7 @@
     "fs-extra": "^9.1.0",
     "jsdom": "^16.6.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.6.0",
+    "mini-css-extract-plugin": "^2.5.3",
     "semver": "^7.3.5",
     "source-map-url": "^0.4.1",
     "style-loader": "^2.0.0",

diff --git a/packages/webpack/src/ember-webpack.ts b/packages/webpack/src/ember-webpack.ts
@@ -21,7 +21,7 @@ import {
   getOrCreate,
 } from '@embroider/core';
 import { tmpdir } from '@embroider/shared-internals';
-import webpack, { Configuration } from 'webpack';
+import webpack, { Configuration, RuleSetUseItem, WebpackPluginInstance } from 'webpack';
 import { readFileSync, outputFileSync, copySync, realpathSync, Stats, statSync, readJsonSync } from 'fs-extra';
 import { join, dirname, relative, sep } from 'path';
 import isEqual from 'lodash/isEqual';
@@ -144,20 +144,16 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
       variant,
     };
 
+    let { plugins: stylePlugins, loaders: styleLoaders } = this.setupStyleConfig(variant);
+
     return {
       mode: variant.optimizeForProduction ? 'production' : 'development',
       context: this.pathToVanillaApp,
       entry,
       performance: {
         hints: false,
       },
-      plugins: [
-        //@ts-ignore
-        new MiniCssExtractPlugin({
-          filename: `chunk.[chunkhash].css`,
-          chunkFilename: `chunk.[chunkhash].css`,
-        }),
-      ],
+      plugins: stylePlugins,
       node: false,
       module: {
         rules: [
@@ -186,7 +182,7 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
           },
           {
             test: isCSS,
-            use: this.makeCSSRule(variant),
+            use: styleLoaders,
           },
         ],
       },
@@ -483,21 +479,42 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
     });
   }
 
-  private makeCSSRule(variant: Variant) {
-    return [
-      variant.optimizeForProduction
-        ? MiniCssExtractPlugin.loader
-        : { loader: 'style-loader', options: { injectType: 'styleTag', ...this.extraStyleLoaderOptions } },
-      {
-        loader: 'css-loader',
-        options: {
-          url: true,
-          import: true,
-          modules: 'global',
-          ...this.extraCssLoaderOptions,
-        },
+  private setupStyleConfig(variant: Variant): {
+    loaders: RuleSetUseItem[];
+    plugins: WebpackPluginInstance[];
+  } {
+    let cssLoader = {
+      loader: 'css-loader',
+      options: {
+        url: true,
+        import: true,
+        modules: 'global',
+        ...this.extraCssLoaderOptions,
       },
-    ];
+    };
+
+    if (!variant.optimizeForProduction && variant.runtime === 'browser') {
+      // in development builds that only need to work in the browser (not
+      // fastboot), we can use style-loader because it's fast
+      return {
+        loaders: [
+          { loader: 'style-loader', options: { injectType: 'styleTag', ...this.extraStyleLoaderOptions } },
+          cssLoader,
+        ],
+        plugins: [],
+      };
+    } else {
+      // in any other build, we separate the CSS into its own bundles
+      return {
+        loaders: [MiniCssExtractPlugin.loader, cssLoader],
+        plugins: [
+          new MiniCssExtractPlugin({
+            filename: `chunk.[chunkhash].css`,
+            chunkFilename: `chunk.[chunkhash].css`,
+          }),
+        ],
+      };
+    }
   }
 
   private findBestError(errors: any[]) {

diff --git a/yarn.lock b/yarn.lock
@@ -13377,16 +13377,7 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
-mini-css-extract-plugin@^1.6.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8"
-  integrity sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    webpack-sources "^1.1.0"
-
-mini-css-extract-plugin@^2.5.2:
+mini-css-extract-plugin@^2.5.2, mini-css-extract-plugin@^2.5.3:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz#c5c79f9b22ce9b4f164e9492267358dbe35376d9"
   integrity sha512-YseMB8cs8U/KCaAGQoqYmfUuhhGW0a9p9XvWXrxVOkE3/IiISTLw4ALNt7JR5B2eYauFM+PQGSbXMDmVbR7Tfw==
@@ -17729,7 +17720,7 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==