basic.preserve.expect.css

html {
	--ref-color: skip;
}

:root {
	--color: rgb(255, 0, 0);
	--color-h: 0;
	--color-s: 100%;
	--color-l: 50%;
	--color-components: var(--color-h), var(--color-s), var(--color-l);
	--color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l));
	--ref-color: var(--color);
	--circular: var(--circular-2);
	--circular-2: var(--circular);
	--margin: 0 10px 20px 30px;
	--shadow-color: rgb(255,0,0);
	--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
	--font-family: "Open Sans", sans-serif;
	--url-1: url("/my/path");
	--url-2: url('/my/path');
	--url-3: url(/my/path);
	--url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
	--✅-size: 2em;
	color: rgb(255, 0, 0);
}

:root,
[data-theme=light] {
	--theme-color: #053;
}

.ignore-line {
	/* postcss-custom-properties: ignore next */
	color: var(--color);
	background-color: blue;
}

.ignore-block {
	/* postcss-custom-properties: off */
	color: var(--color-2, blue);
	box-shadow: inset 0 -3px 0        var(--color);
	background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
}

.test {
	--skip: gray;
	color: rgb(255, 0, 0);
}

.test--color_spacing {
	box-shadow: inset 0 -3px 0        rgb(255, 0, 0);
}

.test--preserve_whitespaces {
	margin: 0 10px 20px 30px;
}

.test--complex_values {
	box-shadow: 0 6px 14px 0 color(rgb(255,0,0) a(.15));
}

.test--comma_separated_values {
	font-family: "Open Sans", sans-serif;
}

.test--fallback {
	color: blue;
}

.test--color_w_var {
	color: rgb(255, 0, 0);
}

.test--color_w_vars {
	color: hsl(0, 100%, 50%);
}

.test--color_components {
	color: hsl(0, 100%, 50%);
	background-color: hsl(0 , 1%, 2%);
}

.test--circular_var {
	color: var(--circular);
}

.test--z-index {
	z-index: var(--z-index);
}

.test--nested-fallback {
	z-index: 1;
}

.text--calc {
	width: calc((100% - 1px) + 10px);
}

.test--linear-gradient {
	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%);
}

.test--loose-formatting {
	color: rgb(255, 0, 0)/*rtl:red*/;
}

.test--combined-selector {
	color: #053;
}

.test--variable-with-url {
	order: 1;
	background: url("/my/path");
}

.test--variable-with-url {
	order: 2;
	background: url('/my/path');
}


.test--variable-with-url {
	order: 3;
	background: url(/my/path);
}


.test--variable-with-url {
	order: 4;
	background: url(data:image/png;bm90LWFuZC1pbWFnZQ==);
}

.no-prototype-collisions {
	color: var(toString);
}

.test-unicode {
	color: 2em;
}

.test {
	font-family: "Helvetica Neue", Arial, sans-serif;
}

.fallbacks-with-main-values-that-dont-exist {
	color: rgb(255, 0, 0)
}

:root {
	--ignored-values-1: initial;
}

.ignored-values {
	color: var(--ignored-values-1);
	color: green;
}

:root {
	--space-1:;
	--space-2: ;
	--space-3:  ;
}

.space-values {
	a: list("a", ,"c");
	b: list("a", ,"c");
	c: list("a",  ,"c");
}

@media (prefers-color-scheme: dark) {
	:root {
		--color: rgb(255, 167, 167);
	}
}

.conditionals {
	color: rgb(255, 0, 0);
}

:root {
	--local: 0;
}

.local-variable-1 {
	--local: 1;
	order: 0;
}

.local-variable-2 {
	--local: 2;
	order: 0;
}

.local-variable-3 {
	--local: 3;
	order: 0;
}

.local-only {
	--local-only: 4;
	order: var(--local-only);
}

.ignores-declarations-that-have-an-exact-fallback-a {
	left: 1rem;
}

.ignores-declarations-that-have-an-exact-fallback-b {
	right: 2em;
}

.does-not-ignore-declarations-that-have-an-exact-override-a {
	left: 1rem;
	left: 1rem;
}

.does-not-ignore-declarations-that-have-an-exact-override-b {
	right: 2em;
	right: 2em;
}

:root {
	--foo: var(--definitely-does-not-exist-3);
}

@supports (left: var(--bar)) {
	.has-supports-ancestor {
		--something-local: 1;
		left: var(--something-local);
	}
}

@supports (top: var(--f)) {
	.has-supports-ancestor {
		--something-local: 1;
		left: var(--something-local);
	}
}

:root {
	--with-fallback-on-root-1: var(--does-not-exist, 2);
	--with-fallback-on-root-2: var(--does-not-exist, );
}

.el {
	order: 2;
}

.el {
	order:  ;
	color: rgb(calc(120) 130 140);
}