test/configCases/css/css-modules/style.module.css - main - githubmirror/webpack

test/configCases/css/css-modules/style.module.css
2 099 строк35 KB
Alexander Akait
feat(css): scope counter names in CSS modules (#21600)
04 авг 2026, 15:36
04 авг 2026, 15:36d6fbda7
@import "at-rule-value.module.css";
@import "var-function.module.css";

.class {
	color: red;
}

.local1,
.local2 :global .global,
.local3 {
	color: green;
}

:global .global :local .local4 {
	color: yellow;
}

.local5:global(.global).local6 {
	color: blue;
}

.local7 div:not(.disabled, .mButtonDisabled, .tipOnly) {
    pointer-events: initial !important;
}

.local8 :is(div.parent1.child1.vertical-tiny,
    div.parent1.child1.vertical-small,
    div.otherDiv.horizontal-tiny,
    div.otherDiv.horizontal-small div.description) {
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

.local9 :matches(div.parent1.child1.vertical-tiny,
    div.parent1.child1.vertical-small,
    div.otherDiv.horizontal-tiny,
    div.otherDiv.horizontal-small div.description) {
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

.local10 :where(div.parent1.child1.vertical-tiny,
    div.parent1.child1.vertical-small,
    div.otherDiv.horizontal-tiny,
    div.otherDiv.horizontal-small div.description) {
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

.local11 div:has(.disabled, .mButtonDisabled, .tipOnly) {
    pointer-events: initial !important;
}

.local12 div:current(p, span) {
	background-color: yellow;
}

.local13 div:past(p, span) {
	display: none;
}

.local14 div:future(p, span) {
	background-color: yellow;
}

.local15 div:-moz-any(ol, ul, menu, dir) {
	list-style-type: square;
}

.local16 li:-webkit-any(:first-child, :last-child) {
	background-color: aquamarine;
}

.local9 :matches(div.parent1.child1.vertical-tiny,
    div.parent1.child1.vertical-small,
    div.otherDiv.horizontal-tiny,
    div.otherDiv.horizontal-small div.description) {
	max-height: 0;
	margin: 0;
	overflow: hidden;
}

: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;
}

.vars {
	color: var(--local-color);
	--local-color: red;
}

.globalVars :global {
	color: var(--global-color);
	--global-color: red;
}

@media (min-width: 1600px) {
	.wideScreenClass {
		color: var(--local-color);
		--local-color: green;
	}
}

@media screen and (max-width: 600px) {
	.narrowScreenClass {
		color: var(--local-color);
		--local-color: purple;
	}
}

@supports (display: grid) {
	.displayGridInSupports {
		display: grid;
	}
}

@supports not (display: grid) {
  .floatRightInNegativeSupports {
    float: right;
  }
}

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    .displayFlexInMediaInSupports {
      display: flex;
    }
  }
}

@media screen and (min-width: 900px) {
	@supports (display: flex) {
    .displayFlexInSupportsInMedia {
      display: flex;
    }
  }
}

@MEDIA screen and (min-width: 900px) {
	@SUPPORTS (display: flex) {
		.displayFlexInSupportsInMediaUpperCase {
			display: flex;
		}
	}
}

.animationUpperCase {
	ANIMATION-NAME: localkeyframesUPPERCASE;
	ANIMATION: 3s ease-in 1s 2 reverse both paused localkeyframesUPPERCASE, localkeyframes2UPPPERCASE;
	--pos1x: 0px;
	--pos1y: 0px;
	--pos2x: 10px;
	--pos2y: 20px;
}

@KEYFRAMES localkeyframesUPPERCASE {
	0% {
		left: VAR(--pos1x);
		top: VAR(--pos1y);
		color: VAR(--theme-color1);
	}
	100% {
		left: VAR(--pos2x);
		top: VAR(--pos2y);
		color: VAR(--theme-color2);
	}
}

@KEYframes localkeyframes2UPPPERCASE {
	0% {
		left: 0;
	}
	100% {
		left: 100px;
	}
}

:GLOBAL .globalUpperCase :LOCAL .localUpperCase {
	color: yellow;
}

.VARS {
	color: VAR(--LOCAL-COLOR);
	--LOCAL-COLOR: red;
}

.globalVarsUpperCase :GLOBAL {
	COLOR: VAR(--GLOBAR-COLOR);
	--GLOBAR-COLOR: red;
}

@supports (top: env(safe-area-inset-top, 0)) {
	.inSupportScope {
		color: red;
	}
}

.a {
	animation: 3s animationName;
	-webkit-animation: 3s animationName;
}

.b {
	animation: animationName 3s;
	-webkit-animation: animationName 3s;
}

.c {
	animation-name: animationName;
	-webkit-animation-name: animationName;
}

.animationTimeline {
	animation: 3s auto animationName;
}

.d {
	--animation-name: animationName;
}

@keyframes animationName {
	0% {
		background: white;
	}
	100% {
		background: red;
	}
}

@-webkit-keyframes animationName {
	0% {
		background: white;
	}
	100% {
		background: red;
	}
}

@-moz-keyframes mozAnimationName {
	0% {
		background: white;
	}
	100% {
		background: red;
	}
}

@counter-style thumbs {
	system: cyclic;
	symbols: "\1F44D";
	suffix: " ";
}

@font-feature-values Font One {
	@styleset {
		nice-style: 12;
	}
}

/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
	@styleset {
		nice-style: 4;
	}
}

