fix: logic for CSS modules and named export

webpack-contrib · Sep 3, 2021 · f0c1f1b · f0c1f1b
1 parent e7ff8c6
commit f0c1f1b
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 13 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -544,6 +544,12 @@ function getModulesOptions(rawOptions, isExportStyleSheet, loaderContext) {
     ...rawModulesOptions,
   };
 
+  if (isExportStyleSheet && modulesOptions.namedExport === false) {
+    throw new Error(
+      'The "exportStyleSheet" option requires the "modules.namedExport" option to be enabled.'
+    );
+  }
+
   let exportLocalsConventionType;
 
   if (typeof modulesOptions.exportLocalsConvention === "string") {

diff --git a/test/__snapshots__/exportStyleSheet.test.js.snap b/test/__snapshots__/exportStyleSheet.test.js.snap
diff --git a/test/exportStyleSheet.test.js b/test/exportStyleSheet.test.js
@@ -110,7 +110,6 @@ describe("exportStylesheet option", () => {
         exportStyleSheet: true,
       },
       {
-        devtool: "source-map",
         target: "web",
         output: {
           path: path.resolve(__dirname, "./outputs"),
@@ -135,7 +134,6 @@ describe("exportStylesheet option", () => {
         modules: true,
       },
       {
-        devtool: "source-map",
         target: "web",
         output: {
           path: path.resolve(__dirname, "./outputs"),
@@ -154,6 +152,31 @@ describe("exportStylesheet option", () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  it("should work with CSS modules and the 'exportOnlyLocals' option", async () => {
+    const compiler = getCompiler(
+      "./modules/composes/composes-import-assertion-css.js",
+      {
+        exportStyleSheet: true,
+        modules: {
+          exportOnlyLocals: true,
+        },
+      },
+      {
+        target: "web",
+        output: {
+          path: path.resolve(__dirname, "./outputs"),
+          filename: "[name].bundle.js",
+          chunkFilename: "[name].chunk.js",
+          assetModuleFilename: "[name][ext]",
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
   it("should work and export CSSStyleSheet for import assertion and basic output", async () => {
     const compiler = getCompiler(
       "./basic-import-assertion-css-and-standard.js",
@@ -201,6 +224,31 @@ describe("exportStylesheet option", () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  // TODO https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2
+  it("should work with source maps", async () => {
+    const compiler = getCompiler(
+      "./basic-import-assertion-css.js",
+      {
+        exportStyleSheet: true,
+      },
+      {
+        devtool: "source-map",
+        target: "web",
+        output: {
+          path: path.resolve(__dirname, "./outputs"),
+          filename: "[name].bundle.js",
+          chunkFilename: "[name].chunk.js",
+          assetModuleFilename: "[name][ext]",
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getModuleSource("./basic.css", stats)).toMatchSnapshot("module");
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
   it('should work with "sass-loader"', async () => {
     const compiler = getCompiler(
       "./scss/import-assertion-css.js",
@@ -246,15 +294,16 @@ describe("exportStylesheet option", () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
-  // TODO https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2
-  it("should work with source maps", async () => {
+  it("should throw an error for CSS modules and disable named export", async () => {
     const compiler = getCompiler(
-      "./basic-import-assertion-css.js",
+      "./modules/composes/composes-import-assertion-css.js",
       {
         exportStyleSheet: true,
+        modules: {
+          namedExport: false,
+        },
       },
       {
-        devtool: "source-map",
         target: "web",
         output: {
           path: path.resolve(__dirname, "./outputs"),
@@ -266,7 +315,6 @@ describe("exportStylesheet option", () => {
     );
     const stats = await compile(compiler);
 
-    expect(getModuleSource("./basic.css", stats)).toMatchSnapshot("module");
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });