feat: use css/auto as the default css mode

lib/config/defaults.js

@@ -15,7 +15,9 @@ const {
 	JAVASCRIPT_MODULE_TYPE_DYNAMIC,
 	WEBASSEMBLY_MODULE_TYPE_SYNC,
 	ASSET_MODULE_TYPE,
-	CSS_MODULE_TYPE
+	CSS_MODULE_TYPE_AUTO,
+	CSS_MODULE_TYPE,
+	CSS_MODULE_TYPE_MODULE
 } = require("../ModuleTypeConstants");
 const Template = require("../Template");
 const { cleverMerge } = require("../util/cleverMerge");
@@ -708,38 +710,24 @@ const applyModuleDefaults = (
 			});
 		}
 		if (css) {
-			const cssRule = {
-				type: CSS_MODULE_TYPE,
-				resolve: {
-					fullySpecified: true,
-					preferRelative: true
-				}
-			};
-			const cssModulesRule = {
-				type: "css/module",
-				resolve: {
-					fullySpecified: true
-				}
+			const resolve = {
+				fullySpecified: true,
+				preferRelative: true
 			};
 			rules.push({
 				test: /\.css$/i,
-				oneOf: [
-					{
-						test: /\.module\.css$/i,
-						...cssModulesRule
-					},
-					{
-						...cssRule
-					}
-				]
+				type: CSS_MODULE_TYPE_AUTO,
+				resolve
 			});
 			rules.push({
 				mimetype: "text/css+module",
-				...cssModulesRule
+				type: CSS_MODULE_TYPE_MODULE,
+				resolve
 			});
 			rules.push({
 				mimetype: "text/css",
-				...cssRule
+				type: CSS_MODULE_TYPE,
+				resolve
 			});
 		}
 		rules.push(

lib/css/CssParser.js

@@ -39,7 +39,7 @@ const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i;
 const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(-\w+-)?keyframes$/;
 const OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY =
 	/^(-\w+-)?animation(-name)?$/i;
-const IS_MODULES = /\.module(s)?\.\w+$/i;
+const IS_MODULES = /\.module(s)?\.[^.]+$/i;
 
 /**
  * @param {string} str url string
@@ -172,12 +172,18 @@ class CssParser extends Parser {
 		}
 
 		const module = state.module;
+
+		/** @type {string | undefined} */
+		let oldDefaultMode;
+
 		if (
 			module.type === CSS_MODULE_TYPE_AUTO &&
 			IS_MODULES.test(
 				parseResource(module.matchResource || module.resource).path
 			)
 		) {
+			oldDefaultMode = this.defaultMode;
+
 			this.defaultMode = "local";
 		}
 
@@ -1013,6 +1019,10 @@ class CssParser extends Parser {
 			}
 		});
 
+		if (oldDefaultMode) {
+			this.defaultMode = oldDefaultMode;
+		}
+
 		module.buildInfo.strict = true;
 		module.buildMeta.exportsType = "namespace";
 		module.addDependency(new StaticExportsDependency([], true));

test/Defaults.unittest.js