@property --my-color {
	syntax: "<color>";
	inherits: false;
	initial-value: #c0ffee;
}

@property --my-color-1 {
	initial-value: #c0ffee;
	syntax: "<color>";
	inherits: false;
}

@property --my-color-2 {
	syntax: "<color>";
	initial-value: #c0ffee;
	inherits: false;
}

.class {
	color: var(--my-color);
}

@layer utilities {
	.padding-sm {
		padding: 0.5rem;
	}

	.padding-lg {
		padding: 0.8rem;
	}
}

.class {
	color: red;

	.nested-pure {
		color: red;
	}

	@media screen and (min-width: 200px) {
		color: blue;

		.nested-media {
			color: blue;
		}
	}

	@supports (display: flex) {
		display: flex;

		.nested-supports {
			display: flex;
		}
	}

	@layer foo {
		background: red;

		.nested-layer {
			background: red;
		}
	}

	@container foo-c {
		background: red;

		.nested-layer {
			background: red;
		}
	}
}

.not-selector-inside {
	color: #fff;
	opacity: 0.12;
	padding: .5px;
	unknown: :local(.test);
	unknown2: :global(.test);
	unknown3: local(.test);
	unknown4: global(.test);
	/* No one support it */
	unknown5: :local .test;
	unknown6: :global .test;
	unknown7: .foo, .bar, #bar;
}

@unknown local(.local) global(.global) {
	color: red;
}

@unknown :local(.local) :global(.global) {
	color: red;
}

.nested-var {
	.again {
		color: var(--local-color);
	}
}

.nested-with-local-pseudo {
	color: red;

	:local .local-nested {
		color: red;
	}

	:global .global-nested {
		color: red;
	}

	:local(.local-nested) {
		color: red;
	}

	:global(.global-nested) {
		color: red;
	}

	:local .local-nested, :global .global-nested-next {
		color: red;
	}

	:local(.local-nested), :global(.global-nested-next) {
		color: red;
	}

	:global .foo, .bar {
		color: red;
	}
}

#id-foo {
	color: red;

	#id-bar {
		color: red;
	}
}

.nested-parens {
	.local9 div:has(.vertical-tiny, .vertical-small) {
		max-height: 0;
		margin: 0;
		overflow: hidden;
	}
}

:global .global-foo {
	.nested-global {
		color: red;
	}

	:local .local-in-global {
		color: blue;
	}
}

@unknown .class {
	color: red;

	.class {
		color: red;
	}
}

:global .class :local .in-local-global-scope,
:global .class :local .in-local-global-scope,
:local .class-local-scope :global .in-local-global-scope {
	color: red;
}

@container (width > 400px) {
	.class-in-container {
		font-size: 1.5em;
	}
}

@container summary (min-width: 400px) {
	@container (width > 400px) {
		.deep-class-in-container {
			font-size: 1.5em;
		}
	}
}

:scope {
	color: red;
}

.placeholder-gray-700:-ms-input-placeholder {
	--placeholder-opacity: 1;
	color: #4a5568;
	color: rgba(74, 85, 104, var(--placeholder-opacity));
}
.placeholder-gray-700::-ms-input-placeholder {
	--placeholder-opacity: 1;
	color: #4a5568;
	color: rgba(74, 85, 104, var(--placeholder-opacity));
}
.placeholder-gray-700::placeholder {
	--placeholder-opacity: 1;
	color: #4a5568;
	color: rgba(74, 85, 104, var(--placeholder-opacity));
}

:root {
	--test-prop: dark;
}

@media screen and (prefers-color-scheme: var(--test-prop)) {
	.baz {
		color: white;
	}
}

@keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%;
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

.class {
	animation:
		foo var(--animation-name) 3s,
		var(--animation-name) 3s,
		3s linear 1s infinite running slidein,
		3s linear env(foo, var(--baz-prop)) infinite running slidein;
}

:root {
	--baz-prop: 10px;
}

.class {
	bar: env(foo, var(--baz-prop));
}

:global      .global-foo, :local        .bar {
	:local      .local-in-global       {
		color: blue;
	}

	@media screen {
		:global .my-global-class-again,
		:local .my-global-class-again {
			color: red;
		}
	}
}

.first-nested {
	.first-nested-nested {
		color: red;
	}
}

.first-nested-at-rule {
	@media screen {
		.first-nested-nested-at-rule-deep {
			color: red;
		}
	}
}

