diff --git a/package-lock.json b/package-lock.json
index 27b60be30..d214047ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6724,6 +6724,7 @@
"version": "7.5.0",
"license": "CC0-1.0",
"dependencies": {
+ "@csstools/postcss-cascade-layers": "^1.0.0",
"@csstools/postcss-color-function": "^1.1.0",
"@csstools/postcss-font-format-keywords": "^1.0.0",
"@csstools/postcss-hwb-function": "^1.0.0",
@@ -11371,6 +11372,7 @@
"postcss-preset-env": {
"version": "file:plugin-packs/postcss-preset-env",
"requires": {
+ "@csstools/postcss-cascade-layers": "^1.0.0",
"@csstools/postcss-color-function": "^1.1.0",
"@csstools/postcss-font-format-keywords": "^1.0.0",
"@csstools/postcss-hwb-function": "^1.0.0",
diff --git a/plugin-packs/postcss-preset-env/.tape.mjs b/plugin-packs/postcss-preset-env/.tape.mjs
index 5a505c2d9..3d721acbe 100644
--- a/plugin-packs/postcss-preset-env/.tape.mjs
+++ b/plugin-packs/postcss-preset-env/.tape.mjs
@@ -160,6 +160,21 @@ postcssTape(plugin)({
browsers: '> 0%'
},
},
+ 'layers-basic': {
+ message: 'supports layers usage',
+ options: {
+ stage: 0,
+ browsers: '> 0%'
+ },
+ },
+ 'layers-basic:preserve:true': {
+ message: 'supports layers usage with { preserve: true }',
+ options: {
+ preserve: true,
+ stage: 0,
+ browsers: '> 0%'
+ },
+ },
'client-side-polyfills:stage-1': {
message: 'stable client side polyfill behavior',
options: {
diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md
index 2a48e02d4..3c973d32c 100644
--- a/plugin-packs/postcss-preset-env/CHANGELOG.md
+++ b/plugin-packs/postcss-preset-env/CHANGELOG.md
@@ -1,5 +1,9 @@
# Changes to PostCSS Preset Env
+### Unreleased
+
+- Added `@csstools/postcss-cascade-layers`
[Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers#readme) for usage details.
+
### 7.5.0 (May 2, 2022)
- Added `@csstools/postcss-unset-value`
[Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-unset-value#readme) for usage details.
diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json
index 14f78fe43..27c33718c 100644
--- a/plugin-packs/postcss-preset-env/package.json
+++ b/plugin-packs/postcss-preset-env/package.json
@@ -27,6 +27,7 @@
"dist"
],
"dependencies": {
+ "@csstools/postcss-cascade-layers": "^1.0.0",
"@csstools/postcss-color-function": "^1.1.0",
"@csstools/postcss-font-format-keywords": "^1.0.0",
"@csstools/postcss-hwb-function": "^1.0.0",
diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json
index e883a0f22..42e92eb07 100644
--- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json
+++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json
@@ -204,5 +204,10 @@
"packageName": "@csstools/postcss-unset-value",
"id": "unset-value",
"importName": "postcssUnsetValue"
+ },
+ {
+ "packageName": "@csstools/postcss-cascade-layers",
+ "id": "cascade-layers",
+ "importName": "postcssCascadeLayers"
}
]
diff --git a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs
index 5a077f47f..5e2265e59 100644
--- a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs
+++ b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs
@@ -32,4 +32,5 @@ export default [
'overflow-wrap-property',
'place-properties',
'system-ui-font-family',
+ 'cascade-layers',
];
diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs
index a7fda3f56..b6e7670d9 100644
--- a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs
+++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs
@@ -2,6 +2,7 @@ import postcssInitial from 'postcss-initial';
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
import postcssBlankPseudo from 'css-blank-pseudo';
import postcssPageBreak from 'postcss-page-break';
+import postcssCascadeLayers from '@csstools/postcss-cascade-layers';
import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
import postcssClamp from 'postcss-clamp';
import postcssColorFunction from '@csstools/postcss-color-function';
@@ -47,6 +48,7 @@ export const pluginsById = new Map(
['any-link-pseudo-class', postcssPseudoClassAnyLink],
['blank-pseudo-class', postcssBlankPseudo],
['break-properties', postcssPageBreak],
+ ['cascade-layers', postcssCascadeLayers],
['case-insensitive-attributes', postcssAttributeCaseInsensitive],
['clamp', postcssClamp],
['color-function', postcssColorFunction],
diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs
index f125716b7..98d58208e 100644
--- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs
+++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs
@@ -205,4 +205,9 @@ export default [
'id': 'unset-value',
'importName': 'postcssUnsetValue',
},
+ {
+ 'packageName': '@csstools/postcss-cascade-layers',
+ 'id': 'cascade-layers',
+ 'importName': 'postcssCascadeLayers',
+ },
];
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.css b/plugin-packs/postcss-preset-env/test/layers-basic.css
new file mode 100644
index 000000000..3d0205ff0
--- /dev/null
+++ b/plugin-packs/postcss-preset-env/test/layers-basic.css
@@ -0,0 +1,376 @@
+@layer A, B.A;
+
+@layer C {
+ :root {
+ is-layer: C;
+ --order: 1;
+ }
+
+ .test-custom-property-fallbacks {
+ is-layer: C;
+ --firebrick: lab(40% 56.6 39);
+ }
+
+ .test-custom-properties {
+ is-layer: C;
+ order: var(--order);
+ }
+
+ .test-image-set-function {
+ is-layer: C;
+ background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x);
+ order: 2;
+ }
+
+ .test-logical-properties-and-values {
+ is-layer: C;
+ margin: logical 1px 2px 3px 4px;
+ order: 3;
+ padding-block: 5px;
+ }
+
+ .test-nesting-rules {
+ is-layer: C;
+ order: 4;
+
+ & p {
+ is-layer: C;
+ order: 5;
+
+ @layer D {
+ is-layer: C.D;
+ order: 5.1;
+ }
+ }
+
+ is-layer: C;
+ order: 6;
+ }
+}
+
+.test-nesting-rules,
+#test-is-pseudo {
+ order: 7;
+
+ & + p {
+ order: 8;
+ }
+
+ order: 9;
+}
+
+@custom-media --narrow-window (max-width: 30em);
+
+@media (--narrow-window) {
+ .test-custom-media-queries {
+ order: 10;
+ }
+}
+
+@media (480px <= width < 768px) {
+ @layer A {
+ .test-media-query-ranges {
+ is-layer: A;
+ order: 11;
+ }
+ }
+}
+
+@custom-media --dark-mode (prefers-color-scheme: dark);
+
+@media (--dark-mode) {
+ body {
+ background-color: black;
+ color: white;
+ }
+}
+
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+
+.test-custom-selectors:--heading {
+ order:12;
+}
+
+.test-case-insensitive-attributes[frame=hsides i] {
+ order: 13;
+}
+
+.test-rebeccapurple-color {
+ color: rebeccapurple;
+ order: 14;
+}
+
+.test-hexadecimal-alpha-notation {
+ background-color: #f3f3f3f3;
+ color: #0003;
+ order: 15;
+}
+
+.test-color-functional-notation {
+ color: rgb(70% 13.5% 13.5% / 50%);
+ order: 16;
+}
+
+.test-lab-function {
+ background-color: lab(40% 56.6 39);
+ color: lch(40% 68.8 34.5 / 50%);
+ order: 17;
+}
+
+.test-system-ui-font-family {
+ font-family: system-ui;
+ order: 18;
+}
+
+.test-font-variant-property {
+ font-variant-caps: small-caps;
+ order: 19;
+}
+
+.test-all-property {
+ all: initial;
+ order: 20;
+}
+
+.test-matches-pseudo-class:matches(:first-child, .special) {
+ order: 21;
+}
+
+.test-not-pseudo-class:not(:first-child, .special) {
+ order: 22;
+}
+
+.test-any-link-pseudo-class:any-link {
+ order: 23;
+}
+
+.test-dir-pseudo-class:dir(rtl) {
+ order: 24;
+}
+
+.test-overflow-wrap-property {
+ order: 25;
+ overflow-wrap: break-word;
+}
+
+.test-focus-visible-pseudo-class:focus-visible {
+ order: 26;
+}
+
+.test-double-position-gradients {
+ background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
+}
+
+.test-blank-pseudo-class:blank {
+ background-color: yellow;
+}
+
+.test-has-pseudo-class:has(.inner-class) {
+ background-color: yellow;
+}
+
+@layer B {
+ :is(.a, .b):is(:focus, :hover) {
+ order: 27;
+ }
+
+ :is(.a > .b) + :is(.c > .d) {
+ order: 28;
+ }
+}
+
+.test-hwb-function {
+ background-color: hwb(194 0% 0% / .5);
+}
+
+.test-opacity-percent {
+ opacity: 42%;
+}
+
+.clamp-same-unit {
+ width: clamp(10px, 64px, 80px);
+}
+
+.complex-clamp {
+ width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em));
+}
+
+.clamp-different-units {
+ width: clamp(10%, 2px, 4rem);
+}
+
+.mixed-clamp {
+ grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr);
+ margin: clamp(1rem, 2%, 3rem) 4vh;
+}
+
+.calc-clamp {
+ margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px));
+}
+
+.multiple-calc-clamp {
+ margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px));
+}
+
+.nested-clamp {
+ font-size: clamp(clamp(1rem, 2vw, 3rem), 4vw, 5rem);
+}
+
+@font-face {
+ font-family: 'A';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(a) format(woff2);
+}
+
+.block-flow {
+ display: block flow;
+}
+
+.block-flow-root {
+ display: block flow-root;
+}
+
+.inline-flow {
+ display: inline flow;
+}
+
+.inline-flow-root {
+ display: inline flow-root;
+}
+
+.run-in-flow {
+ display: run-in flow;
+}
+
+.list-item-block-flow {
+ display: list-item block flow;
+}
+
+.inline-flow-list-item {
+ display: inline flow list-item;
+}
+
+.block-flex {
+ display: block flex;
+}
+
+.inline-flex {
+ display: inline flex;
+}
+
+.block-grid {
+ display: block grid;
+}
+
+.inline-grid {
+ display: inline grid;
+}
+
+.inline-ruby {
+ display: inline ruby;
+}
+
+.block-table {
+ display: block table;
+}
+
+.inline-table {
+ display: inline table;
+}
+
+.table-cell-flow {
+ display: table-cell flow;
+}
+
+.table-caption-flow {
+ display: table-caption flow;
+}
+
+.ruby-base-flow {
+ display: ruby-base flow;
+}
+
+.ruby-text-flow {
+ display: ruby-text flow;
+}
+
+.color-function {
+ prop-1: color(display-p3 0.00000 0.51872 0.36985);
+ prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
+ prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1);
+ prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22));
+ prop-5: color(display-p3 1 1 1 1);
+}
+
+.oklab {
+ color-1: oklab(40% 0.001236 0.0039);
+ color-2: oklab(40% 0.1236 0.0039 / 1);
+ color-3: oklab(40% 0.1236 0.0039 / .5);
+ color-4: oklab(40% 0.1236 0.0039 / 100%);
+ color-5: oklab(40% 0.1236 0.0039 / 50%);
+ color-6: oklab(60% 0.1 0);
+ color-7: oklab(60% 0.1 0 foo);
+ color-8: oklab(40.101% 0.1147 0.0453);
+ color-9: oklab(59.686% 0.1009 0.1192);
+ color-10: oklab(65.125% -0.0320 0.1274);
+ color-11: oklab(66.016% -0.1084 0.1114);
+ color-12: oklab(72.322% -0.0465 -0.1150);
+}
+
+.oklch {
+ color-1: oklch(40% 0.1268735435 34.568626);
+ color-2: oklch(40% 0.1268735435 34.568626 / 1);
+ color-3: oklch(40% 0.1268735435 34.568626 / .5);
+ color-4: oklch(40% 0.1268735435 34.568626 / 100%);
+ color-5: oklch(40% 0.1268735435 34.568626 / 50%);
+ color-6: oklch(60% 0.150 0);
+
+ color-7: oklch(60% 0.1250 180);
+ color-8: oklch(60% 0.1250 180deg);
+ color-9: oklch(60% 0.1250 0.5turn);
+ color-10: oklch(60% 0.1250 200grad);
+ color-11: oklch(60% 0.1250 3.14159rad);
+
+ color-12: oklch(60% 0.1250 45);
+ color-13: oklch(60% 0.1250 45deg);
+ color-14: oklch(60% 0.1250 0.125turn);
+ color-15: oklch(60% 0.1250 50grad);
+ color-16: oklch(60% 0.1250 0.785398rad);
+ color-17: oklch(60% 0.1250 0.785398unknown);
+}
+
+.ic-unit {
+ --value-2ic: 'something';
+ text-indent: 2ic;
+ content: var(--value-2ic);
+ left: var(--non-existing, 2ic);
+ width: calc(8ic + 20px);
+ height: 10px;
+ margin: 0.5ic 1ic .2ic;
+ padding: 2 ic;
+}
+
+.unset {
+ clip: unset;
+}
+
+.mod {
+ padding: 8px mod(18px, 5px) 1px calc(mod(15px, 6px) + 50%);
+ transform: rotate(mod(-140deg, -90deg));
+ width: mod(mod(-18px, 5px), 5px);
+}
+
+.rem {
+ padding: 8px rem(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
+ transform: rotate(rem(-140deg, -90deg));
+}
+
+.round {
+ top: round(2.5px, 1px);
+ right: round(nearest, 2.5px, 1px);
+ bottom: round(up, 2.5px, 1px);
+ left: round(down, 2.5px, 1px);
+ inset: round(to-zero, 2.5px, 1px);
+}
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
new file mode 100644
index 000000000..317bd6a49
--- /dev/null
+++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
@@ -0,0 +1,809 @@
+
+
+ .test-nesting-rules p:not(#\##\##\##\##\##\#) {
+ is-layer: C.D;
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5.1;
+ -moz-box-ordinal-group: 6;
+ -ms-flex-order: 5.1;
+ order: 5.1
+ }
+
+:root:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ --order: 1;
+ }
+
+.test-custom-property-fallbacks:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ --firebrick: rgb(179, 35, 35);
+ }
+
+@supports (color: color(display-p3 0 0 0)){
+.test-custom-property-fallbacks:not(#\##\##\##\##\##\##\##\#) {
+ --firebrick: color(display-p3 0.64331 0.19245 0.16771);
+ }
+}
+
+.test-custom-properties:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ -webkit-box-ordinal-group: var(--order);
+ -webkit-order: var(--order);
+ -moz-box-ordinal-group: var(--order);
+ -ms-flex-order: var(--order);
+ order: var(--order);
+ }
+
+.test-image-set-function:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ background-image: url(img/test.png);
+ background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x);
+ background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x);
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ -moz-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ }
+
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 192dpi){
+
+ .test-image-set-function:not(#\##\##\##\##\##\##\##\#) {
+ background-image: url(img/test-2x.png);
+ }
+}
+
+[dir="ltr"] .test-logical-properties-and-values:not(#\##\##\##\##\##\##\##\#){
+ margin: 1px 4px 3px 2px
+}
+
+[dir="rtl"] .test-logical-properties-and-values:not(#\##\##\##\##\##\##\##\#){
+ margin: 1px 2px 3px 4px
+}
+
+.test-logical-properties-and-values:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ -webkit-box-ordinal-group: 4;
+ -webkit-order: 3;
+ -moz-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ -webkit-box-ordinal-group: 5;
+ -webkit-order: 4;
+ -moz-box-ordinal-group: 5;
+ -ms-flex-order: 4;
+ order: 4;
+ }
+
+.test-nesting-rules p:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5;
+ -moz-box-ordinal-group: 6;
+ -ms-flex-order: 5;
+ order: 5
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\#) {
+
+ is-layer: C;
+ -webkit-box-ordinal-group: 7;
+ -webkit-order: 6;
+ -moz-box-ordinal-group: 7;
+ -ms-flex-order: 6;
+ order: 6;
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\##\##\##\##\#),
+#test-is-pseudo:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 8;
+ -webkit-order: 7;
+ -moz-box-ordinal-group: 8;
+ -ms-flex-order: 7;
+ order: 7;
+}
+
+.test-nesting-rules + p:not(#\##\##\##\##\##\##\##\##\##\##\##\#), #test-is-pseudo + p:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 9;
+ -webkit-order: 8;
+ -moz-box-ordinal-group: 9;
+ -ms-flex-order: 8;
+ order: 8;
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\##\##\##\##\#),
+#test-is-pseudo:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+
+ -webkit-box-ordinal-group: 10;
+
+ -webkit-order: 9;
+
+ -moz-box-ordinal-group: 10;
+
+ -ms-flex-order: 9;
+
+ order: 9;
+}
+
+@media (max-width: 30em) {
+ .test-custom-media-queries:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -moz-box-ordinal-group: 11;
+ -ms-flex-order: 10;
+ order: 10;
+ }
+}
+
+@media (min-width: 480px) and (max-width: 767px) {
+ .test-media-query-ranges {
+ is-layer: A;
+ -webkit-box-ordinal-group: 12;
+ -webkit-order: 11;
+ -moz-box-ordinal-group: 12;
+ -ms-flex-order: 11;
+ order: 11;
+ }
+}
+
+@media (color-index: 48) {
+ body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: black;
+ color: white;
+ }
+}
+
+@media (color: 48842621) {
+ body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: black;
+ color: white;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: black;
+ color: white;
+ }
+}
+
+h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h3.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h4.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h5.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h6.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group:13;
+ -webkit-order:12;
+ -moz-box-ordinal-group:13;
+ -ms-flex-order:12;
+ order:12;
+}
+
+.test-case-insensitive-attributes[frame=hsides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 14;
+ -webkit-order: 13;
+ -moz-box-ordinal-group: 14;
+ -ms-flex-order: 13;
+ order: 13;
+}
+
+.test-rebeccapurple-color:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color: #639;
+ -webkit-box-ordinal-group: 15;
+ -webkit-order: 14;
+ -moz-box-ordinal-group: 15;
+ -ms-flex-order: 14;
+ order: 14;
+}
+
+.test-hexadecimal-alpha-notation:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: rgba(243,243,243,0.95294);
+ color: rgba(0,0,0,0.2);
+ -webkit-box-ordinal-group: 16;
+ -webkit-order: 15;
+ -moz-box-ordinal-group: 16;
+ -ms-flex-order: 15;
+ order: 15;
+}
+
+.test-color-functional-notation:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color: rgba(178, 34, 34, 0.5);
+ -webkit-box-ordinal-group: 17;
+ -webkit-order: 16;
+ -moz-box-ordinal-group: 17;
+ -ms-flex-order: 16;
+ order: 16;
+}
+
+.test-lab-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: rgb(179, 35, 35);
+ background-color: color(display-p3 0.64331 0.19245 0.16771);
+ color: rgba(179, 34, 35, 0.5);
+ color: color(display-p3 0.64368 0.19188 0.16791 / 50%);
+ -webkit-box-ordinal-group: 18;
+ -webkit-order: 17;
+ -moz-box-ordinal-group: 18;
+ -ms-flex-order: 17;
+ order: 17;
+}
+
+.test-system-ui-font-family:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+ -webkit-box-ordinal-group: 19;
+ -webkit-order: 18;
+ -moz-box-ordinal-group: 19;
+ -ms-flex-order: 18;
+ order: 18;
+}
+
+.test-font-variant-property:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-font-feature-settings: "smcp";
+ -moz-font-feature-settings: "smcp";
+ font-feature-settings: "smcp";
+ font-variant-caps: small-caps;
+ -webkit-box-ordinal-group: 20;
+ -webkit-order: 19;
+ -moz-box-ordinal-group: 20;
+ -ms-flex-order: 19;
+ order: 19;
+}
+
+.test-all-property:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-animation: none 0s ease 0s 1 normal none running;
+ -moz-animation: none 0s ease 0s 1 normal none running;
+ -o-animation: none 0s ease 0s 1 normal none running;
+ animation: none 0s ease 0s 1 normal none running;
+ -webkit-backface-visibility: visible;
+ -moz-backface-visibility: visible;
+ backface-visibility: visible;
+ background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+ border: medium none currentColor;
+ border-collapse: separate;
+ -webkit-border-image: none;
+ -moz-border-image: none;
+ -o-border-image: none;
+ border-image: none;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+ border-spacing: 0;
+ bottom: auto;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ caption-side: top;
+ clear: none;
+ clip: auto;
+ color: #000;
+ -webkit-columns: auto;
+ -moz-columns: auto;
+ columns: auto;
+ -webkit-column-count: auto;
+ -moz-column-count: auto;
+ column-count: auto;
+ -webkit-column-fill: balance;
+ -moz-column-fill: balance;
+ column-fill: balance;
+ -webkit-column-gap: normal;
+ -moz-column-gap: normal;
+ column-gap: normal;
+ -webkit-column-rule: medium none currentColor;
+ -moz-column-rule: medium none currentColor;
+ column-rule: medium none currentColor;
+ -webkit-column-span: 1;
+ -moz-column-span: 1;
+ column-span: 1;
+ -webkit-column-width: auto;
+ -moz-column-width: auto;
+ column-width: auto;
+ content: normal;
+ counter-increment: none;
+ counter-reset: none;
+ cursor: auto;
+ direction: ltr;
+ display: inline;
+ empty-cells: show;
+ float: none;
+ font-family: serif;
+ font-size: medium;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ font-stretch: normal;
+ line-height: normal;
+ height: auto;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ left: auto;
+ letter-spacing: normal;
+ list-style: disc outside none;
+ margin: 0;
+ max-height: none;
+ max-width: none;
+ min-height: 0;
+ min-width: 0;
+ opacity: 1;
+ orphans: 2;
+ outline: medium none invert;
+ overflow: visible;
+ overflow-x: visible;
+ overflow-y: visible;
+ padding: 0;
+ page-break-after: auto;
+ page-break-before: auto;
+ page-break-inside: auto;
+ -webkit-perspective: none;
+ -moz-perspective: none;
+ perspective: none;
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+ position: static;
+ right: auto;
+ -moz-tab-size: 8;
+ -o-tab-size: 8;
+ tab-size: 8;
+ table-layout: auto;
+ text-align: left;
+ -moz-text-align-last: auto;
+ text-align-last: auto;
+ text-decoration: none;
+ text-indent: 0;
+ text-shadow: none;
+ text-transform: none;
+ top: auto;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ -o-transform: none;
+ transform: none;
+ -webkit-transform-origin: 50% 50% 0;
+ -moz-transform-origin: 50% 50% 0;
+ -ms-transform-origin: 50% 50% 0;
+ -o-transform-origin: 50% 50% 0;
+ transform-origin: 50% 50% 0;
+ -webkit-transform-style: flat;
+ -moz-transform-style: flat;
+ transform-style: flat;
+ -webkit-transition: none 0s ease 0s;
+ -o-transition: none 0s ease 0s;
+ -moz-transition: none 0s ease 0s;
+ transition: none 0s ease 0s;
+ unicode-bidi: normal;
+ vertical-align: baseline;
+ visibility: visible;
+ white-space: normal;
+ widows: 2;
+ width: auto;
+ word-spacing: normal;
+ z-index: auto;
+ all: initial;
+ -webkit-box-ordinal-group: 21;
+ -webkit-order: 20;
+ -moz-box-ordinal-group: 21;
+ -ms-flex-order: 20;
+ order: 20;
+}
+
+.test-matches-pseudo-class:matches( .special,:first-child):not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 22;
+ -webkit-order: 21;
+ -moz-box-ordinal-group: 22;
+ -ms-flex-order: 21;
+ order: 21;
+}
+
+.test-not-pseudo-class:not(:first-child):not(.special):not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 23;
+ -webkit-order: 22;
+ -moz-box-ordinal-group: 23;
+ -ms-flex-order: 22;
+ order: 22;
+}
+
+.test-any-link-pseudo-class:link:not(#\##\##\##\##\##\##\##\##\##\##\##\#), .test-any-link-pseudo-class:visited:not(#\##\##\##\##\##\##\##\##\##\##\##\#), area.test-any-link-pseudo-class[href]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 24;
+ -webkit-order: 23;
+ -moz-box-ordinal-group: 24;
+ -ms-flex-order: 23;
+ order: 23;
+}
+
+.test-any-link-pseudo-class:-webkit-any-link:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 24;
+ -webkit-order: 23;
+ order: 23;
+}
+
+.test-any-link-pseudo-class:-moz-any-link:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -moz-box-ordinal-group: 24;
+ order: 23;
+}
+
+.test-any-link-pseudo-class:any-link:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 24;
+ -webkit-order: 23;
+ -moz-box-ordinal-group: 24;
+ -ms-flex-order: 23;
+ order: 23;
+}
+
+[dir="rtl"] .test-dir-pseudo-class:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 25;
+ -webkit-order: 24;
+ -moz-box-ordinal-group: 25;
+ -ms-flex-order: 24;
+ order: 24;
+}
+
+.test-overflow-wrap-property:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 26;
+ -webkit-order: 25;
+ -moz-box-ordinal-group: 26;
+ -ms-flex-order: 25;
+ order: 25;
+ word-wrap: break-word;
+}
+
+.test-focus-visible-pseudo-class.focus-visible:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 27;
+ -webkit-order: 26;
+ -moz-box-ordinal-group: 27;
+ -ms-flex-order: 26;
+ order: 26;
+}
+
+.test-focus-visible-pseudo-class:focus-visible:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 27;
+ -webkit-order: 26;
+ -moz-box-ordinal-group: 27;
+ -ms-flex-order: 26;
+ order: 26;
+}
+
+.test-double-position-gradients:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
+ background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
+}
+
+.test-blank-pseudo-class[blank]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.test-blank-pseudo-class:blank:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.test-has-pseudo-class[\:has\(.inner-class\)]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.test-has-pseudo-class:has(.inner-class):not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.a:focus:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.a:hover:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.b:focus:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.b:hover:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.a.c > .b + .d:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 29;
+ -webkit-order: 28;
+ -moz-box-ordinal-group: 29;
+ -ms-flex-order: 28;
+ order: 28;
+ }
+
+.test-hwb-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: rgba(0, 195, 255, .5);
+}
+
+.test-opacity-percent:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ opacity: 0.42;
+}
+
+.clamp-same-unit:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ width: max(10px, min(64px, 80px));
+}
+
+.complex-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ width: max(-webkit-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em)));
+ width: max(-moz-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em)));
+ width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em)));
+}
+
+.clamp-different-units:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ width: max(10%, min(2px, 4rem));
+}
+
+.mixed-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr);
+ margin: max(1rem, min(2%, 3rem)) 4vh;
+}
+
+.calc-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ margin: 0 40px 0 -webkit-calc(-1 * max(32px, min(16vw, 64px)));
+ margin: 0 40px 0 -moz-calc(-1 * max(32px, min(16vw, 64px)));
+ margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px)));
+}
+
+.multiple-calc-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * max(4px, min(5vw, 6px)));
+ margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * max(4px, min(5vw, 6px)));
+ margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px)));
+}
+
+.nested-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem));
+}
+
+@font-face {
+ font-family: 'A';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(a) format("woff2");
+}
+
+.block-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: block;
+ display: block flow;
+}
+
+.block-flow-root:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: flow-root;
+ display: block flow-root;
+}
+
+.inline-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline;
+ display: inline flow;
+}
+
+.inline-flow-root:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline-block;
+ display: inline flow-root;
+}
+
+.run-in-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: run-in;
+ display: run-in flow;
+}
+
+.list-item-block-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: list-item;
+ display: list-item block flow;
+}
+
+.inline-flow-list-item:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline list-item;
+ display: inline flow list-item;
+}
+
+.block-flex:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ display: block flex;
+}
+
+.inline-flex:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -moz-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ display: inline flex;
+}
+
+.block-grid:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: grid;
+ display: block grid;
+}
+
+.inline-grid:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline-grid;
+ display: inline grid;
+}
+
+.inline-ruby:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: ruby;
+ display: inline ruby;
+}
+
+.block-table:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: table;
+ display: block table;
+}
+
+.inline-table:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline-table;
+ display: inline table;
+}
+
+.table-cell-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: table-cell;
+ display: table-cell flow;
+}
+
+.table-caption-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: table-caption;
+ display: table-caption flow;
+}
+
+.ruby-base-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: ruby-base;
+ display: ruby-base flow;
+}
+
+.ruby-text-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: ruby-text;
+ display: ruby-text flow;
+}
+
+.color-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ prop-1: rgb(0, 132, 94);
+ prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
+ prop-3: rgba(7,3,1,1);
+ prop-4: rgba(7,3,1,-webkit-calc(33 / 22));
+ prop-4: rgba(7,3,1,-moz-calc(33 / 22));
+ prop-4: rgba(7,3,1,calc(33 / 22));
+ prop-5: rgb(255, 255, 255);
+}
+
+.oklab:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color-1: rgb(73, 71, 69);
+ color-1: color(display-p3 0.28515 0.27983 0.27246);
+ color-2: rgba(121, 34, 67, 1);
+ color-2: color(display-p3 0.43853 0.16014 0.26019 / 1);
+ color-3: rgba(121, 34, 67, .5);
+ color-3: color(display-p3 0.43853 0.16014 0.26019 / .5);
+ color-4: rgba(121, 34, 67, 1);
+ color-4: color(display-p3 0.43853 0.16014 0.26019 / 100%);
+ color-5: rgba(121, 34, 67, 0.5);
+ color-5: color(display-p3 0.43853 0.16014 0.26019 / 50%);
+ color-6: rgb(177, 102, 126);
+ color-6: color(display-p3 0.65225 0.41303 0.49110);
+ color-7: oklab(60% 0.1 0 foo);
+ color-8: rgb(125, 35, 41);
+ color-8: color(display-p3 0.45163 0.16556 0.17021);
+ color-9: rgb(198, 93, 7);
+ color-9: color(display-p3 0.72414 0.38678 0.14879);
+ color-10: rgb(157, 147, 24);
+ color-10: color(display-p3 0.60930 0.57658 0.20615);
+ color-11: rgb(104, 166, 57);
+ color-11: color(display-p3 0.46287 0.64491 0.28775);
+ color-12: rgb(98, 172, 239);
+ color-12: color(display-p3 0.45207 0.66555 0.91656);
+}
+
+.oklch:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color-1: rgb(126, 37, 15);
+ color-1: color(display-p3 0.45368 0.16978 0.09411);
+ color-2: rgba(126, 37, 15, 1);
+ color-2: color(display-p3 0.45368 0.16978 0.09411 / 1);
+ color-3: rgba(126, 37, 15, .5);
+ color-3: color(display-p3 0.45368 0.16978 0.09411 / .5);
+ color-4: rgba(126, 37, 15, 1);
+ color-4: color(display-p3 0.45368 0.16978 0.09411 / 100%);
+ color-5: rgba(126, 37, 15, 0.5);
+ color-5: color(display-p3 0.45368 0.16978 0.09411 / 50%);
+ color-6: rgb(197, 84, 124);
+ color-6: color(display-p3 0.71738 0.35446 0.48551);
+
+ color-7: rgb(0, 152, 131);
+
+ color-7: color(display-p3 0.19244 0.58461 0.51559);
+ color-8: rgb(0, 152, 131);
+ color-8: color(display-p3 0.19244 0.58461 0.51559);
+ color-9: rgb(0, 152, 131);
+ color-9: color(display-p3 0.19244 0.58461 0.51559);
+ color-10: rgb(0, 152, 131);
+ color-10: color(display-p3 0.19244 0.58461 0.51559);
+ color-11: rgb(0, 152, 131);
+ color-11: color(display-p3 0.19244 0.58461 0.51559);
+
+ color-12: rgb(188, 101, 59);
+
+ color-12: color(display-p3 0.69260 0.41373 0.26821);
+ color-13: rgb(188, 101, 59);
+ color-13: color(display-p3 0.69260 0.41373 0.26821);
+ color-14: rgb(188, 101, 59);
+ color-14: color(display-p3 0.69260 0.41373 0.26821);
+ color-15: rgb(188, 101, 59);
+ color-15: color(display-p3 0.69260 0.41373 0.26821);
+ color-16: rgb(188, 101, 59);
+ color-16: color(display-p3 0.69260 0.41373 0.26821);
+ color-17: oklch(60% 0.1250 0.785398unknown);
+}
+
+.ic-unit:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ --value-2ic: 'something';
+ text-indent: 2em;
+ content: var(--value-2ic);
+ left: 2em;
+ left: 2em;
+ left: var(--non-existing, 2em);
+ width: -webkit-calc(8em + 20px);
+ width: -moz-calc(8em + 20px);
+ width: calc(8em + 20px);
+ height: 10px;
+ margin: 0.5em 1em .2em;
+ padding: 2 ic;
+}
+
+.unset:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ clip: auto;
+ clip: initial;
+}
+
+.mod:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ padding: 8px 3px 1px -webkit-calc(3px + 50%);
+ padding: 8px 3px 1px -moz-calc(3px + 50%);
+ padding: 8px 3px 1px calc(3px + 50%);
+ -webkit-transform: rotate(-50deg);
+ -moz-transform: rotate(-50deg);
+ -ms-transform: rotate(-50deg);
+ -o-transform: rotate(-50deg);
+ transform: rotate(-50deg);
+ width: 2px;
+}
+
+.rem:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ padding: 8px 3px 1px -webkit-calc(3px + 50%);
+ padding: 8px 3px 1px -moz-calc(3px + 50%);
+ padding: 8px 3px 1px calc(3px + 50%);
+ -webkit-transform: rotate(-50deg);
+ -moz-transform: rotate(-50deg);
+ -ms-transform: rotate(-50deg);
+ -o-transform: rotate(-50deg);
+ transform: rotate(-50deg);
+}
+
+.round:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ top: 3px;
+ right: 3px;
+ bottom: 3px;
+ left: 2px;
+ top: 2px;
+ right: 2px;
+ bottom: 2px;
+ left: 2px;
+}
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
new file mode 100644
index 000000000..ec1cdec06
--- /dev/null
+++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
@@ -0,0 +1,990 @@
+
+
+ .test-nesting-rules p:not(#\##\##\##\##\##\#) {
+ is-layer: C.D;
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5.1;
+ -moz-box-ordinal-group: 6;
+ -ms-flex-order: 5.1;
+ order: 5.1
+ }
+
+:root:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ --order: 1;
+ }
+
+.test-custom-property-fallbacks:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ --firebrick: rgb(179, 35, 35);
+ }
+
+@supports (color: color(display-p3 0 0 0)){
+.test-custom-property-fallbacks:not(#\##\##\##\##\##\##\##\#) {
+ --firebrick: color(display-p3 0.64331 0.19245 0.16771);
+ }
+}
+
+@supports (color: lab(0% 0 0)){
+.test-custom-property-fallbacks:not(#\##\##\##\##\##\##\##\#) {
+ --firebrick: lab(40% 56.6 39);
+ }
+}
+
+.test-custom-properties:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ -webkit-box-ordinal-group: var(--order);
+ -webkit-order: var(--order);
+ -moz-box-ordinal-group: var(--order);
+ -ms-flex-order: var(--order);
+ order: var(--order);
+ }
+
+.test-image-set-function:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ background-image: url(img/test.png);
+ background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x);
+ background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x);
+ -webkit-box-ordinal-group: 3;
+ -webkit-order: 2;
+ -moz-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ }
+
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 192dpi){
+
+ .test-image-set-function:not(#\##\##\##\##\##\##\##\#) {
+ background-image: url(img/test-2x.png);
+ }
+}
+
+[dir="ltr"] .test-logical-properties-and-values:not(#\##\##\##\##\##\##\##\#){
+ margin: 1px 4px 3px 2px
+}
+
+.test-logical-properties-and-values:dir(ltr):not(#\##\##\##\##\##\##\##\#){
+ margin: 1px 4px 3px 2px
+}
+
+[dir="rtl"] .test-logical-properties-and-values:not(#\##\##\##\##\##\##\##\#){
+ margin: 1px 2px 3px 4px
+}
+
+.test-logical-properties-and-values:dir(rtl):not(#\##\##\##\##\##\##\##\#){
+ margin: 1px 2px 3px 4px
+}
+
+.test-logical-properties-and-values:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ margin: logical 1px 2px 3px 4px;
+ -webkit-box-ordinal-group: 4;
+ -webkit-order: 3;
+ -moz-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-block: 5px;
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ -webkit-box-ordinal-group: 5;
+ -webkit-order: 4;
+ -moz-box-ordinal-group: 5;
+ -ms-flex-order: 4;
+ order: 4;
+ }
+
+.test-nesting-rules p:not(#\##\##\##\##\##\##\##\#) {
+ is-layer: C;
+ -webkit-box-ordinal-group: 6;
+ -webkit-order: 5;
+ -moz-box-ordinal-group: 6;
+ -ms-flex-order: 5;
+ order: 5
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\#) {
+
+ is-layer: C;
+ -webkit-box-ordinal-group: 7;
+ -webkit-order: 6;
+ -moz-box-ordinal-group: 7;
+ -ms-flex-order: 6;
+ order: 6;
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\##\##\##\##\#),
+#test-is-pseudo:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 8;
+ -webkit-order: 7;
+ -moz-box-ordinal-group: 8;
+ -ms-flex-order: 7;
+ order: 7;
+}
+
+.test-nesting-rules + p:not(#\##\##\##\##\##\##\##\##\##\##\##\#), #test-is-pseudo + p:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 9;
+ -webkit-order: 8;
+ -moz-box-ordinal-group: 9;
+ -ms-flex-order: 8;
+ order: 8;
+ }
+
+.test-nesting-rules:not(#\##\##\##\##\##\##\##\##\##\##\##\#),
+#test-is-pseudo:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+
+ -webkit-box-ordinal-group: 10;
+
+ -webkit-order: 9;
+
+ -moz-box-ordinal-group: 10;
+
+ -ms-flex-order: 9;
+
+ order: 9;
+}
+
+@custom-media --narrow-window (max-width: 30em);
+
+@media (max-width: 30em) {
+ .test-custom-media-queries:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -moz-box-ordinal-group: 11;
+ -ms-flex-order: 10;
+ order: 10;
+ }
+}
+
+@media (--narrow-window) {
+ .test-custom-media-queries:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 11;
+ -webkit-order: 10;
+ -moz-box-ordinal-group: 11;
+ -ms-flex-order: 10;
+ order: 10;
+ }
+}
+
+@media (min-width: 480px) and (max-width: 767px) {
+ .test-media-query-ranges {
+ is-layer: A;
+ -webkit-box-ordinal-group: 12;
+ -webkit-order: 11;
+ -moz-box-ordinal-group: 12;
+ -ms-flex-order: 11;
+ order: 11;
+ }
+}
+
+@custom-media --dark-mode (prefers-color-scheme: dark);
+
+@media (color-index: 48) {
+ body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: black;
+ color: white;
+ }
+}
+
+@media (color: 48842621) {
+ body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: black;
+ color: white;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: black;
+ color: white;
+ }
+}
+
+@media (--dark-mode) {
+ body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: black;
+ color: white;
+ }
+}
+
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+
+h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h3.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h4.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h5.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h6.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group:13;
+ -webkit-order:12;
+ -moz-box-ordinal-group:13;
+ -ms-flex-order:12;
+ order:12;
+}
+
+.test-custom-selectors:--heading:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group:13;
+ -webkit-order:12;
+ -moz-box-ordinal-group:13;
+ -ms-flex-order:12;
+ order:12;
+}
+
+.test-case-insensitive-attributes[frame=hsides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSides]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 14;
+ -webkit-order: 13;
+ -moz-box-ordinal-group: 14;
+ -ms-flex-order: 13;
+ order: 13;
+}
+
+.test-rebeccapurple-color:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color: #639;
+ color: rebeccapurple;
+ -webkit-box-ordinal-group: 15;
+ -webkit-order: 14;
+ -moz-box-ordinal-group: 15;
+ -ms-flex-order: 14;
+ order: 14;
+}
+
+.test-hexadecimal-alpha-notation:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: rgba(243,243,243,0.95294);
+ background-color: #f3f3f3f3;
+ color: rgba(0,0,0,0.2);
+ color: #0003;
+ -webkit-box-ordinal-group: 16;
+ -webkit-order: 15;
+ -moz-box-ordinal-group: 16;
+ -ms-flex-order: 15;
+ order: 15;
+}
+
+.test-color-functional-notation:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color: rgba(178, 34, 34, 0.5);
+ color: rgb(70% 13.5% 13.5% / 50%);
+ -webkit-box-ordinal-group: 17;
+ -webkit-order: 16;
+ -moz-box-ordinal-group: 17;
+ -ms-flex-order: 16;
+ order: 16;
+}
+
+.test-lab-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: rgb(179, 35, 35);
+ background-color: color(display-p3 0.64331 0.19245 0.16771);
+ background-color: lab(40% 56.6 39);
+ color: rgba(179, 34, 35, 0.5);
+ color: color(display-p3 0.64368 0.19188 0.16791 / 50%);
+ color: lch(40% 68.8 34.5 / 50%);
+ -webkit-box-ordinal-group: 18;
+ -webkit-order: 17;
+ -moz-box-ordinal-group: 18;
+ -ms-flex-order: 17;
+ order: 17;
+}
+
+.test-system-ui-font-family:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+ -webkit-box-ordinal-group: 19;
+ -webkit-order: 18;
+ -moz-box-ordinal-group: 19;
+ -ms-flex-order: 18;
+ order: 18;
+}
+
+.test-font-variant-property:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-font-feature-settings: "smcp";
+ -moz-font-feature-settings: "smcp";
+ font-feature-settings: "smcp";
+ font-variant-caps: small-caps;
+ -webkit-box-ordinal-group: 20;
+ -webkit-order: 19;
+ -moz-box-ordinal-group: 20;
+ -ms-flex-order: 19;
+ order: 19;
+}
+
+.test-all-property:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-animation: none 0s ease 0s 1 normal none running;
+ -moz-animation: none 0s ease 0s 1 normal none running;
+ -o-animation: none 0s ease 0s 1 normal none running;
+ animation: none 0s ease 0s 1 normal none running;
+ -webkit-backface-visibility: visible;
+ -moz-backface-visibility: visible;
+ backface-visibility: visible;
+ background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+ border: medium none currentColor;
+ border-collapse: separate;
+ -webkit-border-image: none;
+ -moz-border-image: none;
+ -o-border-image: none;
+ border-image: none;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+ border-spacing: 0;
+ bottom: auto;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ caption-side: top;
+ clear: none;
+ clip: auto;
+ color: #000;
+ -webkit-columns: auto;
+ -moz-columns: auto;
+ columns: auto;
+ -webkit-column-count: auto;
+ -moz-column-count: auto;
+ column-count: auto;
+ -webkit-column-fill: balance;
+ -moz-column-fill: balance;
+ column-fill: balance;
+ -webkit-column-gap: normal;
+ -moz-column-gap: normal;
+ column-gap: normal;
+ -webkit-column-rule: medium none currentColor;
+ -moz-column-rule: medium none currentColor;
+ column-rule: medium none currentColor;
+ -webkit-column-span: 1;
+ -moz-column-span: 1;
+ column-span: 1;
+ -webkit-column-width: auto;
+ -moz-column-width: auto;
+ column-width: auto;
+ content: normal;
+ counter-increment: none;
+ counter-reset: none;
+ cursor: auto;
+ direction: ltr;
+ display: inline;
+ empty-cells: show;
+ float: none;
+ font-family: serif;
+ font-size: medium;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ font-stretch: normal;
+ line-height: normal;
+ height: auto;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ left: auto;
+ letter-spacing: normal;
+ list-style: disc outside none;
+ margin: 0;
+ max-height: none;
+ max-width: none;
+ min-height: 0;
+ min-width: 0;
+ opacity: 1;
+ orphans: 2;
+ outline: medium none invert;
+ overflow: visible;
+ overflow-x: visible;
+ overflow-y: visible;
+ padding: 0;
+ page-break-after: auto;
+ page-break-before: auto;
+ page-break-inside: auto;
+ -webkit-perspective: none;
+ -moz-perspective: none;
+ perspective: none;
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+ position: static;
+ right: auto;
+ -moz-tab-size: 8;
+ -o-tab-size: 8;
+ tab-size: 8;
+ table-layout: auto;
+ text-align: left;
+ -moz-text-align-last: auto;
+ text-align-last: auto;
+ text-decoration: none;
+ text-indent: 0;
+ text-shadow: none;
+ text-transform: none;
+ top: auto;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ -o-transform: none;
+ transform: none;
+ -webkit-transform-origin: 50% 50% 0;
+ -moz-transform-origin: 50% 50% 0;
+ -ms-transform-origin: 50% 50% 0;
+ -o-transform-origin: 50% 50% 0;
+ transform-origin: 50% 50% 0;
+ -webkit-transform-style: flat;
+ -moz-transform-style: flat;
+ transform-style: flat;
+ -webkit-transition: none 0s ease 0s;
+ -o-transition: none 0s ease 0s;
+ -moz-transition: none 0s ease 0s;
+ transition: none 0s ease 0s;
+ unicode-bidi: normal;
+ vertical-align: baseline;
+ visibility: visible;
+ white-space: normal;
+ widows: 2;
+ width: auto;
+ word-spacing: normal;
+ z-index: auto;
+ all: initial;
+ -webkit-box-ordinal-group: 21;
+ -webkit-order: 20;
+ -moz-box-ordinal-group: 21;
+ -ms-flex-order: 20;
+ order: 20;
+}
+
+.test-matches-pseudo-class:matches( .special,:first-child):not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 22;
+ -webkit-order: 21;
+ -moz-box-ordinal-group: 22;
+ -ms-flex-order: 21;
+ order: 21;
+}
+
+.test-not-pseudo-class:not(:first-child):not(.special):not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 23;
+ -webkit-order: 22;
+ -moz-box-ordinal-group: 23;
+ -ms-flex-order: 22;
+ order: 22;
+}
+
+.test-any-link-pseudo-class:link:not(#\##\##\##\##\##\##\##\##\##\##\##\#), .test-any-link-pseudo-class:visited:not(#\##\##\##\##\##\##\##\##\##\##\##\#), area.test-any-link-pseudo-class[href]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 24;
+ -webkit-order: 23;
+ -moz-box-ordinal-group: 24;
+ -ms-flex-order: 23;
+ order: 23;
+}
+
+.test-any-link-pseudo-class:-webkit-any-link:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 24;
+ -webkit-order: 23;
+ order: 23;
+}
+
+.test-any-link-pseudo-class:-moz-any-link:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -moz-box-ordinal-group: 24;
+ order: 23;
+}
+
+.test-any-link-pseudo-class:any-link:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 24;
+ -webkit-order: 23;
+ -moz-box-ordinal-group: 24;
+ -ms-flex-order: 23;
+ order: 23;
+}
+
+[dir="rtl"] .test-dir-pseudo-class:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 25;
+ -webkit-order: 24;
+ -moz-box-ordinal-group: 25;
+ -ms-flex-order: 24;
+ order: 24;
+}
+
+.test-dir-pseudo-class:dir(rtl):not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 25;
+ -webkit-order: 24;
+ -moz-box-ordinal-group: 25;
+ -ms-flex-order: 24;
+ order: 24;
+}
+
+.test-overflow-wrap-property:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 26;
+ -webkit-order: 25;
+ -moz-box-ordinal-group: 26;
+ -ms-flex-order: 25;
+ order: 25;
+ word-wrap: break-word;
+}
+
+.test-focus-visible-pseudo-class.focus-visible:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 27;
+ -webkit-order: 26;
+ -moz-box-ordinal-group: 27;
+ -ms-flex-order: 26;
+ order: 26;
+}
+
+.test-focus-visible-pseudo-class:focus-visible:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ -webkit-box-ordinal-group: 27;
+ -webkit-order: 26;
+ -moz-box-ordinal-group: 27;
+ -ms-flex-order: 26;
+ order: 26;
+}
+
+.test-double-position-gradients:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg);
+ background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
+}
+
+.test-blank-pseudo-class[blank]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.test-blank-pseudo-class:blank:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.test-has-pseudo-class[\:has\(.inner-class\)]:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.test-has-pseudo-class:has(.inner-class):not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: yellow;
+}
+
+.a:focus:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.a:hover:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.b:focus:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.b:hover:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+:is(.a, .b):is(:focus, :hover):not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 28;
+ -webkit-order: 27;
+ -moz-box-ordinal-group: 28;
+ -ms-flex-order: 27;
+ order: 27;
+ }
+
+.a.c > .b + .d:not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 29;
+ -webkit-order: 28;
+ -moz-box-ordinal-group: 29;
+ -ms-flex-order: 28;
+ order: 28;
+ }
+
+:is(.a > .b) + :is(.c > .d):not(#\##\##\##\#) {
+ -webkit-box-ordinal-group: 29;
+ -webkit-order: 28;
+ -moz-box-ordinal-group: 29;
+ -ms-flex-order: 28;
+ order: 28;
+ }
+
+.test-hwb-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ background-color: rgba(0, 195, 255, .5);
+ background-color: hwb(194 0% 0% / .5);
+}
+
+.test-opacity-percent:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ opacity: 0.42;
+ opacity: 42%;
+}
+
+.clamp-same-unit:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ width: max(10px, min(64px, 80px));
+ width: clamp(10px, 64px, 80px);
+}
+
+.complex-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ width: max(-webkit-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em)));
+ width: max(-moz-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em)));
+ width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em)));
+ width: clamp(-webkit-calc(100% - 10px), min(10px, 100%), max(40px, 4em));
+ width: clamp(-moz-calc(100% - 10px), min(10px, 100%), max(40px, 4em));
+ width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em));
+}
+
+.clamp-different-units:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ width: max(10%, min(2px, 4rem));
+ width: clamp(10%, 2px, 4rem);
+}
+
+.mixed-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr);
+ grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr);
+ margin: max(1rem, min(2%, 3rem)) 4vh;
+ margin: clamp(1rem, 2%, 3rem) 4vh;
+}
+
+.calc-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ margin: 0 40px 0 -webkit-calc(-1 * max(32px, min(16vw, 64px)));
+ margin: 0 40px 0 -moz-calc(-1 * max(32px, min(16vw, 64px)));
+ margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px)));
+ margin: 0 40px 0 -webkit-calc(-1 * clamp(32px, 16vw, 64px));
+ margin: 0 40px 0 -moz-calc(-1 * clamp(32px, 16vw, 64px));
+ margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px));
+}
+
+.multiple-calc-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * max(4px, min(5vw, 6px)));
+ margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * max(4px, min(5vw, 6px)));
+ margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px)));
+ margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * clamp(4px, 5vw, 6px));
+ margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * clamp(4px, 5vw, 6px));
+ margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * clamp(4px, 5vw, 6px));
+ margin: -webkit-calc(-1 * max(4px, min(5vw, 6px))) -webkit-calc(-1 * max(4px, min(5vw, 6px)));
+ margin: -moz-calc(-1 * max(4px, min(5vw, 6px))) -moz-calc(-1 * max(4px, min(5vw, 6px)));
+ margin: calc(-1 * max(4px, min(5vw, 6px))) calc(-1 * max(4px, min(5vw, 6px)));
+ margin: -webkit-calc(-1 * max(4px, min(5vw, 6px))) -webkit-calc(-1 * clamp(4px, 5vw, 6px));
+ margin: -moz-calc(-1 * max(4px, min(5vw, 6px))) -moz-calc(-1 * clamp(4px, 5vw, 6px));
+ margin: calc(-1 * max(4px, min(5vw, 6px))) calc(-1 * clamp(4px, 5vw, 6px));
+ margin: -webkit-calc(-1 * clamp(1px, 2vw, 3px)) -webkit-calc(-1 * clamp(4px, 5vw, 6px));
+ margin: -moz-calc(-1 * clamp(1px, 2vw, 3px)) -moz-calc(-1 * clamp(4px, 5vw, 6px));
+ margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px));
+}
+
+.nested-clamp:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem));
+ font-size: max(clamp(1rem, 2vw, 3rem), min(4vw, 5rem));
+ font-size: max(1rem, min(2vw, 3rem));
+ font-size: clamp(clamp(1rem, 2vw, 3rem), 4vw, 5rem);
+}
+
+@font-face {
+ font-family: 'A';
+ font-style: normal;
+ font-weight: 300;
+ font-display: swap;
+ src: url(a) format("woff2");
+ src: url(a) format(woff2);
+}
+
+.block-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: block;
+ display: block flow;
+}
+
+.block-flow-root:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: flow-root;
+ display: block flow-root;
+}
+
+.inline-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline;
+ display: inline flow;
+}
+
+.inline-flow-root:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline-block;
+ display: inline flow-root;
+}
+
+.run-in-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: run-in;
+ display: run-in flow;
+}
+
+.list-item-block-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: list-item;
+ display: list-item block flow;
+}
+
+.inline-flow-list-item:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline list-item;
+ display: inline flow list-item;
+}
+
+.block-flex:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ display: block flex;
+}
+
+.inline-flex:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -moz-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ display: inline flex;
+}
+
+.block-grid:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: grid;
+ display: block grid;
+}
+
+.inline-grid:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline-grid;
+ display: inline grid;
+}
+
+.inline-ruby:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: ruby;
+ display: inline ruby;
+}
+
+.block-table:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: table;
+ display: block table;
+}
+
+.inline-table:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: inline-table;
+ display: inline table;
+}
+
+.table-cell-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: table-cell;
+ display: table-cell flow;
+}
+
+.table-caption-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: table-caption;
+ display: table-caption flow;
+}
+
+.ruby-base-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: ruby-base;
+ display: ruby-base flow;
+}
+
+.ruby-text-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ display: ruby-text;
+ display: ruby-text flow;
+}
+
+.color-function:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ prop-1: rgb(0, 132, 94);
+ prop-1: rgb(0,132,94);
+ prop-1: color(display-p3 0.00000 0.51872 0.36985);
+ prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
+ prop-3: rgba(7,3,1,1);
+ prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1);
+ prop-4: rgba(7,3,1,-webkit-calc(33 / 22));
+ prop-4: rgba(7,3,1,-moz-calc(33 / 22));
+ prop-4: rgba(7,3,1,calc(33 / 22));
+ prop-4: color(display-p3 0.02472 0.01150 0.00574 / -webkit-calc(33 / 22));
+ prop-4: color(display-p3 0.02472 0.01150 0.00574 / -moz-calc(33 / 22));
+ prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22));
+ prop-5: rgb(255, 255, 255);
+ prop-5: rgb(255,255,255);
+ prop-5: color(display-p3 1 1 1 1);
+}
+
+.oklab:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color-1: rgb(73, 71, 69);
+ color-1: color(display-p3 0.28515 0.27983 0.27246);
+ color-1: oklab(40% 0.001236 0.0039);
+ color-2: rgba(121, 34, 67, 1);
+ color-2: color(display-p3 0.43853 0.16014 0.26019 / 1);
+ color-2: oklab(40% 0.1236 0.0039 / 1);
+ color-3: rgba(121, 34, 67, .5);
+ color-3: color(display-p3 0.43853 0.16014 0.26019 / .5);
+ color-3: oklab(40% 0.1236 0.0039 / .5);
+ color-4: rgba(121, 34, 67, 1);
+ color-4: color(display-p3 0.43853 0.16014 0.26019 / 100%);
+ color-4: oklab(40% 0.1236 0.0039 / 100%);
+ color-5: rgba(121, 34, 67, 0.5);
+ color-5: color(display-p3 0.43853 0.16014 0.26019 / 50%);
+ color-5: oklab(40% 0.1236 0.0039 / 50%);
+ color-6: rgb(177, 102, 126);
+ color-6: color(display-p3 0.65225 0.41303 0.49110);
+ color-6: oklab(60% 0.1 0);
+ color-7: oklab(60% 0.1 0 foo);
+ color-8: rgb(125, 35, 41);
+ color-8: color(display-p3 0.45163 0.16556 0.17021);
+ color-8: oklab(40.101% 0.1147 0.0453);
+ color-9: rgb(198, 93, 7);
+ color-9: color(display-p3 0.72414 0.38678 0.14879);
+ color-9: oklab(59.686% 0.1009 0.1192);
+ color-10: rgb(157, 147, 24);
+ color-10: color(display-p3 0.60930 0.57658 0.20615);
+ color-10: oklab(65.125% -0.0320 0.1274);
+ color-11: rgb(104, 166, 57);
+ color-11: color(display-p3 0.46287 0.64491 0.28775);
+ color-11: oklab(66.016% -0.1084 0.1114);
+ color-12: rgb(98, 172, 239);
+ color-12: color(display-p3 0.45207 0.66555 0.91656);
+ color-12: oklab(72.322% -0.0465 -0.1150);
+}
+
+.oklch:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ color-1: rgb(126, 37, 15);
+ color-1: color(display-p3 0.45368 0.16978 0.09411);
+ color-1: oklch(40% 0.1268735435 34.568626);
+ color-2: rgba(126, 37, 15, 1);
+ color-2: color(display-p3 0.45368 0.16978 0.09411 / 1);
+ color-2: oklch(40% 0.1268735435 34.568626 / 1);
+ color-3: rgba(126, 37, 15, .5);
+ color-3: color(display-p3 0.45368 0.16978 0.09411 / .5);
+ color-3: oklch(40% 0.1268735435 34.568626 / .5);
+ color-4: rgba(126, 37, 15, 1);
+ color-4: color(display-p3 0.45368 0.16978 0.09411 / 100%);
+ color-4: oklch(40% 0.1268735435 34.568626 / 100%);
+ color-5: rgba(126, 37, 15, 0.5);
+ color-5: color(display-p3 0.45368 0.16978 0.09411 / 50%);
+ color-5: oklch(40% 0.1268735435 34.568626 / 50%);
+ color-6: rgb(197, 84, 124);
+ color-6: color(display-p3 0.71738 0.35446 0.48551);
+ color-6: oklch(60% 0.150 0);
+
+ color-7: rgb(0, 152, 131);
+
+ color-7: color(display-p3 0.19244 0.58461 0.51559);
+
+ color-7: oklch(60% 0.1250 180);
+ color-8: rgb(0, 152, 131);
+ color-8: color(display-p3 0.19244 0.58461 0.51559);
+ color-8: oklch(60% 0.1250 180deg);
+ color-9: rgb(0, 152, 131);
+ color-9: color(display-p3 0.19244 0.58461 0.51559);
+ color-9: oklch(60% 0.1250 0.5turn);
+ color-10: rgb(0, 152, 131);
+ color-10: color(display-p3 0.19244 0.58461 0.51559);
+ color-10: oklch(60% 0.1250 200grad);
+ color-11: rgb(0, 152, 131);
+ color-11: color(display-p3 0.19244 0.58461 0.51559);
+ color-11: oklch(60% 0.1250 3.14159rad);
+
+ color-12: rgb(188, 101, 59);
+
+ color-12: color(display-p3 0.69260 0.41373 0.26821);
+
+ color-12: oklch(60% 0.1250 45);
+ color-13: rgb(188, 101, 59);
+ color-13: color(display-p3 0.69260 0.41373 0.26821);
+ color-13: oklch(60% 0.1250 45deg);
+ color-14: rgb(188, 101, 59);
+ color-14: color(display-p3 0.69260 0.41373 0.26821);
+ color-14: oklch(60% 0.1250 0.125turn);
+ color-15: rgb(188, 101, 59);
+ color-15: color(display-p3 0.69260 0.41373 0.26821);
+ color-15: oklch(60% 0.1250 50grad);
+ color-16: rgb(188, 101, 59);
+ color-16: color(display-p3 0.69260 0.41373 0.26821);
+ color-16: oklch(60% 0.1250 0.785398rad);
+ color-17: oklch(60% 0.1250 0.785398unknown);
+}
+
+.ic-unit:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ --value-2ic: 'something';
+ text-indent: 2em;
+ text-indent: 2ic;
+ content: var(--value-2ic);
+ left: 2em;
+ left: var(--non-existing, 2em);
+ left: 2em;
+ left: 2ic;
+ left: var(--non-existing, 2ic);
+ width: -webkit-calc(8em + 20px);
+ width: -moz-calc(8em + 20px);
+ width: calc(8em + 20px);
+ width: -webkit-calc(8ic + 20px);
+ width: -moz-calc(8ic + 20px);
+ width: calc(8ic + 20px);
+ height: 10px;
+ margin: 0.5em 1em .2em;
+ margin: 0.5ic 1ic .2ic;
+ padding: 2 ic;
+}
+
+.unset:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ clip: initial;
+ clip: unset;
+}
+
+.mod:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ padding: 8px 3px 1px -webkit-calc(3px + 50%);
+ padding: 8px 3px 1px -moz-calc(3px + 50%);
+ padding: 8px 3px 1px calc(3px + 50%);
+ padding: 8px mod(18px, 5px) 1px -webkit-calc(mod(15px, 6px) + 50%);
+ padding: 8px mod(18px, 5px) 1px -moz-calc(mod(15px, 6px) + 50%);
+ padding: 8px mod(18px, 5px) 1px calc(mod(15px, 6px) + 50%);
+ -webkit-transform: rotate(-50deg);
+ -moz-transform: rotate(-50deg);
+ -ms-transform: rotate(-50deg);
+ -o-transform: rotate(-50deg);
+ transform: rotate(-50deg);
+ -webkit-transform: rotate(mod(-140deg, -90deg));
+ -moz-transform: rotate(mod(-140deg, -90deg));
+ -ms-transform: rotate(mod(-140deg, -90deg));
+ -o-transform: rotate(mod(-140deg, -90deg));
+ transform: rotate(mod(-140deg, -90deg));
+ width: 2px;
+ width: mod(2px, 5px);
+ width: mod(mod(-18px, 5px), 5px);
+}
+
+.rem:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ padding: 8px 3px 1px -webkit-calc(3px + 50%);
+ padding: 8px 3px 1px -moz-calc(3px + 50%);
+ padding: 8px 3px 1px calc(3px + 50%);
+ padding: 8px rem(18px, 5px) 1px -webkit-calc(rem(15px, 6px) + 50%);
+ padding: 8px rem(18px, 5px) 1px -moz-calc(rem(15px, 6px) + 50%);
+ padding: 8px rem(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
+ -webkit-transform: rotate(-50deg);
+ -moz-transform: rotate(-50deg);
+ -ms-transform: rotate(-50deg);
+ -o-transform: rotate(-50deg);
+ transform: rotate(-50deg);
+ -webkit-transform: rotate(rem(-140deg, -90deg));
+ -moz-transform: rotate(rem(-140deg, -90deg));
+ -ms-transform: rotate(rem(-140deg, -90deg));
+ -o-transform: rotate(rem(-140deg, -90deg));
+ transform: rotate(rem(-140deg, -90deg));
+}
+
+.round:not(#\##\##\##\##\##\##\##\##\##\##\##\#) {
+ top: 3px;
+ top: round(2.5px, 1px);
+ right: 3px;
+ right: round(nearest, 2.5px, 1px);
+ bottom: 3px;
+ bottom: round(up, 2.5px, 1px);
+ left: 2px;
+ left: round(down, 2.5px, 1px);
+ top: 2px;
+ right: 2px;
+ bottom: 2px;
+ left: 2px;
+ inset: 2px;
+ top: 2px;
+ top: round(to-zero, 2.5px, 1px);
+ right: 2px;
+ right: round(to-zero, 2.5px, 1px);
+ bottom: 2px;
+ bottom: round(to-zero, 2.5px, 1px);
+ left: 2px;
+ left: round(to-zero, 2.5px, 1px);
+ inset: round(to-zero, 2.5px, 1px);
+}
diff --git a/plugins/postcss-cascade-layers/.tape.mjs b/plugins/postcss-cascade-layers/.tape.mjs
index 93055f3ab..383c546bd 100644
--- a/plugins/postcss-cascade-layers/.tape.mjs
+++ b/plugins/postcss-cascade-layers/.tape.mjs
@@ -51,5 +51,11 @@ postcssTape(plugin)({
postcssImport(), /* postcss-import must run first */
plugin(),
]
- }
+ },
+ 'specificity-buckets-a': {
+ message: "creates non overlapping specificity buckets",
+ },
+ 'specificity-buckets-b': {
+ message: "creates non overlapping specificity buckets",
+ },
});
diff --git a/plugins/postcss-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md
index 881a8c5cc..cd354100c 100644
--- a/plugins/postcss-cascade-layers/README.md
+++ b/plugins/postcss-cascade-layers/README.md
@@ -33,6 +33,30 @@ target {
```
+## How it works
+
+[PostCSS Cascade Layers] creates "layers" of specificity.
+
+It applies extra specificity on all your styles based on :
+- the most specific selector found
+- the order in which layers are defined
+
+for `@layer A, B, C`:
+
+| layer | specificity adjustment | selector |
+| ------ | ----------- | --- |
+| `A` | 0 | N/A |
+| `B` | 3 | `:not(#/##/##/#)` |
+| `C` | 6 | `:not(#/##/##/##/##/##/#)` |
+
+This approach lets more important (later) layers always override less important (earlier) layers.
+And layers have enough room internally so that each selector works and overrides as expected.
+
+More layers with more specificity will cause longer `:not(...)` selectors to be generated.
+
+⚠️ For this to work the plugin needs to analyze your entire stylesheet at once.
+If you have different assets that are unaware of each other it will not work correctly as the analysis will be incorrect.
+
## Usage
Add [PostCSS Cascade Layers] to your project:
diff --git a/plugins/postcss-cascade-layers/docs/README.md b/plugins/postcss-cascade-layers/docs/README.md
index cd4f64fd6..294a16fca 100644
--- a/plugins/postcss-cascade-layers/docs/README.md
+++ b/plugins/postcss-cascade-layers/docs/README.md
@@ -24,6 +24,30 @@
```
+## How it works
+
+[] creates "layers" of specificity.
+
+It applies extra specificity on all your styles based on :
+- the most specific selector found
+- the order in which layers are defined
+
+for `@layer A, B, C`:
+
+| layer | specificity adjustment | selector |
+| ------ | ----------- | --- |
+| `A` | 0 | N/A |
+| `B` | 3 | `:not(#/##/##/#)` |
+| `C` | 6 | `:not(#/##/##/##/##/##/#)` |
+
+This approach lets more important (later) layers always override less important (earlier) layers.
+And layers have enough room internally so that each selector works and overrides as expected.
+
+More layers with more specificity will cause longer `:not(...)` selectors to be generated.
+
+⚠️ For this to work the plugin needs to analyze your entire stylesheet at once.
+If you have different assets that are unaware of each other it will not work correctly as the analysis will be incorrect.
+
diff --git a/plugins/postcss-cascade-layers/test/specificity-buckets-a.css b/plugins/postcss-cascade-layers/test/specificity-buckets-a.css
new file mode 100644
index 000000000..c75ef35ef
--- /dev/null
+++ b/plugins/postcss-cascade-layers/test/specificity-buckets-a.css
@@ -0,0 +1,17 @@
+@layer A, B;
+
+#foo {
+ bucket: 1;
+}
+
+@layer A {
+ #foo {
+ bucket: 2;
+ }
+}
+
+@layer B {
+ #foo {
+ bucket: 3;
+ }
+}
diff --git a/plugins/postcss-cascade-layers/test/specificity-buckets-a.expect.css b/plugins/postcss-cascade-layers/test/specificity-buckets-a.expect.css
new file mode 100644
index 000000000..0fa709799
--- /dev/null
+++ b/plugins/postcss-cascade-layers/test/specificity-buckets-a.expect.css
@@ -0,0 +1,11 @@
+#foo:not(#\##\##\##\#) {
+ bucket: 1;
+}
+
+#foo {
+ bucket: 2;
+ }
+
+#foo:not(#\##\#) {
+ bucket: 3;
+ }
diff --git a/plugins/postcss-cascade-layers/test/specificity-buckets-b.css b/plugins/postcss-cascade-layers/test/specificity-buckets-b.css
new file mode 100644
index 000000000..f54755a26
--- /dev/null
+++ b/plugins/postcss-cascade-layers/test/specificity-buckets-b.css
@@ -0,0 +1,41 @@
+@layer A, B;
+
+foo {
+ bucket: 1;
+}
+
+@layer A {
+ foo {
+ bucket: 2;
+ }
+
+ #foo {
+ bucket: 2;
+ }
+
+ #foo #fooz {
+ bucket: 2;
+ }
+
+ #foo #fooz #foos {
+ bucket: 2;
+ }
+}
+
+@layer B {
+ foo {
+ bucket: 3;
+ }
+
+ #foo {
+ bucket: 3;
+ }
+
+ #foo #fooz {
+ bucket: 3;
+ }
+
+ #foo #fooz #foos {
+ bucket: 3;
+ }
+}
diff --git a/plugins/postcss-cascade-layers/test/specificity-buckets-b.expect.css b/plugins/postcss-cascade-layers/test/specificity-buckets-b.expect.css
new file mode 100644
index 000000000..fc86553b3
--- /dev/null
+++ b/plugins/postcss-cascade-layers/test/specificity-buckets-b.expect.css
@@ -0,0 +1,35 @@
+foo:not(#\##\##\##\##\##\##\##\#) {
+ bucket: 1;
+}
+
+foo {
+ bucket: 2;
+ }
+
+#foo {
+ bucket: 2;
+ }
+
+#foo #fooz {
+ bucket: 2;
+ }
+
+#foo #fooz #foos {
+ bucket: 2;
+ }
+
+foo:not(#\##\##\##\#) {
+ bucket: 3;
+ }
+
+#foo:not(#\##\##\##\#) {
+ bucket: 3;
+ }
+
+#foo #fooz:not(#\##\##\##\#) {
+ bucket: 3;
+ }
+
+#foo #fooz #foos:not(#\##\##\##\#) {
+ bucket: 3;
+ }
diff --git a/plugins/postcss-nesting/.tape.mjs b/plugins/postcss-nesting/.tape.mjs
index 8baa27012..e2d7e5a17 100644
--- a/plugins/postcss-nesting/.tape.mjs
+++ b/plugins/postcss-nesting/.tape.mjs
@@ -100,6 +100,9 @@ postcssTape(plugin)({
noIsPseudoSelector: true,
},
},
+ 'layer': {
+ message: 'supports nested @layer',
+ },
'empty': {
message: 'removes empty rules',
},
diff --git a/plugins/postcss-nesting/CHANGELOG.md b/plugins/postcss-nesting/CHANGELOG.md
index a3895276b..66ce79be3 100644
--- a/plugins/postcss-nesting/CHANGELOG.md
+++ b/plugins/postcss-nesting/CHANGELOG.md
@@ -1,5 +1,9 @@
# Changes to PostCSS Nesting
+### Unreleased
+
+- Add tentative support for `@layer`. The actual behavior is poorly defined and may change in the future. Use with caution.
+
### 10.1.6 (May 17, 2022)
- Fix selector order with `:before` and other pseudo elements.
diff --git a/plugins/postcss-nesting/src/lib/valid-atrules.js b/plugins/postcss-nesting/src/lib/valid-atrules.js
index 92dff47cd..82a9318e4 100644
--- a/plugins/postcss-nesting/src/lib/valid-atrules.js
+++ b/plugins/postcss-nesting/src/lib/valid-atrules.js
@@ -1 +1 @@
-export default ['container', 'document', 'media', 'supports'];
+export default ['container', 'document', 'media', 'supports', 'layer'];
diff --git a/plugins/postcss-nesting/test/layer.css b/plugins/postcss-nesting/test/layer.css
new file mode 100644
index 000000000..e9bd94341
--- /dev/null
+++ b/plugins/postcss-nesting/test/layer.css
@@ -0,0 +1,14 @@
+.unlayered {
+ contain: layout inline-size;
+}
+
+.partially-layered {
+ background-color: blue;
+ height: 100px;
+ width: 100px;
+
+ @layer A {
+ /* There is no definition for this behavior */
+ background-color: red;
+ }
+}
diff --git a/plugins/postcss-nesting/test/layer.expect.css b/plugins/postcss-nesting/test/layer.expect.css
new file mode 100644
index 000000000..4f152d74d
--- /dev/null
+++ b/plugins/postcss-nesting/test/layer.expect.css
@@ -0,0 +1,17 @@
+.unlayered {
+ contain: layout inline-size;
+}
+
+.partially-layered {
+ background-color: blue;
+ height: 100px;
+ width: 100px
+}
+
+@layer A {
+
+.partially-layered {
+ /* There is no definition for this behavior */
+ background-color: red
+}
+ }