test

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

@@ -0,0 +1,24 @@
+const prod = process.env.NODE_ENV === "production";
+
+it("should allow to create css modules", done => {
+	import("./use-style.js").then(({ default: x }) => {
+		try {
+			expect(x).toEqual({
+				global: undefined,
+				class: "./style.module.less-class",
+				local: "./style.module.less-local1 ./style.module.less-local2 ./style.module.less-local3 ./style.module.less-local4",
+				local2: "./style.module.less-local5 ./style.module.less-local6",
+				nested: "./style.module.less-nested1 undefined ./style.module.less-nested3",
+				ident: "./style.module.less-ident",
+				keyframes: "./style.module.less-localkeyframes",
+				animation: "./style.module.less-animation",
+				vars: "--./style.module.less-local-color ./style.module.less-vars undefined ./style.module.less-globalVars"
+			});
+			const style = getComputedStyle(document.body);
+			expect(style.getPropertyValue("color")).toBe(" green");
+		} catch (e) {
+			return done(e);
+		}
+		done();
+	}, done);
+});

test/configCases/css/css-modules-auto/style.module.less

@@ -0,0 +1,71 @@
+.class {
+	color: red;
+}
+
+.local1,
+.local2 :global .global,
+.local3 {
+	color: green;
+}
+
+:global .global :local .local4 {
+	color: yellow;
+}
+
+.local5:global(.global).local6 {
+	color: blue;
+}
+
+:global(:global(:local(.nested1)).nested2).nested3 {
+	color: pink;
+}
+
+#ident {
+	color: purple;
+}
+
+@keyframes localkeyframes {
+	0% {
+		left: var(--pos1x);
+		top: var(--pos1y);
+		color: var(--theme-color1);
+	}
+	100% {
+		left: var(--pos2x);
+		top: var(--pos2y);
+		color: var(--theme-color2);
+	}
+}
+
+@keyframes localkeyframes2 {
+	0% {
+		left: 0;
+	}
+	100% {
+		left: 100px;
+	}
+}
+
+.animation {
+	animation-name: localkeyframes;
+	animation: 3s ease-in 1s 2 reverse both paused localkeyframes, localkeyframes2;
+	--pos1x: 0px;
+	--pos1y: 0px;
+	--pos2x: 10px;
+	--pos2y: 20px;
+}
+
+/* .composed {
+	composes: local1;
+	composes: local2;
+} */
+
+.vars {
+	color: var(--local-color);
+	--local-color: red;
+}
+
+.globalVars :global {
+	color: var(--global-color);
+	--global-color: red;
+}

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

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

test/configCases/css/css-modules-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-modules-auto/use-style.js

@@ -0,0 +1,14 @@
+import * as style from "./style.module.css";
+import { local1, local2, local3, local4, ident } from "./style.module.css";
+
+export default {
+	global: style.global,
+	class: style.class,
+	local: `${local1} ${local2} ${local3} ${local4}`,
+	local2: `${style.local5} ${style.local6}`,
+	nested: `${style.nested1} ${style.nested2} ${style.nested3}`,
+	ident,
+	keyframes: style.localkeyframes,
+	animation: style.animation,
+	vars: `${style["local-color"]} ${style.vars} ${style["global-color"]} ${style.globalVars}`
+};

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

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