:global .again-global {
	color:red;
}

:global .again-again-global {
	:global .again-again-global {
		color: red;
	}
}

:root {
	--foo-prop: red;
}

:global .again-again-global {
	color: var(--foo-prop);

	:global .again-again-global {
		color: var(--foo-prop);
	}
}

:global .again-again-global {
	animation: slidein 3s;

	:global .again-again-global, .class, :global(:global(:local(.nested1)).nested2).nested3 {
		animation: slidein 3s;
	}

  .local2 :global .global,
	.local3 {
		color: red;
	}
}

@unknown var(--foo-prop) {
	color: red;
}

.class {
	.class {
		.class {
			.class {}
		}
	}
}

.class {
	.class {
		.class {
			.class {
				animation: slidein 3s;
			}
		}
	}
}

.class {
	animation: slidein 3s;
	.class {
		animation: slidein 3s;
		.class {
			animation: slidein 3s;
			.class {
				animation: slidein 3s;
			}
		}
	}
}

.broken {
	. global(.class) {
		color: red;
	}

	: global(.class) {
		color: red;
	}

	: global .class {
		color: red;
	}

	: local(.class) {
		color: red;
	}

	: local .class {
		color: red;
	}

	# hash {
		color: red;
	}
}

.comments {
	:/** test */global(.class) {
		color: red;
	}

	:/** test */global .class {
		color: red;
	}

	:/** test */local(.class) {
		color: red;
	}

	:/** test */local .class {
		color: red;
	}

	./** test **/class {
		color: red;
	}

	:local(./** test **/class) {
		color: red;
	}

	:local ./** test **/class {
		color: red;
	}
}

.foo {
	color: red;
	+ .bar + & { color: blue; }
}

.error, #err-404 {
	&:hover > .baz { color: red; }
}

.foo {
	& :is(.bar, &.baz) { color: red; }
}

.qqq {
	color: green;
	& .a { color: blue; }
	color: red;
}

.parent {
	color: blue;

	@scope (& > .scope) to (& > .limit) {
		& .content {
			color: red;
		}
	}
}

.parent {
	color: blue;

	@scope (& > .scope) to (& > .limit) {
		.content {
			color: red;
		}
	}

	.a {
		color: red;
	}
}

@scope (.card) {
	:scope { border-block-end: 1px solid white; }
}

.card {
	inline-size: 40ch;
	aspect-ratio: 3/4;

	@scope (&) {
		:scope {
			border: 1px solid white;
		}
	}
}

.foo {
	display: grid;

	@media (orientation: landscape) {
		.bar {
			grid-auto-flow: column;

			@media (min-width > 1024px) {
				.baz-1 {
					display: grid;
				}

				max-inline-size: 1024px;

				.baz-2 {
					display: grid;
				}
			}
		}
	}
}

@counter-style thumbs {
	system: cyclic;
	symbols: "\1F44D";
	suffix: " ";
}

ul {
	list-style: thumbs;
}

@counter-style extend-thumbs {
	fallback: thumbs;
	system: extends thumbs;
	speak-as: thumbs;
}

div {
	list-style: inside;
	list-style: outside;
	list-style: upper-roman inside;
	list-style: circle outside;
	list-style: none disc;
	list-style: none url(img/shape.png);
	list-style: none;
	list-style: none disc url(img/shape.png);
	list-style: lower-alpha;
	list-style: disc;
	list-style: square;
	list-style: url("./img/shape.png");
	list-style: georgian inside url("./img/shape.png");
	list-style: georgian outside url("./img/shape.png");
	/* type */
	list-style: square;

	/* image */
	list-style: url("./img/shape.png");

	/* position */
	list-style: inside;

	/* two values */
	list-style: georgian outside;
	list-style: url("img/shape.png") inside;

	/* three values */
	list-style: lower-roman url("img/shape.png") outside;

	/* Keyword value */
	list-style: none;

	/* Global values */
	list-style: inherit;
	list-style: initial;
	list-style: revert;
	list-style: revert-layer;
	list-style: unset;

	list-style-type: "★";

	list-style-type: extend-thumbs;
	list-style: extend-thumbs;
}

@container (width > 400px) and style(--responsive: true) {
	.class {
		font-size: 1.5em;
	}
}

@container tall (height > 30rem) {
	p {
		line-height: 1.6;
	}
}

@container sticky-heading scroll-state(stuck: top) {
	h2 {
		background: purple;
		color: white;
	}
}

@container card-c (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
	h2 {
		font-size: 1.5em;
	}
}

@container (width > 400px) and (height > 400px) {
	/* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
	/* <stylesheet> */
}

@container not (width < 400px) {
	/* <stylesheet> */
}

@container (min-width: 400px) {
	/* … */
}
@container (orientation: landscape) and (width > 400px) {
	/* … */
}
@container (15em <= block-size <= 30em) {
	/* … */
}