@@ -2208,6 +2208,8 @@ describe("snapshots", () => {
 			+     },
 			+     "futureDefaults": true,
 			@@ ... @@
+			+       },
+			+       Object {
 			+         "rules": Array [
 			+           Object {
 			+             "descriptionData": Object {
@@ -2230,34 +2232,24 @@ describe("snapshots", () => {
 			+             },
 			+             "resolve": Object {
 			+               "fullySpecified": true,
-			+             },
+			@@ ... @@
 			+           },
 			+         ],
 			+         "type": "webassembly/async",
 			+       },
-			+       Object {
-			+         "oneOf": Array [
-			+           Object {
-			+             "resolve": Object {
-			+               "fullySpecified": true,
-			+             },
-			+             "test": /\\.module\\.css$/i,
-			+             "type": "css/module",
-			+           },
-			+           Object {
-			+             "resolve": Object {
-			+               "fullySpecified": true,
-			+               "preferRelative": true,
-			+             },
-			+             "type": "css",
-			+           },
-			+         ],
+			@@ ... @@
+			+         "resolve": Object {
+			+           "fullySpecified": true,
+			+           "preferRelative": true,
+			+         },
 			+         "test": /\\.css$/i,
+			+         "type": "css/auto",
 			+       },
 			+       Object {
 			+         "mimetype": "text/css+module",
 			+         "resolve": Object {
 			+           "fullySpecified": true,
+			+           "preferRelative": true,
 			+         },
 			+         "type": "css/module",
 			+       },
@@ -2287,6 +2279,9 @@ describe("snapshots", () => {
 			+     "hashDigestLength": 16,
 			+     "hashFunction": "xxhash64",
 			@@ ... @@
+			+           "...",
+			+         ],
+			+       },
 			+       "css-import": Object {
 			+         "conditionNames": Array [
 			+           "webpack",
@@ -2298,10 +2293,8 @@ describe("snapshots", () => {
 			+         ],
 			+         "mainFields": Array [
 			+           "style",
-			+           "...",
-			+         ],
+			@@ ... @@
 			+         "mainFiles": Array [],
-			+       },
 			@@ ... @@
 			-       "<cwd>/node_modules/",
 			+       /^(.+?[\\\\/]node_modules[\\\\/])/,

test/configCases/css/conflicting-order/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
 		splitChunks: {
 			cacheGroups: {
 				css: {
-					type: "css",
+					type: "css/auto",
 					enforce: true,
 					name: "css"
 				}

test/configCases/css/css-modules-broken-keyframes/index.js

@@ -7,7 +7,7 @@ it("should allow to create css modules", done => {
 	import("./use-style.js").then(({ default: x }) => {
 		try {
 			expect(x).toEqual({
-				class: prod ? "my-app-491-S" : "./style.module.css-class",
+				class: prod ? "my-app-274-S" : "./style.module.css-class",
 			});
 		} catch (e) {
 			return done(e);

test/configCases/css/css-modules-in-node/index.js

@@ -5,96 +5,100 @@ it("should allow to create css modules", done => {
 		try {
 			expect(x).toEqual({
 				global: undefined,
-				class: prod ? "my-app-491-S" : "./style.module.css-class",
-				currentWmultiParams: prod ? "my-app-491-yK" : "./style.module.css-local12",
-				futureWmultiParams:  prod ? "my-app-491-Y4" : "./style.module.css-local14",
-				hasWmultiParams:  prod ? "my-app-491-PK" : "./style.module.css-local11",
-				matchesWmultiParams:  prod ? "my-app-491-$Y" : "./style.module.css-local9",
-				mozAnyWmultiParams:  prod ? "my-app-491-TT" : "./style.module.css-local15",
-				pastWmultiParams:  prod ? "my-app-491-P_" : "./style.module.css-local13",
-				webkitAnyWmultiParams:  prod ? "my-app-491-rT" : "./style.module.css-local16",
-				whereWmultiParams:  prod ? "my-app-491-ie" : "./style.module.css-local10",
+				class: prod ? "my-app-274-S" : "./style.module.css-class",
+				currentWmultiParams: prod ? "my-app-274-yK" : "./style.module.css-local12",
+				futureWmultiParams:  prod ? "my-app-274-Y4" : "./style.module.css-local14",
+				hasWmultiParams:  prod ? "my-app-274-PK" : "./style.module.css-local11",
+				matchesWmultiParams:  prod ? "my-app-274-$Y" : "./style.module.css-local9",
+				mozAnyWmultiParams:  prod ? "my-app-274-TT" : "./style.module.css-local15",
+				pastWmultiParams:  prod ? "my-app-274-P_" : "./style.module.css-local13",
+				webkitAnyWmultiParams:  prod ? "my-app-274-rT" : "./style.module.css-local16",
+				whereWmultiParams:  prod ? "my-app-274-ie" : "./style.module.css-local10",
 				local: prod
-					? "my-app-491-Zw my-app-491-yl my-app-491-J_ my-app-491-gc"
+					? "my-app-274-Zw my-app-274-yl my-app-274-J_ my-app-274-gc"
 					: "./style.module.css-local1 ./style.module.css-local2 ./style.module.css-local3 ./style.module.css-local4",
 				local2: prod
-					? "my-app-491-Xg my-app-491-AY"
+					? "my-app-274-Xg my-app-274-AY"
 					: "./style.module.css-local5 ./style.module.css-local6",
 				nested: prod
-					? "my-app-491-RX undefined my-app-491-X2"
+					? "my-app-274-RX undefined my-app-274-X2"
 					: "./style.module.css-nested1 undefined ./style.module.css-nested3",
 				notWmultiParams: prod
-					? "my-app-491-Kw"
+					? "my-app-274-Kw"
 					: "./style.module.css-local7",
 				isWmultiParams: prod
-					? "my-app-491-rw"
+					? "my-app-274-rw"
 					: "./style.module.css-local8",
-				ident: prod ? "my-app-491-yR" : "./style.module.css-ident",
-				keyframes: prod ? "my-app-491-y3" : "./style.module.css-localkeyframes",
-				animation: prod ? "my-app-491-oQ" : "./style.module.css-animation",
+				ident: prod ? "my-app-274-yR" : "./style.module.css-ident",
+				keyframes: prod ? "my-app-274-y3" : "./style.module.css-localkeyframes",
+				animation: prod ? "my-app-274-oQ" : "./style.module.css-animation",
 				vars: prod
-					? "--my-app-491-y4 my-app-491-gR undefined my-app-491-xk"
+					? "--my-app-274-y4 my-app-274-gR undefined my-app-274-xk"
 					: "--./style.module.css-local-color ./style.module.css-vars undefined ./style.module.css-globalVars",
 				media: prod
-					? "my-app-491-w7"
+					? "my-app-274-w7"
 					: "./style.module.css-wideScreenClass",
 				mediaWithOperator: prod
-					? "my-app-491-J"
+					? "my-app-274-J"
 					: "./style.module.css-narrowScreenClass",
 				supports: prod
-					? "my-app-491-T$"
+					? "my-app-274-T$"
 					: "./style.module.css-displayGridInSupports",
 				supportsWithOperator: prod
-					? "my-app-491-zz"
+					? "my-app-274-zz"
 					: "./style.module.css-floatRightInNegativeSupports",
 				mediaInSupports: prod
-					? "my-app-491-Kr"
+					? "my-app-274-Kr"
 					: "./style.module.css-displayFlexInMediaInSupports",
 				supportsInMedia: prod
-					? "my-app-491-SQ"
+					? "my-app-274-SQ"
 					: "./style.module.css-displayFlexInSupportsInMedia",
 				displayFlexInSupportsInMediaUpperCase: prod
-					? "my-app-491-XM"
+					? "my-app-274-XM"
 					: "./style.module.css-displayFlexInSupportsInMediaUpperCase",
 				keyframesUPPERCASE: prod
-					? "my-app-491-T4"
+					? "my-app-274-T4"
 					: "./style.module.css-localkeyframesUPPERCASE",
 				localkeyframes2UPPPERCASE: prod
-					? "my-app-491-Xi"
+					? "my-app-274-Xi"
 					: "./style.module.css-localkeyframes2UPPPERCASE",
 				VARS: prod
-					? "--my-app-491-DJ my-app-491-ms undefined my-app-491-cU"
+					? "--my-app-274-DJ my-app-274-ms undefined my-app-274-cU"
 					: "--./style.module.css-LOCAL-COLOR ./style.module.css-VARS undefined ./style.module.css-globalVarsUpperCase",
 				inSupportScope: prod
-					? "my-app-491-FO"
+					? "my-app-274-FO"
 					: "./style.module.css-inSupportScope",
 				animationName: prod
-					? "my-app-491-w3"
+					? "my-app-274-w3"
 					: "./style.module.css-animationName",
 				mozAnimationName: prod
-					? "my-app-491-t6"
+					? "my-app-274-t6"
 					: "./style.module.css-mozAnimationName",
 				myColor: prod
-					? "--my-app-491-lC"
+					? "--my-app-274-lC"
 					: "--./style.module.css-my-color",
 				paddingLg: prod
-					? "my-app-491-FP"
+					? "my-app-274-FP"
 					: "./style.module.css-padding-lg",
 				paddingSm: prod
-					? "my-app-491-zE"
+					? "my-app-274-zE"
 					: "./style.module.css-padding-sm",
 				classLocalScope: prod
-					? "my-app-491-gz"
+					? "my-app-274-gz"
 					: "./style.module.css-class-local-scope",
 				inLocalGlobalScope: prod
-					? "my-app-491-Zv"
+					? "my-app-274-Zv"
 					: "./style.module.css-in-local-global-scope",
 				classInContainer: prod
-					? "my-app-491-Gp"
+					? "my-app-274-Gp"
 					: "./style.module.css-class-in-container",
 				deepClassInContainer: prod
-					? "my-app-491-rn"
+					? "my-app-274-rn"
 					: "./style.module.css-deep-class-in-container",
+				cssModuleWithCustomFileExtension: prod
+					? "my-app-444-s"
+					: "./style.module.my-css-myCssClass",
+				notAValidCssModuleExtension: true
 			});
 		} catch (e) {
 			return done(e);
@@ -106,17 +110,17 @@ it("should allow to create css modules", done => {
 import * as style from "../css-modules/style.module.css";
 
 it("should allow to import css modules", () => {
-	expect(style.class).toBe(prod ? "my-app-491-S" : "./style.module.css-class");
+	expect(style.class).toBe(prod ? "my-app-274-S" : "./style.module.css-class");
 	expect(style.local1).toBe(
-		prod ? "my-app-491-Zw" : "./style.module.css-local1"
+		prod ? "my-app-274-Zw" : "./style.module.css-local1"
 	);
 	expect(style.local2).toBe(
-		prod ? "my-app-491-yl" : "./style.module.css-local2"
+		prod ? "my-app-274-yl" : "./style.module.css-local2"
 	);
 	expect(style.local3).toBe(
-		prod ? "my-app-491-J_" : "./style.module.css-local3"
+		prod ? "my-app-274-J_" : "./style.module.css-local3"
 	);
 	expect(style.local4).toBe(
-		prod ? "my-app-491-gc" : "./style.module.css-local4"
+		prod ? "my-app-274-gc" : "./style.module.css-local4"
 	);
 });