test/configCases/css/css-modules/at-rule-value.module.css - main - githubmirror/webpack

test/configCases/css/css-modules/at-rule-value.module.css
262 строки4 KB
Alexander Akait
feat(css): class wins the JS export on cross-kind conflicts in CSS modules (#21538)
29 июл 2026, 12:29
29 июл 2026, 12:29605cf7d
@value my-red blue;

.value-in-class {
	color: my-red;
}

@value v-comment-broken:;
@value v-comment-broken-v1:/* comment */;

@value small: (max-width: 599px);

@media small {
	abbr:hover {
		color: limegreen;
		transition-duration: 1s;
	}
}

@value blue-v1: red;

.foo { color: blue-v1; }

@value blue-v3: red;

.foo {
	&.bar { color: blue-v3; }
}

@value blue-v3: red;

.foo {
	@media (min-width: 1024px) {
		&.bar { color: blue-v3; }
	}
}

@value blue-v4: red;

.foo {
	@media (min-width: 1024px) {
		&.bar {
			@media (min-width: 1024px) {
				color: blue-v4;
			}
		}
	}
}

@value test-t: 40px;
@value test_q: 36px;

.foo { height: test-t; height: test_q; }

@value colorValue: red;

.colorValue-cls {
	color: colorValue;
}

@value colorValue-v1: red;

#colorValue-v1-id {
	color: colorValue-v1;
}

@value colorValue-v2: red;

.colorValue-v2-cls > .colorValue-v2-cls {
	color: colorValue-v2;
}

@value colorValue-v3: .red;

colorValue-v3 {
	color: colorValue-v3;
}

@value red-v2 from "./colors.module.css";

.export {
	color: red-v2;
}

@value blue-v1 as green from "./colors.module.css";

.foo { color: green; }

@value blue-i, green-v2 from "./colors.module.css";

.foo { color: blue-i; }
.bar { color: green-v2 }

@value colors: "./colors.module.css";
@value red-v4 from colors;

.foo { color: red-v4; }

@value aaa: red;
@value bbb: aaa;

.class-a { color: bbb; }

@value base: 10px;
@value large: calc(base * 2);

.class-a { margin: large; }

@value a from "./colors.module.css";
@value b from "./colors.module.css";

.class-a { content: a b; }

@value --red from "./colors.module.css";

.foo { color: --red; }

@value named: red;
@value _3char #0f0;
@value _6char #00ff00;
@value rgba rgba(34, 12, 64, 0.3);
@value hsla hsla(220, 13.0%, 18.0%, 1);

.foo {
	color: named;
	background-color: _3char;
	border-top-color: _6char;
	border-bottom-color: rgba;
	outline-color: hsla;
}

@value (blue-i, red-i) from "./colors.module.css";

.foo { color: red-i; }
.bar { color: blue-i }

@value coolShadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)   ;

.foo { box-shadow: coolShadow; }

@value func: color(red lightness(50%));

.foo { color: func; }

@value v-color: red;

:root { --color: v-color; }

@value v-empty: ;

:root { --color:v-empty; }

@value v-empty-v2:   ;

:root { --color:v-empty-v2; }

@value v-empty-v3: /* comment */;

:root { --color:v-empty-v3; }

@value override: blue;
@value override: red;

.override-cls {
	color: override;
}

@value (blue-v1 as my-name) from "./colors.module.css";
@value (blue-v1 as my-name-again, red-v1) from "./colors.module.css";

.class {
	color: my-name;
	color: my-name-again;
	color: red-v1;
}

@value/* test */blue-v5/* test */:/* test */red/* test */;

.color-cls {
	color: blue-v5;
}

@value/* test */blue-v6/* test *//* test */red/* test */;

.color-cls {
	color: blue-v6;
}

@value coolShadow-v2   :   0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)   ;

.foo { box-shadow: coolShadow-v2; }

@value   /* test */   coolShadow-v3   /* test */   :   0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)   ;

.foo { box-shadow: coolShadow-v3; }

@value   /* test */   coolShadow-v4   /* test */   0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)   ;

.foo { box-shadow: coolShadow-v4; }

@value/* test */coolShadow-v5/* test */0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14);

.foo { box-shadow: coolShadow-v5; }

@value/* test */coolShadow-v6/* test */:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14);

.foo { box-shadow: coolShadow-v6; }

@value/* test */coolShadow-v7/* test */:/* test */0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14);

.foo { box-shadow: coolShadow-v7; }

@value /* test */ test-v1 /* test */ from /* test */ "./colors.module.css" /* test */;

.foo { color: test-v1; }

@value/* test */test-v2/* test */from/* test */"./colors.module.css"/* test */;

.foo { color: test-v2; }

@value/* test */(/* test */blue-v1/* test */as/* test */my-name-q/* test */)/* test */from/* test */"./colors.module.css"/* test */;

.foo { color: my-name-q; }

@value/*
	multiline
	comment
*/multiline-v1/*
	multiline
	comment
*/:/*
	multiline
	comment
*/red/*
	multiline
	comment
*/;

.color-cls {
	color: multiline-v1;
}

@value /*
	multiline comment
*/ red-v3 /*
	multiline comment
*/ from /*
	multiline comment
*/ "./colors.module.css" /*
	multiline comment
*/;

.foo { color: red-v3; }

@value multiline-empty: /*
	multiline
	comment
*/;

:root { --color:multiline-empty; }

@value;
@value test;