.post {
	container-name: tall;
	container-type: inline-size;

	container: none;
	container: inherit;
	container: sticky-heading / inline-size;
	container: sticky-heading / size;
	container: sticky-heading / scroll-state;
	--my-var: local(sticky-heading);

	container: var(--my-var);
	--cards: small;
	container-type: inline-size;
}


@container summary style(--cards: small) {
	.card {
		border: thin solid silver;
		border-radius: 0.5em;
		padding: 1em;
	}
}

/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
	@styleset {
		nice-style: 12;
	}
}

@font-palette-values --identifier {
	font-family: Bixa;
}

.my-class {
	font-palette: --identifier;
}

@keyframes foo-kf { /* ... */ }
@keyframes "foo-kf-str" { /* ... */ }
@keyframes { /* ... */ }
@keyframes{ /* ... */ }

@supports (display: flex) {
	@media screen and (min-width: 900px) {
		article {
			display: flex;
		}
	}
}

@starting-style {
	.class {
		opacity: 0;
		transform: scaleX(0);
	}
}

.class {
	opacity: 1;
	transform: scaleX(1);

	@starting-style {
		opacity: 0;
		transform: scaleX(0);
	}
}

@scope (.feature) {
	.class { opacity: 0; }

	:scope .class-1 { opacity: 0; }

	& .class { opacity: 0; }
}

@position-try --custom-left {
	position-area: left;
	width: 100px;
	margin: 0 10px 0 0;
}

@position-try --custom-bottom {
	top: anchor(bottom);
	justify-self: anchor-center;
	margin: 10px 0 0 0;
	position-area: none;
}

@position-try --custom-right {
	left: calc(anchor(right) + 10px);
	align-self: anchor-center;
	width: 100px;
	position-area: none;
}

@position-try --custom-bottom-right {
	position-area: bottom right;
	margin: 10px 0 0 10px;
}

.infobox {
	position: fixed;
	position-anchor: --myAnchor;
	position-area: top;
	width: 200px;
	margin: 0 0 10px 0;
	position-try-fallbacks:
		--custom-left, --custom-bottom,
		--custom-right, --custom-bottom-right;
}

@page {
	size: 8.5in 9in;
	margin-top: 4in;
}

@color-profile --swop5c {
	src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

.header {
	background-color: color(--swop5c 0% 70% 20% 0%);
}

.test {
	test: (1, 2) [3, 4], { 1: 2};
	.a {
		width: 200px;
	}
}

.test {
	.test {
		width: 200px;
	}
}

.test {
	width: 200px;

	.test {
		width: 200px;
	}
}

.test {
	width: 200px;

	.test {
		.test {
			width: 200px;
		}
	}
}

.test {
	width: 200px;

	.test {
		width: 200px;

		.test {
			width: 200px;
		}
	}
}

.test {
	.test {
		width: 200px;

		.test {
			width: 200px;
		}
	}
}

.test {
	.test {
		width: 200px;
	}
	width: 200px;
}

.test {
	.test {
		width: 200px;
	}
	.test {
		width: 200px;
	}
}

.test {
	.test {
		width: 200px;
	}
	width: 200px;
	.test {
		width: 200px;
	}
}

#test-id {
	c: 1;

	#test-id {
		c: 2;
	}
}

@property --item-size {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}

.container {
	display: flex;
	height: 200px;
	border: 1px dashed black;

	/* set custom property values on parent */
	--item-size: 20%;
	--item-color: orange;
}

.item {
	width: var(--item-size);
	height: var(--item-size);
	background-color: var(--item-color);
}

.two {
	--item-size: initial;
	--item-color: inherit;
}

.three {
	/* invalid values */
	--item-size: 1000px;
	--item-color: xyz;
}

