feat: css/auto

lib/ModuleTypeConstants.js

@@ -60,6 +60,12 @@ const CSS_MODULE_TYPE_GLOBAL = "css/global";
  */
 const CSS_MODULE_TYPE_MODULE = "css/module";
 
+/**
+ * @type {Readonly<"css/auto">}
+ * This is the module type used for CSS files, it is treated as CSS modules if the module's filename contains `.module`.
+ */
+const CSS_MODULE_TYPE_AUTO = "css/auto";
+
 /**
  * @type {Readonly<"asset">}
  * This is the module type used for automatically choosing between `asset/inline`, `asset/resource` based on asset size limit (8096).
@@ -152,6 +158,7 @@ exports.WEBASSEMBLY_MODULE_TYPE_SYNC = WEBASSEMBLY_MODULE_TYPE_SYNC;
 exports.CSS_MODULE_TYPE = CSS_MODULE_TYPE;
 exports.CSS_MODULE_TYPE_GLOBAL = CSS_MODULE_TYPE_GLOBAL;
 exports.CSS_MODULE_TYPE_MODULE = CSS_MODULE_TYPE_MODULE;
+exports.CSS_MODULE_TYPE_AUTO = CSS_MODULE_TYPE_AUTO;
 exports.WEBPACK_MODULE_TYPE_RUNTIME = WEBPACK_MODULE_TYPE_RUNTIME;
 exports.WEBPACK_MODULE_TYPE_FALLBACK = WEBPACK_MODULE_TYPE_FALLBACK;
 exports.WEBPACK_MODULE_TYPE_REMOTE = WEBPACK_MODULE_TYPE_REMOTE;

lib/css/CssModulesPlugin.js

@@ -11,7 +11,8 @@ const HotUpdateChunk = require("../HotUpdateChunk");
 const {
 	CSS_MODULE_TYPE,
 	CSS_MODULE_TYPE_GLOBAL,
-	CSS_MODULE_TYPE_MODULE
+	CSS_MODULE_TYPE_MODULE,
+	CSS_MODULE_TYPE_AUTO
 } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const SelfModuleFactory = require("../SelfModuleFactory");
@@ -149,7 +150,8 @@ class CssModulesPlugin {
 				for (const type of [
 					CSS_MODULE_TYPE,
 					CSS_MODULE_TYPE_GLOBAL,
-					CSS_MODULE_TYPE_MODULE
+					CSS_MODULE_TYPE_MODULE,
+					CSS_MODULE_TYPE_AUTO
 				]) {
 					normalModuleFactory.hooks.createParser
 						.for(type)
@@ -158,6 +160,7 @@ class CssModulesPlugin {
 
 							switch (type) {
 								case CSS_MODULE_TYPE:
+								case CSS_MODULE_TYPE_AUTO:
 									return new CssParser();
 								case CSS_MODULE_TYPE_GLOBAL:
 									return new CssParser({

lib/css/CssParser.js

@@ -6,6 +6,7 @@
 "use strict";
 
 const ModuleDependencyWarning = require("../ModuleDependencyWarning");
+const { CSS_MODULE_TYPE_AUTO } = require("../ModuleTypeConstants");
 const Parser = require("../Parser");
 const WebpackError = require("../WebpackError");
 const ConstDependency = require("../dependencies/ConstDependency");
@@ -37,6 +38,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;
 
 /**
  * @param {string} str url string
@@ -169,6 +171,13 @@ class CssParser extends Parser {
 		}
 
 		const module = state.module;
+		if (
+			module.type === CSS_MODULE_TYPE_AUTO &&
+			IS_MODULES.test(module.resourceResolveData.path)
+		) {
+			this.defaultMode = "local";
+		}
+
 		const locConverter = new LocConverter(source);
 		/** @type {Set<string>}*/
 		const declaredCssVariables = new Set();

schemas/plugins/css/CssGeneratorOptions.json

@@ -1,3 +1,3 @@
 {
-  "$ref": "../../WebpackOptions.json#/definitions/CssParserOptions"
+  "$ref": "../../WebpackOptions.json#/definitions/CssGeneratorOptions"
 }

schemas/plugins/css/CssParserOptions.json

@@ -1,3 +1,3 @@
 {
-  "$ref": "../../WebpackOptions.json#/definitions/CssGeneratorOptions"
+  "$ref": "../../WebpackOptions.json#/definitions/CssParserOptions"
 }

test/configCases/css/css-auto/global.less

@@ -0,0 +1,3 @@
+body {
+	color: green;
+}

test/configCases/css/css-auto/index.js

@@ -0,0 +1,11 @@
+import "./global.less";
+import * as style1 from "./style1.module.less";
+import * as style2 from "./style2.modules.less";
+
+it("should correct compile css/auto", done => {
+	const style = getComputedStyle(document.body);
+	expect(style.getPropertyValue("color")).toBe(" green");
+	console.log(style1, style2)
+	expect(style1.class).toBe("./style1.module.less-class");
+	expect(style2.class).toBe("./style2.modules.less-class");
+});

test/configCases/css/css-auto/style1.module.less

@@ -0,0 +1,3 @@
+.class {
+	color: red;
+}

test/configCases/css/css-auto/style2.modules.less

@@ -0,0 +1,3 @@
+.class {
+	color: blue;
+}

test/configCases/css/css-auto/test.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	moduleScope(scope) {
+		const link = scope.window.document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = "bundle0.css";
+		scope.window.document.head.appendChild(link);
+	}
+};

test/configCases/css/css-auto/webpack.config.js

@@ -0,0 +1,17 @@
+/** @type {import("../../../../types").Configuration} */
+module.exports = {
+	target: "web",
+	mode: "development",
+	experiments: {
+		css: true
+	},
+	module: {
+		rules: [
+			{
+				test: /\.less$/,
+				use: "less-loader",
+				type: "css/auto"
+			}
+		]
+	}
+};