feat: auto enable icss modules

BREAKING CHANGE: Auto enable icss modules for all files for which /\.icss\.\w+$/i.test(filename)
webpack-contrib · Sep 22, 2020 · 2f1573f · 2f1573f
1 parent df111b8
commit 2f1573f
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 10 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -109,15 +109,21 @@ function getFilter(filter, resourcePath) {
   };
 }
 
-const moduleRegExp = /\.module\.\w+$/i;
+const moduleRegExp = /\.module(s)?\.\w+$/i;
+const icssRegExp = /\.icss\.\w+$/i;
 
 function getModulesOptions(rawOptions, loaderContext) {
   const { resourcePath } = loaderContext;
+  let isIcss;
 
   if (typeof rawOptions.modules === 'undefined') {
     const isModules = moduleRegExp.test(resourcePath);
 
     if (!isModules) {
+      isIcss = icssRegExp.test(resourcePath);
+    }
+
+    if (!isModules && !isIcss) {
       return false;
     }
   } else if (
@@ -128,7 +134,7 @@ function getModulesOptions(rawOptions, loaderContext) {
   }
 
   let modulesOptions = {
-    compileType: rawOptions.icss ? 'icss' : 'module',
+    compileType: isIcss ? 'icss' : 'module',
     auto: true,
     mode: 'local',
     exportGlobals: false,
@@ -205,14 +211,6 @@ function getModulesOptions(rawOptions, loaderContext) {
 }
 
 function normalizeOptions(rawOptions, loaderContext) {
-  if (rawOptions.icss) {
-    loaderContext.emitWarning(
-      new Error(
-        'The "icss" option is deprecated, use "modules.compileType: "icss"" instead'
-      )
-    );
-  }
-
   const modulesOptions = getModulesOptions(rawOptions, loaderContext);
 
   return {

diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap
@@ -12227,6 +12227,76 @@ Array [
 
 exports[`"modules" option should work with the "[local]" placeholder for the "localIdentName" option: warnings 1`] = `Array []`;
 
+exports[`"modules" option should work with the "auto" by default for icss: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" by default for icss: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\";
+import ___CSS_LOADER_ICSS_IMPORT_0___ from \\"-!../../../../../src/index.js??[ident]!./vars.icss.css\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_0___, \\"\\", true);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\".className {\\\\n  color: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"primary-color\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	\\"primary-color\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"primary-color\\"] + \\"\\"
+};
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"modules" option should work with the "auto" by default for icss: result 1`] = `
+Array [
+  Array [
+    "../../src/index.js?[ident]!./modules/mode/icss/vars.icss.css",
+    "
+",
+    "",
+  ],
+  Array [
+    "./modules/mode/icss/relative.icss.css",
+    ".className {
+  color: red;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"modules" option should work with the "auto" by default for icss: warnings 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" by default with "modules" filename: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" by default with "modules" filename: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\".af0LbFVUmIAO7cXelO_aA {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	\\"relative\\": \\"af0LbFVUmIAO7cXelO_aA\\"
+};
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"modules" option should work with the "auto" by default with "modules" filename: result 1`] = `
+Array [
+  Array [
+    "./modules/mode/relative.modules.css",
+    ".af0LbFVUmIAO7cXelO_aA {
+  color: red;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"modules" option should work with the "auto" by default with "modules" filename: warnings 1`] = `Array []`;
+
 exports[`"modules" option should work with the "auto" by default: errors 1`] = `Array []`;
 
 exports[`"modules" option should work with the "auto" by default: module 1`] = `

diff --git a/test/fixtures/modules/mode/icss/icss.js b/test/fixtures/modules/mode/icss/icss.js
@@ -0,0 +1,5 @@
+import relative from './relative.icss.css';
+
+__export__ = relative;
+
+export default relative;
diff --git a/test/fixtures/modules/mode/icss/relative.icss.css b/test/fixtures/modules/mode/icss/relative.icss.css
@@ -0,0 +1,11 @@
+:import("./vars.icss.css") {
+  IMPORTED_NAME: primary-color;
+}
+
+.className {
+  color: IMPORTED_NAME;
+}
+
+:export {
+  primary-color: IMPORTED_NAME
+}
diff --git a/test/fixtures/modules/mode/icss/vars.icss.css b/test/fixtures/modules/mode/icss/vars.icss.css
@@ -0,0 +1,3 @@
+:export {
+  primary-color: red;
+}
diff --git a/test/fixtures/modules/mode/modules-2.js b/test/fixtures/modules/mode/modules-2.js
@@ -0,0 +1,5 @@
+import relative from './relative.modules.css';
+
+__export__ = relative;
+
+export default relative;
diff --git a/test/fixtures/modules/mode/relative.modules.css b/test/fixtures/modules/mode/relative.modules.css
@@ -0,0 +1,3 @@
+.relative {
+  color: red;
+}
diff --git a/test/modules-option.test.js b/test/modules-option.test.js
@@ -737,6 +737,34 @@ describe('"modules" option', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
+  it('should work with the "auto" by default with "modules" filename', async () => {
+    const compiler = getCompiler('./modules/mode/modules-2.js');
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./modules/mode/relative.modules.css', stats)
+    ).toMatchSnapshot('module');
+    expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
+      'result'
+    );
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should work with the "auto" by default for icss', async () => {
+    const compiler = getCompiler('./modules/mode/icss/icss.js');
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./modules/mode/icss/relative.icss.css', stats)
+    ).toMatchSnapshot('module');
+    expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
+      'result'
+    );
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
   it('should work with the "auto" when it is "false"', async () => {
     const compiler = getCompiler('./modules/mode/modules.js', {
       modules: {