@property invalid {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
@property{
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
@property {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}

@property --progress {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 25%;
}

.bar {
	display: inline-block;
	--progress: 25%;
	width: 100%;
	height: 5px;
	background: linear-gradient(
		to right,
		#00d230 var(--progress),
		black var(--progress)
	);
	animation: progressAnimation 2.5s ease infinite;
}

@keyframes progressAnimation {
	to {
		--progress: 100%;
	}
}

@keyframes "initial" { /* ... */ }
@keyframes/**test**/"initial" { /* ... */ }
@keyframes/**test**/"initial"/**test**/{ /* ... */ }
@keyframes/**test**//**test**/"initial"/**test**//**test**/{ /* ... */ }
@keyframes /**test**/ /**test**/ "initial" /**test**/ /**test**/ { /* ... */ }
@keyframes "None" { /* ... */ }
@property/**test**/--item-size {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
@property/**test**/--item-size/**test**/{
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
@property /**test**/--item-size/**test**/ {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
@property /**test**/ --item-size /**test**/ {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
@property/**test**/ --item-size /**test**/{
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
@property /**test**/ --item-size /**test**/ {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 40%;
}
div {
	animation: 3s ease-in 1s 2 reverse both paused "initial", localkeyframes2;
	animation-name: "initial";
	animation-duration: 2s;
}

.item-1 {
	width: var(   --item-size   );
	height: var(/**comment**/--item-size);
	background-color: var( /**comment**/--item-color);
	background-color-1: var(/**comment**/ --item-color);
	background-color-2: var( /**comment**/ --item-color);
	background-color-3: var( /**comment**/ --item-color /**comment**/ );
	background-color-3: var( /**comment**/--item-color/**comment**/ );
	background-color-3: var(/**comment**/--item-color/**comment**/);
}

@keyframes/**test**/foo-kf2 { /* ... */ }
@keyframes /**test**/foo-kf2 { /* ... */ }
@keyframes/**test**/ foo-kf2 { /* ... */ }
@keyframes /**test**/ foo-kf2 { /* ... */ }
@keyframes /**test**//**test**/ foo-kf2 { /* ... */ }
@keyframes /**test**/ /**test**/ foo-kf2 { /* ... */ }
@keyframes /**test**/ /**test**/foo-kf2 { /* ... */ }
@keyframes /**test**//**test**/foo-kf2 { /* ... */ }
@keyframes/**test**//**test**/foo-kf2 { /* ... */ }
@keyframes/**test**//**test**/foo-kf2/**test**//**test**/{ /* ... */ }
@keyframes /**test**/ /**test**/ foo-kf2 /**test**/ /**test**/ { /* ... */ }

./**test**//**test**/class {
	background: red;
}

./**test**/ /**test**/class {
	background: red;
}

.var {
	--main-color: black;
	--FOO-prop: 10px;
	--foo-prop: 10px;
	--bar-prop: calc(var(--foo-prop) + 10px);
	--accent-background: linear-gradient(to top, var(--main-color), white);
	--external-link: "test";
	--custom-prop: yellow;
	--default-value: red;
	--main-bg-color: red;
	--backup-bg-color: black;
	-foo: calc(var(--bar-prop) + 10px);
	var: var(--main-color);
	var1: var(--foo-prop);
	var2: var(--FOO-prop);
	content: " (" var(--external-link) ")";
	var3: var(--main-color, blue);
	var4: var(--custom-prop,);
	var5: var(--custom-prop, initial);
	var6: var(--custom-prop, var(--default-value));
	var7: var(--custom-prop, var(--default-value, red));
	var8: var(--unknown);
	background-color: var(--main-bg-color, var(--backup-bg-color, white));
}

.var-order {
	background-color: var(--test-prop);
	--test-prop: red;
}

.className {
	border-radius: 12px;
}

.classNameLocal {
	border-radius: 12px;
}

.classNameLocalOther {
	border-radius: 12px;
}

.exportName {
	composes:
		className    from   "./classes.modules.css"		,
		beforeName   from    global   ,
		className   ,
		classNameLocal   ,
		importName   secondImport   from   global   ,
		otherClassName    otherClassNameToo    from   "classes.modules.css"
;
	composes:   classNameLocal   ;
	composes:   classNameLocal   classNameLocalOther   ;
	composes:   classNameLocal ,   classNameLocalOther   ;
	composes:   className   from    global   ;
	composes:   className   classNameOther   from    global   ;
	composes:   className from    global   ,   classNameOther   from    global   ;
	composes:   className   from    "./classes.modules.css"   ;
	composes:   className   otherClassName   from    "./classes.modules.css"   ;
	composes:   className   from    "./classes.modules.css"   ,   otherClassName   from    "./classes.modules.css"   ;
	border: red;
}

.exportNameOtherNoSpaces {
	composes:className from"./classes.modules.css",beforeName from global,className;
}

:global(.global-class-name) {
	color: red;
}

.local-class-name {
	color: blue;
}

.other-local-class-name {
	color: green;
}

.exportNameMixedLocalGlobalFunctions {
	composes: local-class-name global(global-class-name) local(other-local-class-name);
}

.from {
	color: red;
}

.exportNameOtherFromKeyword {
	composes: from;
}

.exportNameOtherFromKeywordWithFrom1 {
	composes: from from global;
}

.exportNameOtherFromKeywordWithFrom2 {
	composes: from from "./classes.modules.css";
}

.exportNameWeirdCharacters {
	composes: a -b b- --c c-- _d d\% from "./classes.modules.css";
}

@function --transparent(--color <color>, --alpha type(<number> | <percentage>)) returns <color> {
	result: oklch(from var(--color) l c h / var(--alpha));
}

section {
	--base-color: #faa6ff;
	background-color: --transparent(var(--base-color), 0.8);
}

@function --max-plus-x(--list <length>#, --x <length>) {
	result: calc(max(var(--list)) + var(--x));
}

div {
	width: --max-plus-x({1px, 7px, 2px}, 3px); /* 10px */
}

@function --anim-1s(--animation-prop, --count) {
	--duration: 1s;
	--easing: linear;
	result: var(--animation-prop) var(--duration) var(--count) var(--easing);
}

div {
	animation: --anim-1s(local(bounce), 2);
}

@function --outer(--outer-arg) {
	--outer-local: 2;
	result: --inner();
}

@function --inner() returns <number> {
	result: calc(var(--outer-arg) + var(--outer-local));
}

div {
	z-index: --outer(1); /* 3 */
}

@function --narrow-wide(--narrow, --wide) {
	result: var(--wide);
	@media (width < 700px) {
		result: var(--narrow);
	}
}

@function --narrow-wide-if-else(--narrow, --wide) {
	result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
}

@function --transparent(--color, --alpha) {
	result: oklch(from var(--color) l c h / var(--alpha));
}

@function :local(--transparent-local)(--color, --alpha) {
	result: oklch(from var(--color) l c h / var(--alpha));
}

@function :global(--transparent-global)(--color, --alpha) {
	result: oklch(from var(--color) l c h / var(--alpha));
}

section {
	--base-color: #faa6ff;
	background-color: --transparent(var(--base-color), 0.8);
	background-color: local(--transparent-local)(var(--base-color), 0.8);
	background-color: global(--transparent-global)(var(--base-color), 0.8);
}

:root {
	--mode: sharp;
}

.apply-sharp {
	border-radius: if(style(--mode: sharp): 0px; else: revert-rule);
}

@color-profile --swop5c {
	src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

@color-profile local(--swop5c-local) {
	src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

@color-profile :local(--swop5c-local) {
	src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

@color-profile global(--swop5c) {
	src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

@color-profile :global(--swop5c) {
	src: url("https://example.org/SWOP2006_Coated5v2.icc");
}

.class {
	background-color: color(--swop5c 0% 70% 20% 0%);
	background-color: color(local(--swop5c-local) 0% 70% 20% 0%);
	background-color: color(:local(--swop5c-local) 0% 70% 20% 0%);
	background-color: color(global(--swop5c) 0% 70% 20% 0%);
	background-color: color(:global(--swop5c) 0% 70% 20% 0%);
	background-color: color(--swop5c from global 0% 70% 20% 0%);
	background-color: color(--from-shared from "./shared.css" 0% 70% 20% 0%);
	background-color: color(local(--swop5c-local, "./shared.css") 0% 70% 20% 0%);
	background-color: color(:local(--swop5c-local, "./shared.css") 0% 70% 20% 0%);
}

:root {
	--text-color: #eee;
}

.simple {
	color: var(--text-color);
}

/* Just nesting */
.theme-dark {
	--text-color: #fff;
	--bg-color: #333;

	.button {
		--button-color: var(--text-color);
		--button-bg: var(--bg-color);
		color: var(--button-color);
		background-color: var(--button-bg);
	}
}

/* A container context based on inline size */
.post {
	--themeColor: blue;
	container-type: inline-size;
}

/* Apply styles if the container is narrower than 650px */
@container (width < 650px) and style(--themeColor: blue) {
	.card {
		width: 50%;
		background-color: lightgray;
		font-size: 1em;
	}
}

@keyframes broken-kf;

.class-name-after-broken-keyframes {
	color: red;
}

.no-space {
	:global.class-no-space {
		color: red;
	}

	:global/** test **/.class {
		color: red;
	}

	:local.class {
		color: red;
	}

	:local/** test **/.class {
		color: red;
	}

	:local/** test **/#hash {
		color: red;
	}

	:local/** test **/{
		color: red;
	}
}

/* nesting */

.class{.class{}}
.class{color:#fff5f5}
.class{.class{color:#f1f1f1}}
.class{--foo-prop:#fff5f5}
.class{--foo-prop:#fff5f5;color:#f1f1f1}
.class{--foo-prop:#fff5f5;color:#f1f1f1;}
.class{--foo-prop:#fff5f5;color:#f1f1f1;.class{color:#f1f1f1}}
.class{--foo-prop:#fff5f5;.class{color:#f1f1f1}color:#f1f1f1;}
.class{.class{color:#f1f1f1}--foo-prop:#fff5f5;color:#f1f1f1;}
/* TODO fix, but this syntax is not used anywhere */
.class{--bar-prop:{1, 'string', .class, #f1f1f1, #id}}
.class{--baz-prop:[1, "string", .class, #f1f1f1, #id]}
.class{--baz-prop:(1, "string", .class, #f1f1f1, #id)}

/* Cases for `css/global` */

.just-class {
	color: red;
}

:local(.my-simple-local) {
	color: red;
}

:global(.my-global-local) {
	color: red;
}

:local(.multiple-first.multiple-second) {
	color: red;
}

:local(.multiple-first-with-space .multiple-second-with-space) {
	color: red;
}

div:not(:local(.special)) {
	color: blue;
}

p:not(:local(#main-paragraph)) {
	font-weight: bold;
}

:local(.container) {
	/* Styles for .container */
	background-color: lightblue;

	@media (min-width: 768px) {
		/* Styles for .card on larger screens */
		display: flex;
		gap: 1rem;
	}

	@supports (display: grid) {
		& :local(.header) {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
	}

	& :local(.active) {
		/* Styles for .container.active */
		border: 2px solid blue;
	}

	&.highlighted {
		/* Styles for .container.highlighted */
		box-shadow: 0 0 5px yellow;
	}

	/* Nesting a descendant with multiple classes */
	.item:local(.selected) {
		/* Styles for .container .item.selected */
		font-weight: bold;
		color: darkgreen;
	}
}

.container-only-classes {
	/* Styles for .container */
	background-color: lightblue;

	@media (min-width: 768px) {
		/* Styles for .card on larger screens */
		display: flex;
		gap: 1rem;
	}

	@supports (display: grid) {
		& .header {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
	}

	& .active {
		/* Styles for .container.active */
		border: 2px solid blue;
	}

	&.highlighted {
		/* Styles for .container.highlighted */
		box-shadow: 0 0 5px yellow;
	}

	/* Nesting a descendant with multiple classes */
	.item.selected {
		/* Styles for .container .item.selected */
		font-weight: bold;
		color: darkgreen;
	}
}

:local(.local-class-name) {
	color: red;
}

.global-befor-local :local(.local-class-name) {
	color: red;
}

:local(.local-class-name) .global-after-local {
	color: red;
}

:local(.foo) {
	&:local(.class) {
		a_value: some-value;
	}

	@media screen and (min-width: 900px) {
		b_value: some-value;

		:local(.bar) {
			c_value: some-value;
		}

		&:local(.baz) {
			c_value: some-value;
		}
	}
}

/* Composes */

.class {
	color: black;
}

:local(.local-class) {
	color: white;
}

:global(.global-class-other) {
	color: red;
}

:local(.class-with-composes) {
	composes:
		local-class,
		global-class from global,
		global-class-other from global,
		local-my-shared-class from "./shared.css";
}

/* At-rules */

@keyframes basic-keyframes {}
@keyframes local(local-keyframes) {}
@keyframes global(global-keyframes) {}
/** Deprecated syntax */
@keyframes :local(local-keyframes-old-syntax) {}
@keyframes :global(local-keyframes-old-syntax) {}

.foo {
	animation-name: basic-keyframes, global(global-keyframes), local(local-keyframes);
}

@property local(--progress) {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 25%;
}

@keyframes local(progressAnimationLocal) {
	to {
		--progress: 100%;
	}
}

.bar {
	display: inline-block;
	--progress: 25%;
	width: 100%;
	height: 5px;
	background: linear-gradient(
		to right,
		#00d230 var(local(--progress)),
		black var(local(--progress))
	);
	animation: local(progressAnimationLocal) 2.5s ease infinite;
}

@scope (:local(.article-header)) to (:global(.class)) {
	.article-footer {
		border: 5px solid black;
	}
	:local(.class-1) {
		color: red;
	}
	:global(.class-2) {
		color: blue;
	}
}

/** Custom properties */

:root {
	--foo-bar: red;
	--local-foo-bar: red;
	--global-foo-bar: red;
	--local-and-global-in-var:
	red,
	local(--local-foo-bar),
	global(--global-foo-bar),
		/** Deprecated syntax */
	:local(--local-foo-bar),
	:global(--global-foo-bar);
}

.class {
	background-color:
		var(--foo-bar),
		var(local(--local-foo-bar)),
		var(global(--global-foo-bar)),
			/** Deprecated syntax */
		var(:local(--local-foo-bar)),
		var(:global(--global-foo-bar)),
		var(--global-foo-bar from global),
		var(--from-shared from "./shared.css");
}

/** Custom local value */

@unknown-rule local(unknown-at-rule) {}

.class {
	custom-name: local(unknown-at-rule);
}

:global .class {
	--test-1: red;
	color: var(--test-1);
	animation-name: animation-name-test;
	local-and-global: local(animation-name-test) global(animation-name-test)
}

/* GRID */

.grid1 {
	grid: none;
}

.gird2 {
	grid: "a" 100px "b" 1fr;
}

.grid3 {
	grid: [line-name1] "a" 100px [line-name2];
}

.grid4 {
	grid: "a" 200px "b" min-content;
}

.grid5 {
	grid: "a" minmax(100px, max-content) "b" 20%;
}

.grid6 {
	grid: 100px / 200px;
}

.grid7 {
	grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
}

.grid8 {
	grid: 200px / auto-flow;
}

.grid9 {
	grid: 30% / auto-flow dense;
}

.grid10 {
	grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
}

.grid11 {
	grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
}

.grid12 {
	grid: auto-flow / 200px;
}

.grid13 {
	grid: auto-flow dense / 30%;
}

.grid14 {
	grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
}

.grid15 {
	grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
}

.grid16 {
	grid: inherit;
	grid: initial;
	grid: revert;
	grid: revert-layer;
	grid: unset;
}

.grid17 {
	grid-template-areas: 'nav main';
}

.grid-area {
	grid-area: auto / auto / auto / auto;
}

.grid-area1 {
	grid-area: some-grid-area;
}

.grid-area2 {
	grid-area: some-grid-area / another-grid-area;
}

.grid-area3 {
	grid-area: 4 some-grid-area / 2 another-grid-area;
}

.grid-area4 {
	grid-area: span 3 / span some-grid-area;
}

/* Keyword value */
.grid-row-start {
	grid-row-start: auto;
}

/* <custom-ident> values */
.grid-row-start1 {
	grid-row-start: some-grid-area;
}

/* <integer> + <custom-ident> values */
.grid-row-start2 {
	grid-row-start: 2;
}
.grid-row-start3 {
	grid-row-start: some-grid-area 4;
}

/* span + <integer> + <custom-ident> values */
.grid-row-start4 {
	grid-row-start: span 3;
}
.grid-row-start5 {
	grid-row-start: span some-grid-area;
}
.grid-row-start6 {
	grid-row-start: 5 some-grid-area span;
}

/* Global values */
.grid-row-start7 {
	grid-row-start: inherit;
}
.grid-row-start8 {
	grid-row-start: initial;
}
.grid-row-start9 {
	grid-row-start: revert;
}
.grid-row-start10 {
	grid-row-start: revert-layer;
}
.grid-row-start11 {
	grid-row-start: unset;
}

.grid-template-areas {
	grid-template-areas:
  "a b ."
  "a   c   d";
}

.grid-template-rows {
	grid-template-rows: [line-name1] 100px [line-name2 line-name3];
}

.grid-template-rows1 {
	grid-template-rows:
  	[line-name1 line-name2] 100px
  	repeat(auto-fit, [line-name1] 300px) [line-name3];
}

.grid-template-rows2 {
	grid-template-rows:
		[line-name1] 100px [line-name2]
		repeat(auto-fit, [line-name3 line-name4] 300px)
		100px;
}

.grid-template-rows3 {
	grid-template-rows: max-content 1fr max-content;
}

.grid-template {
	grid-template:
		[header-top] "a a a" [header-bottom]
		[main-top] "b b b" 1fr [main-bottom]
		/ auto 1fr auto;
}

.grid-container {
	display: grid;
	/* 1. Use repeat, auto-fit, and minmax for responsive columns.
		 Columns will be at least 150px wide, growing to fill available space (1fr).
		 Lines are named 'col-start' and 'col-end' for each track repetition. */
	grid-template-columns: repeat(auto-fit, [col-start] minmax(150px, 1fr) [col-end]);

	/* 2. Define explicit row heights and name key row lines. */
	grid-template-rows: [header-start] 100px [header-end content-start] auto [content-end];

	/* 3. Add gaps for spacing */
	gap: 20px;

	padding: 20px;
	background-color: #f0f0f0;
}

.class {
	grid-template-columns: repeat(auto-fit, [col-start] minmax(150px, 1fr) [col-end]);
}

.wrapper {
	display: grid;
	grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
	grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

.box1 {
	grid-column-start: main-start;
	grid-row-start: main-start;
	grid-row-end: main-end;
}

.box2 {
	grid-column-start: content-end;
	grid-row-start: main-start;
	grid-row-end: content-end;
}

.box3 {
	grid-column-start: content-start;
	grid-row-start: main-start;
}

.box4 {
	grid-column-start: content-start;
	grid-column-end: main-end;
	grid-row-start: content-end;
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-auto-rows: minmax(100px, auto);
	grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft   ft   ft   ft   ft   ft";
}

.header {
	grid-area: hd;
}

.footer {
	grid-area: ft;
}

.content {
	grid-area: main;
}

.sidebar {
	grid-area: sd;
}

.wrapper > div.overlay {
	z-index: 10;
	grid-column: main-start / main-end;
	grid-row: hd-start / ft-end;
	border: 4px solid rgb(92 148 13);
	background-color: rgb(92 148 13 / 40%);
	color: rgb(92 148 13);
	font-size: 150%;
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
}

.item1to5 {
	grid-column: col-start / col-start 5;
}

.item7to9 {
	grid-column: col-start 7 / span 3;
}

.wrapper {
	grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
}

.wrapper {
	grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}

.wrapper {
	grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end];
}

.important {
	animation: none !important;
	animation: my-name !important;
	animation-name: none !important;
	animation-name: my-name !important;

	color: red !important;

	container: sticky-heading / inline-size !important;
	container-name: tall !important;

	grid-column: col-start / col-start 5 !important;
	grid-area: some-grid-area !important;

	list-style-type: extend-thumbs !important;
	list-style: extend-thumbs !important;

	fallback: thumbs !important;
	system: extends thumbs !important;
	speak-as: thumbs !important;
}