webpack/test/configCases/css/css-modules/style.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;
}

/* .composed {
	composes: local1;
	composes: local2;
} */

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

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

.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 {
		background: red;

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

.not-selector-inside {
	color: #fff;
	opacity: 0.12;
	padding: .5px;
	unknown: :local(.test);
	unknown1: :local .test;
	unknown2: :global .test;
	unknown3: :global .test;
	unknown4: .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: dark;
}

@media screen and (prefers-color-scheme: var(--test)) {
	.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)) infinite running slidein;
}

:root {
	--baz: 10px;
}

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

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