diff --git a/package-lock.json b/package-lock.json index e231df8b5..1ae87da82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5556,9 +5556,9 @@ "dev": true }, "node_modules/cssdb": { - "version": "7.11.1", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.1.tgz", - "integrity": "sha512-F0nEoX/Rv8ENTHsjMPGHd9opdjGfXkgRBafSUGnQKPzGZFB7Lm0BbT10x21TMOCrKLbVsJ0NoCDMk6AfKqw8/A==", + "version": "7.11.2", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.2.tgz", + "integrity": "sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==", "funding": [ { "type": "opencollective", @@ -9651,17 +9651,17 @@ } }, "node_modules/set-function-length": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz", - "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", "dev": true, "dependencies": { - "define-data-property": "^1.1.2", + "define-data-property": "^1.1.4", "es-errors": "^1.3.0", "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.3", + "get-intrinsic": "^1.2.4", "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.1" + "has-property-descriptors": "^1.0.2" }, "engines": { "node": ">= 0.4" @@ -10486,9 +10486,9 @@ } }, "node_modules/ts-api-utils": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz", - "integrity": "sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", + "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", "dev": true, "engines": { "node": ">=16" diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md index ee3d2489f..da4681881 100644 --- a/plugin-packs/postcss-preset-env/FEATURES.md +++ b/plugin-packs/postcss-preset-env/FEATURES.md @@ -54,7 +54,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project. | [](https://cssdb.org/#place-properties) | `place-properties` | Place Properties | [example](https://preset-env.cssdb.org/features/#place-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place#readme) | | [](https://cssdb.org/#prefers-color-scheme-query) | `prefers-color-scheme-query` | `prefers-color-scheme` Media Query | [example](https://preset-env.cssdb.org/features/#prefers-color-scheme-query) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme#readme) | | [](https://cssdb.org/#rebeccapurple-color) | `rebeccapurple-color` | `rebeccapurple` Color | [example](https://preset-env.cssdb.org/features/#rebeccapurple-color) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple#readme) | -| [](https://cssdb.org/#relative-color-syntax) | `relative-color-syntax` | Relative Color Syntax | [example](https://preset-env.cssdb.org/features/#relative-color-syntax) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax#readme) | +| [](https://cssdb.org/#relative-color-syntax) | `relative-color-syntax` | Relative Colors | [example](https://preset-env.cssdb.org/features/#relative-color-syntax) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax#readme) | | [](https://cssdb.org/#scope-pseudo-class) | `scope-pseudo-class` | `:scope()` Reference Element Pseudo-class | [example](https://preset-env.cssdb.org/features/#scope-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-scope-pseudo-class#readme) | | [](https://cssdb.org/#stepped-value-functions) | `stepped-value-functions` | `round()`, `mod()` and `rem()` functions | [example](https://preset-env.cssdb.org/features/#stepped-value-functions) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions#readme) | | [](https://cssdb.org/#system-ui-font-family) | `system-ui-font-family` | `system-ui` Font Family | [example](https://preset-env.cssdb.org/features/#system-ui-font-family) | [docs](https://github.com/JLHwung/postcss-font-family-system-ui#readme) | diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index d820f74aa..29a6328d1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -598,7 +598,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index 85c9cf5aa..69268db9c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -598,7 +598,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css index 2a7d7c63f..4d0925103 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css @@ -617,7 +617,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index db066e918..192e4f100 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -510,7 +510,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index 062dbac99..5100d6f73 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -508,7 +508,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index f5d7f6d99..4b9d4a5b5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -502,7 +502,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index f5d7f6d99..4b9d4a5b5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -502,7 +502,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 6e6ab2058..9c05ccb57 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -617,7 +617,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index 75d00c3c8..d80c9c0b1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -511,7 +511,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index 1c9c8c198..680980f45 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -506,7 +506,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css index 362991c6f..6c028cc1d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css @@ -3,7 +3,7 @@ } .test-custom-property-fallbacks { - --firebrick: lab(40% 56.6 39); + --firebrick: rgb(179, 35, 35); } .test-custom-properties { @@ -95,8 +95,8 @@ } .test-lab-function { - background-color: lab(40% 56.6 39); - color: lch(40% 68.8 34.5 / 50%); + background-color: rgb(179, 35, 35); + color: rgba(179, 34, 35, 0.5); order: 17; } @@ -315,27 +315,27 @@ } .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-1: rgb(73, 71, 69); + color-2: rgb(121, 34, 67); + color-3: rgba(121, 34, 67, 0.5); + color-4: rgb(121, 34, 67); + color-5: rgba(121, 34, 67, 0.5); + color-6: rgb(177, 102, 126); 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); + color-8: rgb(125, 35, 41); + color-9: rgb(198, 93, 7); + color-10: rgb(157, 147, 24); + color-11: rgb(104, 166, 57); + color-12: rgb(98, 172, 239); } .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-1: rgb(126, 37, 15); + color-2: rgb(126, 37, 15); + color-3: rgba(126, 37, 15, 0.5); + color-4: rgb(126, 37, 15); + color-5: rgba(126, 37, 15, 0.5); + color-6: rgb(197, 84, 124); color-7: rgb(0, 149, 131); color-8: rgb(0, 149, 131); @@ -343,22 +343,22 @@ color-10: rgb(0, 149, 131); color-11: rgb(0, 149, 131); - 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-12: rgb(188, 101, 59); + color-13: rgb(188, 101, 59); + color-14: rgb(188, 101, 59); + color-15: rgb(188, 101, 59); + color-16: rgb(188, 101, 59); color-17: oklch(60% 0.1250 0.785398unknown); } @media (color-gamut: p3) { .oklch { - 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-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: color(display-p3 0.19244 0.58461 0.51559); } } @@ -480,10 +480,10 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, rgb(255, 157, 133) 0%, rgb(31, 251, 255) 100%); } -@media (color-gamut: rec2020) { +@media (color-gamut: p3) { .gradients-interpolation-method { - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, color(display-p3 1 0.61669 0.51066) 0%, color(display-p3 0.46442 0.97081 1) 100%); } } diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css index afd594608..37d0cc76f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -613,7 +613,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index fce13f83e..7e507a0b4 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -634,7 +634,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index 6b3bf2c2b..5d250df98 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -615,7 +615,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index 72262b985..805960455 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -595,7 +595,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css index 13b771d43..c09ca424a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css @@ -734,7 +734,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index 3e3699f52..687d05d7b 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -6,7 +6,7 @@ --firebrick: rgb(179, 35, 35); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { .test-custom-property-fallbacks { --firebrick: lab(40% 56.6 39); } @@ -1002,7 +1002,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } @@ -1072,7 +1072,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --color: rgb(0, 249, 66); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .out-of-gamut { --color: rgb(0, 249, 66); } diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index ee91bc552..dbfe8924a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -3,7 +3,7 @@ } .test-custom-property-fallbacks { - --firebrick: lab(40% 56.6 39); + --firebrick: rgb(179, 35, 35); } .test-custom-properties { @@ -98,8 +98,8 @@ } .test-lab-function { - background-color: lab(40% 56.6 39); - color: lch(40% 68.8 34.5 / 50%); + background-color: rgb(179, 35, 35); + color: rgba(179, 34, 35, 0.5); order: 17; } @@ -487,7 +487,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index 604673580..dfac0dea5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -507,7 +507,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 31605c86b..b2122e6e0 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -502,7 +502,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index c6fe16537..0dd73caca 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -613,7 +613,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css index e0d8b15da..9545beed7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css @@ -504,7 +504,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(189, 181, 255), rgb(172, 194, 255), rgb(155, 205, 255), rgb(126, 217, 255), rgb(99, 228, 255), rgb(94, 237, 237) 100%); } diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index e24d4329f..166914b05 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -606,7 +606,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -676,7 +676,7 @@ color: light-dark(lch(from color(display-p3 0.50566 0.0781 0) l c h), magenta); } -@supports (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .schemed-colors { color: var(--csstools-color-scheme--light, lch(from rgb(141, 0, 0) l c h)) var(--csstools-color-scheme--dark, magenta); } diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index 64d1fe0ba..166914b05 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -606,7 +606,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -659,18 +659,52 @@ } .dark { + --csstools-color-scheme--light: ; + --csstools-color-scheme--dark: initial; color-scheme: dark; } .light { + --csstools-color-scheme--light: initial; + --csstools-color-scheme--dark: ; color-scheme: light; } .schemed-colors { + color: lch(from rgb(141, 0, 0) l c h) magenta; color: light-dark(lch(from rgb(141, 0, 0) l c h), magenta); color: light-dark(lch(from color(display-p3 0.50566 0.0781 0) l c h), magenta); } +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { +.schemed-colors { + color: var(--csstools-color-scheme--light, lch(from rgb(141, 0, 0) l c h)) var(--csstools-color-scheme--dark, magenta); +} +} + +.schemed-prop { + --theme-color: var(--csstools-color-scheme--light, cyan) var(--csstools-color-scheme--dark, deepskyblue); +} + +@supports (color: light-dark(red, red)) { .schemed-prop { --theme-color: light-dark(cyan, deepskyblue); } +} + +.schemed-prop * { + --theme-color: var(--csstools-color-scheme--light, cyan) var(--csstools-color-scheme--dark, deepskyblue); +} + +:root { + --csstools-color-scheme--light: initial; + --csstools-color-scheme--dark: ; +} + +@media (prefers-color-scheme: dark) { + + :root { + --csstools-color-scheme--light: ; + --csstools-color-scheme--dark: initial; + } +} diff --git a/plugin-packs/postcss-preset-env/test/insert.after.match-result.feature-is-skipped.expect.css b/plugin-packs/postcss-preset-env/test/insert.after.match-result.feature-is-skipped.expect.css index e09bb226f..850254123 100644 --- a/plugin-packs/postcss-preset-env/test/insert.after.match-result.feature-is-skipped.expect.css +++ b/plugin-packs/postcss-preset-env/test/insert.after.match-result.feature-is-skipped.expect.css @@ -1,4 +1,4 @@ .test-lab { - background-color: lab(50% 30 0 / 100%); + background-color: rgb(166, 98, 120); after: changed-this-declaration; } diff --git a/plugin-packs/postcss-preset-env/test/insert.before.match-result.feature-is-skipped.expect.css b/plugin-packs/postcss-preset-env/test/insert.before.match-result.feature-is-skipped.expect.css index a209833f7..84c8009d7 100644 --- a/plugin-packs/postcss-preset-env/test/insert.before.match-result.feature-is-skipped.expect.css +++ b/plugin-packs/postcss-preset-env/test/insert.before.match-result.feature-is-skipped.expect.css @@ -1,4 +1,4 @@ .test-lab { - background-color: lab(50% 30 0 / 100%); + background-color: rgb(166, 98, 120); before: changed-this-declaration; } 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 c94bb05ff..20ea8f644 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 @@ -21,7 +21,7 @@ --firebrick: rgb(179, 35, 35); } -@supports (color: lab(0% 0 0)){ +@supports (color: lab(0% 0 0%)){ .test-custom-property-fallbacks:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --firebrick: lab(40% 56.6 39); } diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md index 61f51b928..922153530 100644 --- a/plugins/postcss-color-function/README.md +++ b/plugins/postcss-color-function/README.md @@ -90,7 +90,7 @@ postcssColorFunction({ preserve: true }) --a-color: rgb(164, 49, 43); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --a-color: color(srgb 0.64331 0.19245 0.16771); } diff --git a/plugins/postcss-color-function/test/basic.preserve-true.expect.css b/plugins/postcss-color-function/test/basic.preserve-true.expect.css index beb6156b2..68637608d 100644 --- a/plugins/postcss-color-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-color-function/test/basic.preserve-true.expect.css @@ -15,7 +15,7 @@ color-4: rgba(255, 255, 255, VAR(--ALPHA)); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-case { color-4: color(Display-P3 1 1 1 / VAR(--ALPHA)); } @@ -135,7 +135,7 @@ color-5: color(display-p3 0.02472 0.01150 0.00574 /); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-alpha { color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo)); } diff --git a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css index 7d9fc4e58..b902c7456 100644 --- a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css @@ -15,7 +15,7 @@ color-4: rgba(255, 255, 255, VAR(--ALPHA)); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-case { color-4: color(Display-P3 1 1 1 / VAR(--ALPHA)); } @@ -135,7 +135,7 @@ color-5: color(display-p3 0.02472 0.01150 0.00574 /); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-alpha { color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo)); } diff --git a/plugins/postcss-color-function/test/examples/example.preserve-true.expect.css b/plugins/postcss-color-function/test/examples/example.preserve-true.expect.css index 3c6d71da5..3abe1f519 100644 --- a/plugins/postcss-color-function/test/examples/example.preserve-true.expect.css +++ b/plugins/postcss-color-function/test/examples/example.preserve-true.expect.css @@ -7,7 +7,7 @@ --a-color: rgb(164, 49, 43); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --a-color: color(srgb 0.64331 0.19245 0.16771); } diff --git a/plugins/postcss-color-function/test/variables.preserve-true.expect.css b/plugins/postcss-color-function/test/variables.preserve-true.expect.css index 9cfee1207..25948e538 100644 --- a/plugins/postcss-color-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-color-function/test/variables.preserve-true.expect.css @@ -9,7 +9,7 @@ --one-var: color(srgb 0.64331 var(--point-5) 0.16771 / var(--opacity-50)); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --one: color(srgb 0.64331 0.19245 0.16771); --one-a50: color(srgb 0.64331 0.19245 0.16771 / 50); diff --git a/plugins/postcss-color-mix-function/test/variables.expect.css b/plugins/postcss-color-mix-function/test/variables.expect.css index 6737cc302..7bc0a4232 100644 --- a/plugins/postcss-color-mix-function/test/variables.expect.css +++ b/plugins/postcss-color-mix-function/test/variables.expect.css @@ -9,7 +9,7 @@ --firebrick-var: color-mix(in lch, red, hwb(40% var(--fifty) 34.5 / var(--opacity-50))); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick: color(display-p3 0.84845 0.29298 0.07064); --firebrick-a50: color(display-p3 0.84845 0.29298 0.07064); diff --git a/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css b/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css index 73c75514d..e47256a6b 100644 --- a/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css @@ -9,7 +9,7 @@ --firebrick-var: color-mix(in lch, red, hwb(40% var(--fifty) 34.5 / var(--opacity-50))); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick: color(display-p3 0.84845 0.29298 0.07064); } @@ -21,7 +21,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick-a50: color(display-p3 0.84845 0.29298 0.07064); } diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.expect.css index 558c7fc8a..08f7933f9 100644 --- a/plugins/postcss-gradients-interpolation-method/test/variables.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/variables.expect.css @@ -7,7 +7,7 @@ --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.6641 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03346), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00334 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); } @@ -19,7 +19,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(3, 0, 0), rgb(22, 0, 0), rgb(46, 0, 0), rgb(72, 0, 0), rgb(99, 0, 0), rgb(128, 0, 0), rgb(158, 0, 0), rgb(190, 0, 0), rgb(222, 0, 0), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41863), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); } @@ -37,7 +37,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.6641 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03346), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); } diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css index c17a71fba..a66b1bf07 100644 --- a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css @@ -7,7 +7,7 @@ --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.6641 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03346), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00334 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(3, 0, 0), rgb(22, 0, 0), rgb(46, 0, 0), rgb(72, 0, 0), rgb(99, 0, 0), rgb(128, 0, 0), rgb(158, 0, 0), rgb(190, 0, 0), rgb(222, 0, 0), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41863), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css index 558c7fc8a..08f7933f9 100644 --- a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css @@ -7,7 +7,7 @@ --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.6641 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03346), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00334 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); } @@ -19,7 +19,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(3, 0, 0), rgb(22, 0, 0), rgb(46, 0, 0), rgb(72, 0, 0), rgb(99, 0, 0), rgb(128, 0, 0), rgb(158, 0, 0), rgb(190, 0, 0), rgb(222, 0, 0), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41863), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); } @@ -37,7 +37,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.6641 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03346), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); } diff --git a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css index 0f471631b..a976f9ddd 100644 --- a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css @@ -109,7 +109,7 @@ color-6: lab(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { .test-alpha-lab { color-4: lab(1% 1 1 / var(--foo)); } @@ -128,7 +128,7 @@ color-6: lch(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { .test-alpha-lch { color-4: lch(1% 1 1 / var(--foo)); } diff --git a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css index 3ec5dd6f7..7eaca1731 100644 --- a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css @@ -120,7 +120,7 @@ color-6: lab(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { .test-alpha-lab { color-4: lab(1% 1 1 / var(--foo)); } @@ -139,7 +139,7 @@ color-6: lch(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { .test-alpha-lch { color-4: lch(1% 1 1 / var(--foo)); } diff --git a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css index 3d35397e6..041528c2e 100644 --- a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css @@ -120,7 +120,7 @@ color-6: lab(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { .test-alpha-lab { color-4: lab(1% 1 1 / var(--foo)); } @@ -139,7 +139,7 @@ color-6: lch(1% 1 1 / calc(20% * 3)); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { .test-alpha-lch { color-4: lch(1% 1 1 / var(--foo)); } diff --git a/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css b/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css index 0af1667e0..0ea077124 100644 --- a/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css @@ -9,7 +9,7 @@ --firebrick-var: lch(40% var(--fifty) 34.5 / var(--opacity-50)); } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { :root { --firebrick: lab(40% 75 39); --firebrick-a50: lch(40% 80 34.5 / 50%); diff --git a/plugins/postcss-lab-function/test/variables.expect.css b/plugins/postcss-lab-function/test/variables.expect.css index c3b407721..b88a6523b 100644 --- a/plugins/postcss-lab-function/test/variables.expect.css +++ b/plugins/postcss-lab-function/test/variables.expect.css @@ -9,7 +9,7 @@ --firebrick-var: lch(40% var(--fifty) 34.5 / var(--opacity-50)); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick: color(display-p3 0.70967 0 0.17938); --firebrick-a50: color(display-p3 0.68093 0.12342 0.14054 / 0.5); diff --git a/plugins/postcss-lab-function/test/variables.preserve-true.expect.css b/plugins/postcss-lab-function/test/variables.preserve-true.expect.css index 6fb384d33..7294a3acf 100644 --- a/plugins/postcss-lab-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/variables.preserve-true.expect.css @@ -9,25 +9,25 @@ --firebrick-var: lch(40% var(--fifty) 34.5 / var(--opacity-50)); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick: color(display-p3 0.70967 0 0.17938); } } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { :root { --firebrick: lab(40% 75 39); } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick-a50: color(display-p3 0.68093 0.12342 0.14054 / 0.5); } } -@supports (color: lab(0% 0 0)) { +@supports (color: lab(0% 0 0%)) { :root { --firebrick-a50: lch(40% 80 34.5 / 50%); } diff --git a/plugins/postcss-oklab-function/test/basic.expect.css b/plugins/postcss-oklab-function/test/basic.expect.css index f32f5f530..5643b79cc 100644 --- a/plugins/postcss-oklab-function/test/basic.expect.css +++ b/plugins/postcss-oklab-function/test/basic.expect.css @@ -86,7 +86,7 @@ color-5: oklab(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-alpha-oklab { color-4: color(display-p3 0.00015 0 0 / var(--foo)); } @@ -103,7 +103,7 @@ color-5: oklch(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-alpha-oklch { color-4: color(display-p3 0.00009 0 0.00001 / var(--foo)); } diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css index dd361745c..7bbc79723 100644 --- a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css +++ b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css @@ -115,7 +115,7 @@ color-5: oklab(1% 0.01 0.01 /); } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { .test-alpha-oklab { color-4: oklab(1% 0.01 0.01 / var(--foo)); } @@ -132,7 +132,7 @@ color-5: oklch(1% 0.01 0.01 /); } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { .test-alpha-oklch { color-4: oklch(1% 0.01 0.01 / var(--foo)); } diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css index e0d4a298f..aa115458d 100644 --- a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css @@ -130,13 +130,13 @@ color-5: oklab(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-alpha-oklab { color-4: color(display-p3 0.00015 0 0 / var(--foo)); } } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { .test-alpha-oklab { color-4: oklab(1% 0.01 0.01 / var(--foo)); } @@ -156,13 +156,13 @@ color-5: oklch(1% 0.01 0.01 /); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .test-alpha-oklch { color-4: color(display-p3 0.00009 0 0.00001 / var(--foo)); } } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { .test-alpha-oklch { color-4: oklch(1% 0.01 0.01 / var(--foo)); } diff --git a/plugins/postcss-oklab-function/test/variables.expect.css b/plugins/postcss-oklab-function/test/variables.expect.css index f6cc70185..1d4ef3b2d 100644 --- a/plugins/postcss-oklab-function/test/variables.expect.css +++ b/plugins/postcss-oklab-function/test/variables.expect.css @@ -9,7 +9,7 @@ --firebrick-var: oklch(40% var(--point-five) 0.1324 / var(--opacity-50)); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick: color(display-p3 0.51193 0 0.22329); --firebrick-a50: color(display-p3 0.51567 0 0.25999 / 0.5); diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css index fb7643558..2d9d310e6 100644 --- a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css +++ b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css @@ -9,7 +9,7 @@ --firebrick-var: oklch(40% var(--point-five) 0.1324 / var(--opacity-50)); } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { :root { --firebrick: oklab(40% 0.4 0.039); --firebrick-a50: oklch(40% 0.4 0.039 / 50%); diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css index a52ecb38e..0d1ea8ff0 100644 --- a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css @@ -9,37 +9,37 @@ --firebrick-var: oklch(40% var(--point-five) 0.1324 / var(--opacity-50)); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick: color(display-p3 0.51193 0 0.22329); } } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { :root { --firebrick: oklab(40% 0.4 0.039); } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick-a50: color(display-p3 0.51567 0 0.25999 / 0.5); } } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { :root { --firebrick-a50: oklch(40% 0.4 0.039 / 50%); } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --firebrick-a50-var: color(display-p3 0.51567 0 0.25999 / var(--opacity-50)); } } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { :root { --firebrick-a50-var: oklch(40% 0.4 0.039 / var(--opacity-50)); } diff --git a/plugins/postcss-progressive-custom-properties/CHANGELOG.md b/plugins/postcss-progressive-custom-properties/CHANGELOG.md index aeeab2cee..67baa6b35 100644 --- a/plugins/postcss-progressive-custom-properties/CHANGELOG.md +++ b/plugins/postcss-progressive-custom-properties/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Progressive Custom Properties +### Unreleased (patch) + +- Test for mixed component types in color values (e.g. `lab(100 50% 50)`) + ### 3.1.0 _February 19, 2024_ diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs index 1d1a9f979..806f71873 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.cjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-value-parser");const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("postcss-value-parser");const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs index 59234f992..d3612eac9 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.mjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.mjs @@ -1 +1 @@ -import e from"postcss-value-parser";const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0;export{creator as default}; +import e from"postcss-value-parser";const a=["at","bottom","center","circle","closest-corner","closest-side","ellipse","farthest-corner","farthest-side","from","in","left","right","to","top"];function doublePositionGradients(e){const r=[],p=e.value.toLowerCase();if("function"===e.type&&("conic-gradient"===p||"linear-gradient"===p||"radial-gradient"===p||"repeating-conic-gradient"===p||"repeating-linear-gradient"===p||"repeating-radial-gradient"===p)){let p=0,t=!1,i=!1;e:for(let o=0;oa.includes(e.sniff)));let s=!1;try{e(a).walk((a=>{"function"===a.type&&p.test(a.value)&&(s=!0);try{const r=e.unit(a.value);!1!==r&&(a.dimension=r)}catch{}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",prepare(){const e=new WeakMap;return{OnceExit:(a,{postcss:r})=>{a.walkDecls((a=>{if(!a.parent)return;const p=e.get(a.parent)||{conditionalRules:[],propNames:new Set,lastConditionParams:{support:void 0},lastConditionalRule:void 0};if(e.set(a.parent,p),a.variable){if(!p.propNames.has(a.prop))return void p.propNames.add(a.prop)}else{const e=a.prop.toLowerCase();if(!p.propNames.has(e))return void p.propNames.add(e)}if(!a.variable&&!t.test(a.value))return;if(i.test(a.value))return;if(o.test(a.value))return;const s=!a.variable,l=conditionsFromValue(a.value,s).support.join(" and ");if(!l)return;if(p.lastConditionParams.support!==l&&(p.lastConditionalRule=void 0),p.lastConditionalRule)return p.lastConditionalRule.append(a.clone()),void a.remove();const y=[];if(l&&y.push(r.atRule({name:"supports",params:l,source:a.parent.source,raws:{before:"\n\n",after:"\n"}})),!y.length)return;for(let e=0;e{const r=e.get(a);r&&0!==r.conditionalRules.length&&r.conditionalRules.reverse().forEach((e=>{a.after(e)}))}))}}}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-custom-properties/scripts/color.mjs b/plugins/postcss-progressive-custom-properties/scripts/color.mjs index 1ce2aebf6..ffcb20dbc 100644 --- a/plugins/postcss-progressive-custom-properties/scripts/color.mjs +++ b/plugins/postcss-progressive-custom-properties/scripts/color.mjs @@ -6,7 +6,7 @@ export const colorMatchers = [ 'display-p3', ].map((colorSpace) => { return { - 'supports': 'color(display-p3 0 0 0)', + 'supports': 'color(display-p3 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -25,7 +25,7 @@ export const colorMatchers = [ 'xyz', ].map((colorSpace) => { return { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -78,7 +78,7 @@ export const hwbMatchers = [ export const labMatchers = [ { - 'supports': 'lab(0% 0 0)', + 'supports': 'lab(0% 0 0%)', 'property': 'color', 'sniff': 'lab', 'matchers': [ @@ -90,7 +90,7 @@ export const labMatchers = [ export const lchMatchers = [ { - 'supports': 'lab(0% 0 0)', + 'supports': 'lab(0% 0 0%)', 'property': 'color', 'sniff': 'lch', 'matchers': [ @@ -102,7 +102,7 @@ export const lchMatchers = [ export const oklabMatchers = [ { - 'supports': 'oklab(0% 0 0)', + 'supports': 'oklab(0% 0 0%)', 'property': 'color', 'sniff': 'oklab', 'matchers': [ @@ -114,7 +114,7 @@ export const oklabMatchers = [ export const oklchMatchers = [ { - 'supports': 'oklab(0% 0 0)', + 'supports': 'oklab(0% 0 0%)', 'property': 'color', 'sniff': 'oklch', 'matchers': [ diff --git a/plugins/postcss-progressive-custom-properties/scripts/relative-color-syntax.mjs b/plugins/postcss-progressive-custom-properties/scripts/relative-color-syntax.mjs index bd5867e77..8d9e5d9e8 100644 --- a/plugins/postcss-progressive-custom-properties/scripts/relative-color-syntax.mjs +++ b/plugins/postcss-progressive-custom-properties/scripts/relative-color-syntax.mjs @@ -2,7 +2,7 @@ import { matcherForValue } from './matcher-for-value.mjs'; export const relativeColorSyntaxMatches = [ { - 'supports': 'rgb(from red r g b)', + 'supports': 'lab(from red l 1 1% / calc(alpha + 0.1))', 'property': 'color', 'sniff': 'from ', 'matchers': [ diff --git a/plugins/postcss-progressive-custom-properties/src/matchers.ts b/plugins/postcss-progressive-custom-properties/src/matchers.ts index 39588e234..cd7354020 100644 --- a/plugins/postcss-progressive-custom-properties/src/matchers.ts +++ b/plugins/postcss-progressive-custom-properties/src/matchers.ts @@ -355,7 +355,7 @@ export const matchers = [ ], }, { - 'supports': 'rgb(from red r g b)', + 'supports': 'lab(from red l 1 1% / calc(alpha + 0.1))', 'property': 'color', 'sniff': 'from ', 'matchers': [ @@ -1048,7 +1048,7 @@ export const matchers = [ ], }, { - 'supports': 'color(display-p3 0 0 0)', + 'supports': 'color(display-p3 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1125,7 +1125,7 @@ export const matchers = [ ], }, { - 'supports': 'color(display-p3 0 0 0)', + 'supports': 'color(display-p3 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1202,7 +1202,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1279,7 +1279,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1356,7 +1356,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1433,7 +1433,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1510,7 +1510,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1587,7 +1587,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1664,7 +1664,7 @@ export const matchers = [ ], }, { - 'supports': 'color(xyz 0 0 0)', + 'supports': 'color(xyz 0 0 0%)', 'property': 'color', 'sniff': 'color', 'matchers': [ @@ -1947,7 +1947,7 @@ export const matchers = [ ], }, { - 'supports': 'lab(0% 0 0)', + 'supports': 'lab(0% 0 0%)', 'property': 'color', 'sniff': 'lab', 'matchers': [ @@ -2010,7 +2010,7 @@ export const matchers = [ ], }, { - 'supports': 'lab(0% 0 0)', + 'supports': 'lab(0% 0 0%)', 'property': 'color', 'sniff': 'lch', 'matchers': [ @@ -2073,7 +2073,7 @@ export const matchers = [ ], }, { - 'supports': 'oklab(0% 0 0)', + 'supports': 'oklab(0% 0 0%)', 'property': 'color', 'sniff': 'oklab', 'matchers': [ @@ -2136,7 +2136,7 @@ export const matchers = [ ], }, { - 'supports': 'oklab(0% 0 0)', + 'supports': 'oklab(0% 0 0%)', 'property': 'color', 'sniff': 'oklch', 'matchers': [ diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css index 3b789f511..2a234abd0 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.expect.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.expect.css @@ -24,13 +24,13 @@ --prop-9: red; } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { :root { --prop-1: oklch(40% 0.234 0.39 / var(--opacity-50)); } } -@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color(xyz 0 0 0)) and (color: rgba(0 0 0 / 0)) { +@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color(xyz 0 0 0%)) and (color: rgba(0 0 0 / 0)) { :root { --prop-2: linear-gradient( 45deg, @@ -81,7 +81,7 @@ } } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { :root { --prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50)); } @@ -113,7 +113,7 @@ --color-1: red; } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .not-root { --color-1: color(srgb 0.64331 0.19245 0.16771); } @@ -141,7 +141,7 @@ --color-9: pink; } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --color-1: color(srgb 0.64331 0.19245 0.16771); --color-2: color(srgb 0.64331 0.19245 0.16771 / 50); @@ -151,20 +151,20 @@ } } -@supports (color: color(xyz 0 0 0)) { +@supports (color: color(xyz 0 0 0%)) { :root { --color-6: color(rec2020 0.64331 0.19245 0.16771); } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --color-7: color(srgb 0.999 0.95 0.95); --color-8: color(display-p3 0.999 0.95 0.95); } } -@supports (color: color(xyz 0 0 0)) { +@supports (color: color(xyz 0 0 0%)) { :root { --color-9: color(rec2020 0.999 0.95 0.95); } @@ -251,7 +251,7 @@ --color-mix-2: plum; } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --color-mix-1: color(display-p3 0.64331 0.19245 0.16771); } @@ -264,7 +264,7 @@ } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { :root { --color-mix-2: color(display-p3 0.64331 0.19245 0.16771); } @@ -285,7 +285,7 @@ --color-rcs-12: green; } -@supports (color: color(xyz 0 0 0)) and (color: rgb(from red r g b)) { +@supports (color: color(xyz 0 0 0%)) and (color: lab(from red l 1 1% / calc(alpha + 0.1))) { :root { --color-rcs-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); --color-rcs-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); @@ -294,27 +294,27 @@ } } -@supports (color: hwb(0 0% 0%)) and (color: rgb(from red r g b)) { +@supports (color: hwb(0 0% 0%)) and (color: lab(from red l 1 1% / calc(alpha + 0.1))) { :root { --color-rcs-5: hwb(from hwb(50deg 20% 30%) h w b); } } -@supports (color: lab(0% 0 0)) and (color: rgb(from red r g b)) { +@supports (color: lab(0% 0 0%)) and (color: lab(from red l 1 1% / calc(alpha + 0.1))) { :root { --color-rcs-6: lab(from lab(40% 56.6 39) l a b); --color-rcs-7: lch(from lch(40% 56.6 39) l c h); } } -@supports (color: oklab(0% 0 0)) and (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) and (color: oklab(0% 0 0%)) { :root { --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); --color-rcs-9: oklch(from oklch(40% 0.566 39deg) l c h); } } -@supports (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { :root { --color-rcs-10: rgb(from blue r g b); --color-rcs-11: rgb(from blue r g b / alpha); @@ -392,7 +392,7 @@ --prop-8: 1px solid red; } -@supports (color: oklab(0% 0 0)) { +@supports (color: oklab(0% 0 0%)) { @media screen { --prop-8: 1px solid oklch(40% 0.234 0.39 / var(--opacity-50)); } diff --git a/plugins/postcss-relative-color-syntax/test/basic.expect.css b/plugins/postcss-relative-color-syntax/test/basic.expect.css index 089f8ce20..406cd0ca1 100644 --- a/plugins/postcss-relative-color-syntax/test/basic.expect.css +++ b/plugins/postcss-relative-color-syntax/test/basic.expect.css @@ -13,7 +13,7 @@ --color-rcs-14: hsla(from blue h s l / alpha); } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .valid { --color-rcs-8: color(display-p3 0.50566 0.0781 0); --color-rcs-9: color(display-p3 0.48896 0.1211 0); diff --git a/plugins/postcss-relative-color-syntax/test/basic.preserve-true.expect.css b/plugins/postcss-relative-color-syntax/test/basic.preserve-true.expect.css index 2fd269839..ec07b0cb8 100644 --- a/plugins/postcss-relative-color-syntax/test/basic.preserve-true.expect.css +++ b/plugins/postcss-relative-color-syntax/test/basic.preserve-true.expect.css @@ -13,51 +13,51 @@ --color-rcs-14: hsla(from blue h s l / alpha); } -@supports (color: color(xyz 0 0 0)) and (color: rgb(from red r g b)) { +@supports (color: color(xyz 0 0 0%)) and (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .valid { --color-rcs-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); --color-rcs-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); } } -@supports (color: hwb(0 0% 0%)) and (color: rgb(from red r g b)) { +@supports (color: hwb(0 0% 0%)) and (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .valid { --color-rcs-5: hwb(from hwb(50deg 20% 30%) h w b); } } -@supports (color: lab(0% 0 0)) and (color: rgb(from red r g b)) { +@supports (color: lab(0% 0 0%)) and (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .valid { --color-rcs-6: lab(from lab(40% 56.6 39) l a b); --color-rcs-7: lch(from lch(40% 56.6 39) l c h); } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .valid { --color-rcs-8: color(display-p3 0.50566 0.0781 0); } } -@supports (color: oklab(0% 0 0)) and (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) and (color: oklab(0% 0 0%)) { .valid { --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); } } -@supports (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0%)) { .valid { --color-rcs-9: color(display-p3 0.48896 0.1211 0); } } -@supports (color: oklab(0% 0 0)) and (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) and (color: oklab(0% 0 0%)) { .valid { --color-rcs-9: oklch(from oklch(40% 0.566 39deg) l c h); } } -@supports (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .valid { --color-rcs-10: rgb(from blue r g b); --color-rcs-11: rgb(from blue r g b / alpha); @@ -105,7 +105,7 @@ --darkolivegreen-into-gray: rgb(94, 94, 94); } -@supports (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .spec-example-14 { --blue-into-gray: rgb(from blue calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); --red-into-gray: rgb(from red calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); @@ -159,7 +159,7 @@ --mygray: rgb(152, 152, 152); } -@supports (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .spec-example-22 { --mygray: lab(from orchid l 0 0); } @@ -174,7 +174,7 @@ --complement: rgb(225, 130, 149); } -@supports (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .spec-example-24 { --complement: lch(from lightseagreen l c calc(h + 180)); } @@ -185,7 +185,7 @@ --mymuted: rgb(185, 136, 182); } -@supports (color: rgb(from red r g b)) { +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { .spec-example-25 { --mygray: lch(from orchid l 0 h); --mymuted: lch(from lch(from orchid l 0 h) l 30 h);