Merge pull request #1055 from dfreeman/customize-css-and-style-loader-config

Accept custom `css-loader` and `style-loader` config in `@embroider/webpack`

Author: ef4

packages/webpack/src/ember-webpack.ts

@@ -76,6 +76,8 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
   private publicAssetURL: string | undefined;
   private extraThreadLoaderOptions: object | false | undefined;
   private extraBabelLoaderOptions: BabelLoaderOptions | undefined;
+  private extraCssLoaderOptions: object | undefined;
+  private extraStyleLoaderOptions: object | undefined;
 
   constructor(
     pathToVanillaApp: string,
@@ -93,6 +95,8 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
     this.publicAssetURL = options?.publicAssetURL;
     this.extraThreadLoaderOptions = options?.threadLoaderOptions;
     this.extraBabelLoaderOptions = options?.babelLoaderOptions;
+    this.extraCssLoaderOptions = options?.cssLoaderOptions;
+    this.extraStyleLoaderOptions = options?.styleLoaderOptions;
     warmUp(this.extraThreadLoaderOptions);
   }
 
@@ -484,13 +488,14 @@ const Webpack: PackagerConstructor<Options> = class Webpack implements Packager
     return [
       variant.optimizeForProduction
         ? MiniCssExtractPlugin.loader
-        : { loader: 'style-loader', options: { injectType: 'styleTag' } },
+        : { loader: 'style-loader', options: { injectType: 'styleTag', ...this.extraStyleLoaderOptions } },
       {
         loader: 'css-loader',
         options: {
           url: true,
           import: true,
           modules: 'global',
+          ...this.extraCssLoaderOptions,
         },
       },
     ];

packages/webpack/src/options.ts

@@ -30,4 +30,17 @@ export interface Options {
   threadLoaderOptions?: object | false;
 
   babelLoaderOptions?: BabelLoaderOptions;
+
+  /**
+   * Options for [`css-loader`](https://webpack.js.org/loaders/css-loader)
+   */
+  cssLoaderOptions?: object;
+
+  /**
+   * Options for [`style-loader`](https://webpack.js.org/loaders/style-loader/).
+   *
+   * Note that [`mini-css-extract-plugin`](https://webpack.js.org/plugins/mini-css-extract-plugin/)
+   * is used instead of `style-loader` in production builds.
+   */
+  styleLoaderOptions?: object;
 }