From 0f6b41468600a3a230cfb07bf86b4eafd37cf15a Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 12 May 2022 23:37:36 +0200 Subject: [PATCH 1/6] preset-env : add cascade layers --- package-lock.json | 2 + plugin-packs/postcss-preset-env/.tape.mjs | 14 + plugin-packs/postcss-preset-env/CHANGELOG.md | 4 + plugin-packs/postcss-preset-env/package.json | 1 + .../scripts/plugins-data.json | 5 + .../src/lib/ids-by-execution-order.mjs | 1 + .../src/plugins/plugins-by-id.mjs | 2 + .../src/plugins/plugins-data.mjs | 5 + .../postcss-preset-env/test/layers-basic.css | 376 ++++++++ .../test/layers-basic.expect.css | 809 ++++++++++++++++++ .../layers-basic.preserve.true.expect.css | 809 ++++++++++++++++++ plugins/postcss-cascade-layers/CHANGELOG.md | 4 + plugins/postcss-cascade-layers/src/index.ts | 2 +- plugins/postcss-nesting/.tape.mjs | 3 + plugins/postcss-nesting/CHANGELOG.md | 4 + .../postcss-nesting/src/lib/valid-atrules.js | 2 +- plugins/postcss-nesting/test/layer.css | 14 + plugins/postcss-nesting/test/layer.expect.css | 17 + 18 files changed, 2072 insertions(+), 2 deletions(-) create mode 100644 plugin-packs/postcss-preset-env/test/layers-basic.css create mode 100644 plugin-packs/postcss-preset-env/test/layers-basic.expect.css create mode 100644 plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css create mode 100644 plugins/postcss-nesting/test/layer.css create mode 100644 plugins/postcss-nesting/test/layer.expect.css diff --git a/package-lock.json b/package-lock.json index 1ffdbde5e..7966cf78b 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..ef8e34b7d 100644 --- a/plugin-packs/postcss-preset-env/.tape.mjs +++ b/plugin-packs/postcss-preset-env/.tape.mjs @@ -160,6 +160,20 @@ 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: { + 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..317bd6a49 --- /dev/null +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.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/plugins/postcss-cascade-layers/CHANGELOG.md b/plugins/postcss-cascade-layers/CHANGELOG.md index ae31948f4..897fc107d 100644 --- a/plugins/postcss-cascade-layers/CHANGELOG.md +++ b/plugins/postcss-cascade-layers/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Cascade Layers +### Unreleased + +- Process CSS after most other plugins to ensure correct analysis and transformation of sugary CSS. + ### 1.0.0 (May 12, 2022) - Initial version diff --git a/plugins/postcss-cascade-layers/src/index.ts b/plugins/postcss-cascade-layers/src/index.ts index cb8fc2178..842bff14a 100644 --- a/plugins/postcss-cascade-layers/src/index.ts +++ b/plugins/postcss-cascade-layers/src/index.ts @@ -22,7 +22,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { return { postcssPlugin: 'postcss-cascade-layers', - Once(root: Container, { result }: { result: Result }) { + OnceExit(root: Container, { result }: { result: Result }) { // Warnings if (options.onRevertLayerKeyword) { 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 a14b773c4..ac7265149 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.5 (May 11, 2022) - Use `@csstools/selector-specificity` for specificity calculations. 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..ead27d9f5 --- /dev/null +++ b/plugins/postcss-nesting/test/layer.css @@ -0,0 +1,14 @@ +.container { + contain: layout inline-size; +} + +.contained { + 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..9a9e46f05 --- /dev/null +++ b/plugins/postcss-nesting/test/layer.expect.css @@ -0,0 +1,17 @@ +.container { + contain: layout inline-size; +} + +.contained { + background-color: blue; + height: 100px; + width: 100px +} + +@layer A { + +.contained { + /* There is no definition for this behavior */ + background-color: red +} + } From 6697eddebfd55268875dc5c02253a82cff1b8097 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Thu, 12 May 2022 23:40:01 +0200 Subject: [PATCH 2/6] cleanup --- plugins/postcss-nesting/test/layer.css | 4 ++-- plugins/postcss-nesting/test/layer.expect.css | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/postcss-nesting/test/layer.css b/plugins/postcss-nesting/test/layer.css index ead27d9f5..e9bd94341 100644 --- a/plugins/postcss-nesting/test/layer.css +++ b/plugins/postcss-nesting/test/layer.css @@ -1,8 +1,8 @@ -.container { +.unlayered { contain: layout inline-size; } -.contained { +.partially-layered { background-color: blue; height: 100px; width: 100px; diff --git a/plugins/postcss-nesting/test/layer.expect.css b/plugins/postcss-nesting/test/layer.expect.css index 9a9e46f05..4f152d74d 100644 --- a/plugins/postcss-nesting/test/layer.expect.css +++ b/plugins/postcss-nesting/test/layer.expect.css @@ -1,8 +1,8 @@ -.container { +.unlayered { contain: layout inline-size; } -.contained { +.partially-layered { background-color: blue; height: 100px; width: 100px @@ -10,7 +10,7 @@ @layer A { -.contained { +.partially-layered { /* There is no definition for this behavior */ background-color: red } From 1e22fe886bfc1199c9ebfcd4a7eebc88c532eda8 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Fri, 13 May 2022 19:31:50 +0200 Subject: [PATCH 3/6] fix --- plugin-packs/postcss-preset-env/.tape.mjs | 1 + .../layers-basic.preserve.true.expect.css | 185 +++++++++++++++++- 2 files changed, 184 insertions(+), 2 deletions(-) diff --git a/plugin-packs/postcss-preset-env/.tape.mjs b/plugin-packs/postcss-preset-env/.tape.mjs index ef8e34b7d..3d721acbe 100644 --- a/plugin-packs/postcss-preset-env/.tape.mjs +++ b/plugin-packs/postcss-preset-env/.tape.mjs @@ -170,6 +170,7 @@ postcssTape(plugin)({ 'layers-basic:preserve:true': { message: 'supports layers usage with { preserve: true }', options: { + preserve: true, stage: 0, browsers: '> 0%' }, 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 index 317bd6a49..ec1cdec06 100644 --- 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 @@ -25,6 +25,12 @@ } } +@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); @@ -57,12 +63,21 @@ 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; @@ -70,6 +85,7 @@ order: 3; padding-top: 5px; padding-bottom: 5px; + padding-block: 5px; } .test-nesting-rules:not(#\##\##\##\##\##\##\##\#) { @@ -131,6 +147,8 @@ order: 9; } +@custom-media --narrow-window (max-width: 30em); + @media (max-width: 30em) { .test-custom-media-queries:not(#\##\##\##\##\##\##\##\##\##\##\##\#) { -webkit-box-ordinal-group: 11; @@ -141,6 +159,16 @@ } } +@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; @@ -152,6 +180,8 @@ } } +@custom-media --dark-mode (prefers-color-scheme: dark); + @media (color-index: 48) { body:not(#\##\##\##\##\##\##\##\##\##\##\##\#) { background-color: black; @@ -173,6 +203,15 @@ } } +@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; @@ -181,6 +220,14 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo 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; @@ -191,6 +238,7 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo .test-rebeccapurple-color:not(#\##\##\##\##\##\##\##\##\##\##\##\#) { color: #639; + color: rebeccapurple; -webkit-box-ordinal-group: 15; -webkit-order: 14; -moz-box-ordinal-group: 15; @@ -200,7 +248,9 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo .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; @@ -210,6 +260,7 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo .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; @@ -220,8 +271,10 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo .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; @@ -443,6 +496,14 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo 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; @@ -521,6 +582,14 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo 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; @@ -529,47 +598,82 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo 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 { @@ -578,6 +682,7 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo font-weight: 300; font-display: swap; src: url(a) format("woff2"); + src: url(a) format(woff2); } .block-flow:not(#\##\##\##\##\##\##\##\##\##\##\##\#) { @@ -680,130 +785,206 @@ h1.test-custom-selectors:not(#\##\##\##\##\##\##\##\##\##\##\##\#),h2.test-custo .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: 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: auto; 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); } From c295f13d2309de667023c1821189333203cc7e24 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Wed, 18 May 2022 17:38:08 +0200 Subject: [PATCH 4/6] add more tests and update docs --- plugins/postcss-cascade-layers/.tape.mjs | 8 +++- plugins/postcss-cascade-layers/docs/README.md | 24 +++++++++++ .../test/specificity-buckets-a.css | 17 ++++++++ .../test/specificity-buckets-a.expect.css | 11 +++++ .../test/specificity-buckets-b.css | 41 +++++++++++++++++++ .../test/specificity-buckets-b.expect.css | 35 ++++++++++++++++ 6 files changed, 135 insertions(+), 1 deletion(-) create mode 100644 plugins/postcss-cascade-layers/test/specificity-buckets-a.css create mode 100644 plugins/postcss-cascade-layers/test/specificity-buckets-a.expect.css create mode 100644 plugins/postcss-cascade-layers/test/specificity-buckets-b.css create mode 100644 plugins/postcss-cascade-layers/test/specificity-buckets-b.expect.css 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/docs/README.md b/plugins/postcss-cascade-layers/docs/README.md index cd4f64fd6..4c5e98ba3 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 | selector | +| ------ | ----------- | --- | +| `A` | 0 | N/A | +| `B` | 3 | `:not(#/##/##/#)` | +| `C` | 6 | `:not(#/##/##/##/##/##/#)` | + +This approach lets more important (later) layers always override less important (earlier) layers.
+But each layer has 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; + } From 7c950a1a316f01d7f5079ead00f726b548ff0b22 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Wed, 18 May 2022 17:39:36 +0200 Subject: [PATCH 5/6] gen docs --- plugins/postcss-cascade-layers/README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/plugins/postcss-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md index 881a8c5cc..b9f2649a5 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 | selector | +| ------ | ----------- | --- | +| `A` | 0 | N/A | +| `B` | 3 | `:not(#/##/##/#)` | +| `C` | 6 | `:not(#/##/##/##/##/##/#)` | + +This approach lets more important (later) layers always override less important (earlier) layers.
+But each layer has 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: From 6758e453b82b6d4c061df59b572dcb1d9d43400b Mon Sep 17 00:00:00 2001 From: romainmenke Date: Wed, 18 May 2022 17:41:52 +0200 Subject: [PATCH 6/6] wording --- plugins/postcss-cascade-layers/README.md | 4 ++-- plugins/postcss-cascade-layers/docs/README.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/postcss-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md index b9f2649a5..cd354100c 100644 --- a/plugins/postcss-cascade-layers/README.md +++ b/plugins/postcss-cascade-layers/README.md @@ -43,14 +43,14 @@ It applies extra specificity on all your styles based on : for `@layer A, B, C`: -| layer | specificity | selector | +| 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.
-But each layer has enough room internally so that each selector works and overrides as expected. +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. diff --git a/plugins/postcss-cascade-layers/docs/README.md b/plugins/postcss-cascade-layers/docs/README.md index 4c5e98ba3..294a16fca 100644 --- a/plugins/postcss-cascade-layers/docs/README.md +++ b/plugins/postcss-cascade-layers/docs/README.md @@ -34,14 +34,14 @@ It applies extra specificity on all your styles based on : for `@layer A, B, C`: -| layer | specificity | selector | +| 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.
-But each layer has enough room internally so that each selector works and overrides as expected. +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.