From bcacf47ef3e1c34236224c2aa4a998655032fafc Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 22 Sep 2024 11:24:23 +0200 Subject: [PATCH] postcss-light-dark-function: fix default color-scheme --- .../test/basic.autoprefixer.expect.css | 21 +++--- .../test/basic.autoprefixer.false.expect.css | 21 +++--- ...basic.autoprefixer.remove.false.expect.css | 21 +++--- .../test/basic.ch38.expect.css | 21 +++--- .../test/basic.edge16.expect.css | 19 +++-- .../postcss-preset-env/test/basic.expect.css | 21 +++--- .../test/basic.ff49.expect.css | 19 +++-- .../test/basic.ff66.expect.css | 19 +++-- ...ebrew.all-browsers-have-support.expect.css | 19 +++-- .../test/basic.hebrew.expect.css | 21 +++--- .../test/basic.ie10.expect.css | 21 +++--- .../test/basic.nesting.false.expect.css | 23 +++--- .../test/basic.op_mini.expect.css | 21 +++--- .../test/basic.preserve.false.expect.css | 19 +++-- .../test/basic.preserve.true.expect.css | 21 +++--- .../test/basic.safari15.expect.css | 19 +++-- .../test/basic.stage0-ff49.expect.css | 19 +++-- .../test/basic.stage0-ff66.expect.css | 19 +++-- .../test/basic.stage0.expect.css | 21 +++--- .../test/basic.supports-query.expect.css | 19 +++-- .../test/basic.vendors-1.expect.css | 21 +++--- .../test/basic.vendors-2.expect.css | 26 ++++--- .../test/basic.vendors-3.expect.css | 26 ++++--- .../postcss-light-dark-function/CHANGELOG.md | 5 ++ plugins/postcss-light-dark-function/README.md | 42 ++++++----- .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../postcss-light-dark-function/src/index.ts | 32 ++++---- .../src/nested-rule.ts | 25 +++++++ .../postcss-light-dark-function/src/props.ts | 2 +- .../src/transform-light-dark.ts | 6 +- .../test/_browser.mjs | 2 +- .../test/_tape.mjs | 3 + .../test/basic.expect.css | 75 ++++++++++--------- .../test/basic.preserve-false.expect.css | 75 ++++++++++--------- .../test/both-in-root.expect.css | 15 ++-- .../test/cascade-layers-a.expect.css | 2 +- .../test/cascade-layers-b.expect.css | 4 +- .../test/cascade-layers-c.expect.css | 12 +-- .../test/cascade-layers-d.expect.css | 14 ++-- .../test/color-scheme-normal.css | 7 ++ .../test/color-scheme-normal.expect.css | 21 ++++++ .../test/common-patterns-1.expect.css | 32 ++++---- .../test/examples/element.expect.css | 4 +- .../test/examples/example.expect.css | 17 +++-- .../example.preserve-false.expect.css | 17 +++-- .../test/examples/root.expect.css | 4 +- .../test/variables.css | 2 + .../test/variables.expect.css | 24 ++++-- .../test/wpt/light-dark-basic.html | 30 +++++++- .../wpt/light-dark-currentcolor-in-color.html | 11 ++- .../test/wpt/light-dark-inherited.html | 43 +++++++++++ 52 files changed, 632 insertions(+), 375 deletions(-) create mode 100644 plugins/postcss-light-dark-function/src/nested-rule.ts create mode 100644 plugins/postcss-light-dark-function/test/color-scheme-normal.css create mode 100644 plugins/postcss-light-dark-function/test/color-scheme-normal.expect.css 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 a647744f1..4d6073076 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -669,19 +669,19 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -692,8 +692,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -702,9 +702,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 942e537df..e4d1bd7f6 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 @@ -674,19 +674,19 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -697,8 +697,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -707,9 +707,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 2d4a087db..e4c0712cc 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 @@ -693,19 +693,19 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -716,8 +716,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -726,9 +726,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 1553f5353..fae90a22d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -581,19 +581,19 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -604,8 +604,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -614,9 +614,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { diff --git a/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css b/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css index b69a56ec4..bad205cf3 100644 --- a/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css @@ -664,18 +664,18 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -686,8 +686,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -696,9 +696,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index b58b75ce9..00977f756 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -688,19 +688,19 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -711,8 +711,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -721,9 +721,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 d0c6bc4c6..8f51c3fc4 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -581,18 +581,18 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -603,8 +603,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -613,9 +613,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 ced1e79f3..933dca57d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -576,18 +576,18 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -598,8 +598,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -608,9 +608,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 9721f9df3..cdb4bbea7 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 @@ -545,18 +545,18 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -567,8 +567,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -577,9 +577,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 95215e834..eee042a72 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -684,19 +684,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -707,8 +707,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -717,9 +717,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 921d0af1f..296f3acef 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -705,19 +705,19 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -728,8 +728,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -738,9 +738,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 a7eb16325..35f98d9bf 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 @@ -679,19 +679,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -702,11 +702,14 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); - & * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } } 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 51b851981..d93c2e6e4 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 @@ -666,19 +666,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -689,8 +689,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -699,9 +699,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 c80e9d31b..9812f2742 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 @@ -841,18 +841,18 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); } @media (color-gamut: p3) { @@ -862,13 +862,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 e21872406..be6e5c9bb 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 @@ -1180,19 +1180,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -1209,8 +1209,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -1219,9 +1219,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 43517b4a8..854697e6e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -563,18 +563,18 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -585,8 +585,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -595,9 +595,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 9731c4de5..0d0966c35 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 @@ -577,18 +577,18 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -599,8 +599,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -609,9 +609,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 03de5a73e..fa729222d 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 @@ -572,18 +572,18 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -594,8 +594,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -604,9 +604,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 76d30e9ac..71943fca7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -684,19 +684,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -707,8 +707,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -717,9 +717,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 e48aedfab..44d66fa39 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 @@ -574,18 +574,18 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); } @@ -596,8 +596,8 @@ } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -606,9 +606,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 67aa1bd5c..7e166b643 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 @@ -666,26 +666,26 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) rgb(131, 27, 0); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: rgb(131, 27, 0); + color: var(--csstools-light-dark-toggle--1, rgb(131, 27, 0)); color: light-dark(rgb(131, 27, 0), magenta); color: light-dark(color(display-p3 0.4939 0.10676 0), magenta); } .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -694,9 +694,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { 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 00c20cf54..519e40c18 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 @@ -666,26 +666,31 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) lch(from rgb(131, 27, 0) l c h); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: lch(from rgb(131, 27, 0) l c h); color: light-dark(lch(from rgb(131, 27, 0) l c h), magenta); color: light-dark(lch(from color(display-p3 0.4939 0.10676 0) l c h), magenta); } +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { +.schemed-colors { + color: var(--csstools-light-dark-toggle--1, lch(from rgb(131, 27, 0) l c h)); +} +} + .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -694,9 +699,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 8521a423e..853b65167 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -661,26 +661,31 @@ } .dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .schemed-colors { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) lch(from rgb(131, 27, 0) l c h); - color: magenta; - color: var(--csstools-light-dark-toggle--1, magenta); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) magenta; + color: lch(from rgb(131, 27, 0) l c h); color: light-dark(lch(from rgb(131, 27, 0) l c h), magenta); color: light-dark(lch(from color(display-p3 0.4939 0.10676 0) l c h), magenta); } +@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { +.schemed-colors { + color: var(--csstools-light-dark-toggle--1, lch(from rgb(131, 27, 0) l c h)); +} +} + .schemed-prop { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); } @supports (color: light-dark(red, red)) { @@ -689,9 +694,12 @@ } } +@supports not (color: light-dark(tan, tan)) { + .schemed-prop * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--0, deepskyblue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--0, cyan); + } } .content-alt-text { diff --git a/plugins/postcss-light-dark-function/CHANGELOG.md b/plugins/postcss-light-dark-function/CHANGELOG.md index 03011942b..7b6b68a32 100644 --- a/plugins/postcss-light-dark-function/CHANGELOG.md +++ b/plugins/postcss-light-dark-function/CHANGELOG.md @@ -1,5 +1,10 @@ # Changes to PostCSS Light Dark Function +### Unreleased (patch) + +- Fix default behavior to be the `light` `color-scheme` +- Wrap inherited fallback custom props with `@supports not (color: light-dark(tan, tan))` to reduce the number of assigned props in a document. + ### 2.0.2 _August 18, 2024_ diff --git a/plugins/postcss-light-dark-function/README.md b/plugins/postcss-light-dark-function/README.md index 84beb2995..d4c8b4ffe 100644 --- a/plugins/postcss-light-dark-function/README.md +++ b/plugins/postcss-light-dark-function/README.md @@ -27,17 +27,20 @@ With both features combined you can mix and match color schemes in a single docu /* becomes */ .foo { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink; - color: var(--csstools-light-dark-toggle--0, magenta); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--0, pink); color: light-dark(pink, magenta); } .bar { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); - & * { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + } } } @@ -58,10 +61,10 @@ Declare that your document supports both light and dark mode: /* becomes */ :root { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light dark; }@media (prefers-color-scheme: dark) {:root { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; } } ``` @@ -83,13 +86,13 @@ Dynamically alter the supported color scheme for some elements: :root { /* Root only supports light mode */ - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .foo { /* This element and its children only support dark mode */ - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } ``` @@ -147,16 +150,19 @@ postcssLightDarkFunction({ preserve: false }) /* becomes */ .foo { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink; - color: var(--csstools-light-dark-toggle--0, magenta); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--0, pink); } .bar { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); - & * { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + } } } ``` diff --git a/plugins/postcss-light-dark-function/dist/index.cjs b/plugins/postcss-light-dark-function/dist/index.cjs index 3ce6808a8..a4ffccc4c 100644 --- a/plugins/postcss-light-dark-function/dist/index.cjs +++ b/plugins/postcss-light-dark-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-tokenizer"),r=require("@csstools/utilities"),t=require("@csstools/css-parser-algorithms");const s="--csstools-color-scheme--dark",n="initial";function toggleNameGenerator(e){return`--csstools-light-dark-toggle--${e}`}const a=/dark/i,i=/light/i;function colorSchemes(e){const r=o.tokenize({css:e});let t=!1,s=!1;return r.forEach((e=>{o.isTokenIdent(e)&&(i.test(e[4].value)?t=!0:a.test(e[4].value)&&(s=!0))})),[t,s]}const c=/^light-dark$/i;function isComma(e){return t.isTokenNode(e)&&o.isTokenComma(e.value)}function parseLightDark(e){if(!t.isFunctionNode(e)||!c.test(e.getName()))return!1;const o=e.value.filter((e=>!t.isWhitespaceNode(e)&&!t.isCommentNode(e)));if(3!==o.length)return!1;let r=o[0];const s=o[1];let n=o[2];if(!r||!s||!n)return!1;if(!isComma(s))return!1;if(isComma(r)||isComma(n))return!1;if(t.isFunctionNode(r)){const e=[r];t.walk(e,(({node:e,parent:o},r)=>{recurseLightDark(e,o,r,!0)})),[r]=e}if(t.isFunctionNode(n)){const e=[n];t.walk(e,(({node:e,parent:o},r)=>{recurseLightDark(e,o,r,!1)})),[n]=e}return[r,n]}function recurseLightDark(e,o,r,s){if("number"!=typeof r)return;const n=parseLightDark(e);if(!n)return;let a=n[s?0:1];if(t.isFunctionNode(a)){const e=[a];t.walk(e,(({node:e,parent:o},r)=>{recurseLightDark(e,o,r,s)})),[a]=e}o.value[r]=a}function transformLightDark(e,r){const n=new Map,a=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(o.tokenize({css:e})),(e=>{const a=parseLightDark(e);if(!a)return;const[i,c]=a,l=r();return n.set(l,`var(${s}) ${i.toString()}`),new t.FunctionNode([o.TokenType.Function,"var(",-1,-1,{value:"var"}],[o.TokenType.CloseParen,")",-1,-1,void 0],[new t.TokenNode([o.TokenType.Ident,l,-1,-1,{value:l}]),new t.TokenNode([o.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[o.TokenType.Whitespace," ",-1,-1,void 0]]),c])}));return{value:t.stringify(a),toggles:n}}const l=/^color-scheme$/i,u=/\blight-dark\(/i,basePlugin=e=>({postcssPlugin:"postcss-light-dark-function",prepare(){let o=0;const currentToggleNameGenerator=()=>toggleNameGenerator(o++),t=new Map;return{postcssPlugin:"postcss-light-dark-function",Declaration(o,{atRule:a,rule:i}){const c=o.parent;if(c){if(l.test(o.prop)){if(c.some((e=>"decl"===e.type&&e.prop===s)))return;const[e,r]=colorSchemes(o.value);if(e&&r){o.cloneBefore({prop:s,value:" "});const e=c.clone();e.removeAll(),e.append(o.clone({prop:s,value:n}));const r=a({name:"media",params:"(prefers-color-scheme: dark)",source:c.source});return r.append(e),void c.after(r)}return r?void o.cloneBefore({prop:s,value:n}):e?void o.cloneBefore({prop:s,value:" "}):void 0}if(u.test(o.value)){if(r.hasFallback(o))return;if(r.hasSupportsAtRuleAncestor(o,u))return;const s=transformLightDark(o.value,currentToggleNameGenerator);if(s.value===o.value)return;for(const[e,r]of s.toggles)o.cloneBefore({prop:e,value:r});if(o.cloneBefore({value:s.value}),o.variable&&o.parent){const e=t.get(o.parent)??i({selector:"& *",source:o.source});for(const[r,t]of s.toggles)e.append(o.clone({prop:r,value:t}));e.append(o.clone({value:s.value})),t.has(o.parent)||(o.parent.append(e),t.set(o.parent,e))}e?.preserve||o.remove()}}}}}});basePlugin.postcss=!0;const postcssPlugin=o=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-light-dark-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-tokenizer"),t=require("@csstools/utilities"),r=require("@csstools/css-parser-algorithms");const s="--csstools-color-scheme--light",n="initial";function toggleNameGenerator(e){return`--csstools-light-dark-toggle--${e}`}const a=/dark/i,i=/light/i;function colorSchemes(e){const t=o.tokenize({css:e});let r=!1,s=!1;return t.forEach((e=>{o.isTokenIdent(e)&&(i.test(e[4].value)?r=!0:a.test(e[4].value)&&(s=!0))})),[r,s]}const c=/^light-dark$/i;function isComma(e){return r.isTokenNode(e)&&o.isTokenComma(e.value)}function parseLightDark(e){if(!r.isFunctionNode(e)||!c.test(e.getName()))return!1;const o=e.value.filter((e=>!r.isWhitespaceNode(e)&&!r.isCommentNode(e)));if(3!==o.length)return!1;let t=o[0];const s=o[1];let n=o[2];if(!t||!s||!n)return!1;if(!isComma(s))return!1;if(isComma(t)||isComma(n))return!1;if(r.isFunctionNode(t)){const e=[t];r.walk(e,(({node:e,parent:o},t)=>{recurseLightDark(e,o,t,!0)})),[t]=e}if(r.isFunctionNode(n)){const e=[n];r.walk(e,(({node:e,parent:o},t)=>{recurseLightDark(e,o,t,!1)})),[n]=e}return[t,n]}function recurseLightDark(e,o,t,s){if("number"!=typeof t)return;const n=parseLightDark(e);if(!n)return;let a=n[s?0:1];if(r.isFunctionNode(a)){const e=[a];r.walk(e,(({node:e,parent:o},t)=>{recurseLightDark(e,o,t,s)})),[a]=e}o.value[t]=a}function transformLightDark(e,t){const n=new Map,a=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(o.tokenize({css:e})),(e=>{const a=parseLightDark(e);if(!a)return;const[i,c]=a,u=t();return n.set(u,`var(${s}) ${c.toString()}`),new r.FunctionNode([o.TokenType.Function,"var(",-1,-1,{value:"var"}],[o.TokenType.CloseParen,")",-1,-1,void 0],[new r.TokenNode([o.TokenType.Ident,u,-1,-1,{value:u}]),new r.TokenNode([o.TokenType.Comma,",",-1,-1,void 0]),new r.WhitespaceNode([[o.TokenType.Whitespace," ",-1,-1,void 0]]),i])}));return{value:r.stringify(a),toggles:n}}function newNestedRuleWithSupportsNot(e,o,t){const r=t({name:"supports",params:"not (color: light-dark(tan, tan))",source:e.source}),s=o({selector:"& *",source:e.source});return r.append(s),{rule:s,supports:r}}const u=/^color-scheme$/i,l=/\blight-dark\(/i,basePlugin=e=>({postcssPlugin:"postcss-light-dark-function",prepare(){let o=0;const currentToggleNameGenerator=()=>toggleNameGenerator(o++),r=new Map;return{postcssPlugin:"postcss-light-dark-function",Declaration(o,{atRule:a,rule:i}){const c=o.parent;if(c){if(u.test(o.prop)){if(c.some((e=>"decl"===e.type&&e.prop===s)))return;const[e,t]=colorSchemes(o.value);if(e&&t){o.cloneBefore({prop:s,value:n});const e=c.clone();e.removeAll(),e.append(o.clone({prop:s,value:" "}));const t=a({name:"media",params:"(prefers-color-scheme: dark)",source:c.source});return t.append(e),void c.after(t)}return t?void o.cloneBefore({prop:s,value:" "}):e?void o.cloneBefore({prop:s,value:n}):void 0}if(l.test(o.value)){if(t.hasFallback(o))return;if(t.hasSupportsAtRuleAncestor(o,l))return;const s=transformLightDark(o.value,currentToggleNameGenerator);if(s.value===o.value)return;for(const[e,t]of s.toggles)o.cloneBefore({prop:e,value:t});if(o.cloneBefore({value:s.value}),o.variable&&o.parent){const e=r.get(o.parent)??newNestedRuleWithSupportsNot(o,i,a);for(const[t,r]of s.toggles)e.rule.append(o.clone({prop:t,value:r}));e.rule.append(o.clone({value:s.value})),r.has(o.parent)||(o.parent.append(e.supports),r.set(o.parent,e))}e?.preserve||o.remove()}}}}}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-light-dark-function",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-light-dark-function/dist/index.mjs b/plugins/postcss-light-dark-function/dist/index.mjs index b394554a0..0e2456835 100644 --- a/plugins/postcss-light-dark-function/dist/index.mjs +++ b/plugins/postcss-light-dark-function/dist/index.mjs @@ -1 +1 @@ -import e from"@csstools/postcss-progressive-custom-properties";import{tokenize as r,isTokenIdent as t,isTokenComma as o,TokenType as s}from"@csstools/css-tokenizer";import{hasFallback as n,hasSupportsAtRuleAncestor as a}from"@csstools/utilities";import{isFunctionNode as i,isWhitespaceNode as c,isCommentNode as l,walk as u,isTokenNode as p,replaceComponentValues as f,parseCommaSeparatedListOfComponentValues as v,FunctionNode as g,TokenNode as m,WhitespaceNode as d,stringify as h}from"@csstools/css-parser-algorithms";const k="--csstools-color-scheme--dark",D="initial";function toggleNameGenerator(e){return`--csstools-light-dark-toggle--${e}`}const L=/dark/i,C=/light/i;function colorSchemes(e){const o=r({css:e});let s=!1,n=!1;return o.forEach((e=>{t(e)&&(C.test(e[4].value)?s=!0:L.test(e[4].value)&&(n=!0))})),[s,n]}const P=/^light-dark$/i;function isComma(e){return p(e)&&o(e.value)}function parseLightDark(e){if(!i(e)||!P.test(e.getName()))return!1;const r=e.value.filter((e=>!c(e)&&!l(e)));if(3!==r.length)return!1;let t=r[0];const o=r[1];let s=r[2];if(!t||!o||!s)return!1;if(!isComma(o))return!1;if(isComma(t)||isComma(s))return!1;if(i(t)){const e=[t];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,!0)})),[t]=e}if(i(s)){const e=[s];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,!1)})),[s]=e}return[t,s]}function recurseLightDark(e,r,t,o){if("number"!=typeof t)return;const s=parseLightDark(e);if(!s)return;let n=s[o?0:1];if(i(n)){const e=[n];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,o)})),[n]=e}r.value[t]=n}function transformLightDark(e,t){const o=new Map,n=f(v(r({css:e})),(e=>{const r=parseLightDark(e);if(!r)return;const[n,a]=r,i=t();return o.set(i,`var(${k}) ${n.toString()}`),new g([s.Function,"var(",-1,-1,{value:"var"}],[s.CloseParen,")",-1,-1,void 0],[new m([s.Ident,i,-1,-1,{value:i}]),new m([s.Comma,",",-1,-1,void 0]),new d([[s.Whitespace," ",-1,-1,void 0]]),a])}));return{value:h(n),toggles:o}}const b=/^color-scheme$/i,w=/\blight-dark\(/i,basePlugin=e=>({postcssPlugin:"postcss-light-dark-function",prepare(){let r=0;const currentToggleNameGenerator=()=>toggleNameGenerator(r++),t=new Map;return{postcssPlugin:"postcss-light-dark-function",Declaration(r,{atRule:o,rule:s}){const i=r.parent;if(i){if(b.test(r.prop)){if(i.some((e=>"decl"===e.type&&e.prop===k)))return;const[e,t]=colorSchemes(r.value);if(e&&t){r.cloneBefore({prop:k,value:" "});const e=i.clone();e.removeAll(),e.append(r.clone({prop:k,value:D}));const t=o({name:"media",params:"(prefers-color-scheme: dark)",source:i.source});return t.append(e),void i.after(t)}return t?void r.cloneBefore({prop:k,value:D}):e?void r.cloneBefore({prop:k,value:" "}):void 0}if(w.test(r.value)){if(n(r))return;if(a(r,w))return;const o=transformLightDark(r.value,currentToggleNameGenerator);if(o.value===r.value)return;for(const[e,t]of o.toggles)r.cloneBefore({prop:e,value:t});if(r.cloneBefore({value:o.value}),r.variable&&r.parent){const e=t.get(r.parent)??s({selector:"& *",source:r.source});for(const[t,s]of o.toggles)e.append(r.clone({prop:t,value:s}));e.append(r.clone({value:o.value})),t.has(r.parent)||(r.parent.append(e),t.set(r.parent,e))}e?.preserve||r.remove()}}}}}});basePlugin.postcss=!0;const postcssPlugin=r=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},r);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-light-dark-function",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import e from"@csstools/postcss-progressive-custom-properties";import{tokenize as r,isTokenIdent as t,isTokenComma as o,TokenType as s}from"@csstools/css-tokenizer";import{hasFallback as n,hasSupportsAtRuleAncestor as a}from"@csstools/utilities";import{isFunctionNode as i,isWhitespaceNode as c,isCommentNode as l,walk as u,isTokenNode as p,replaceComponentValues as f,parseCommaSeparatedListOfComponentValues as g,FunctionNode as v,TokenNode as m,WhitespaceNode as d,stringify as h}from"@csstools/css-parser-algorithms";const k="--csstools-color-scheme--light",D="initial";function toggleNameGenerator(e){return`--csstools-light-dark-toggle--${e}`}const L=/dark/i,w=/light/i;function colorSchemes(e){const o=r({css:e});let s=!1,n=!1;return o.forEach((e=>{t(e)&&(w.test(e[4].value)?s=!0:L.test(e[4].value)&&(n=!0))})),[s,n]}const C=/^light-dark$/i;function isComma(e){return p(e)&&o(e.value)}function parseLightDark(e){if(!i(e)||!C.test(e.getName()))return!1;const r=e.value.filter((e=>!c(e)&&!l(e)));if(3!==r.length)return!1;let t=r[0];const o=r[1];let s=r[2];if(!t||!o||!s)return!1;if(!isComma(o))return!1;if(isComma(t)||isComma(s))return!1;if(i(t)){const e=[t];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,!0)})),[t]=e}if(i(s)){const e=[s];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,!1)})),[s]=e}return[t,s]}function recurseLightDark(e,r,t,o){if("number"!=typeof t)return;const s=parseLightDark(e);if(!s)return;let n=s[o?0:1];if(i(n)){const e=[n];u(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,o)})),[n]=e}r.value[t]=n}function transformLightDark(e,t){const o=new Map,n=f(g(r({css:e})),(e=>{const r=parseLightDark(e);if(!r)return;const[n,a]=r,i=t();return o.set(i,`var(${k}) ${a.toString()}`),new v([s.Function,"var(",-1,-1,{value:"var"}],[s.CloseParen,")",-1,-1,void 0],[new m([s.Ident,i,-1,-1,{value:i}]),new m([s.Comma,",",-1,-1,void 0]),new d([[s.Whitespace," ",-1,-1,void 0]]),n])}));return{value:h(n),toggles:o}}function newNestedRuleWithSupportsNot(e,r,t){const o=t({name:"supports",params:"not (color: light-dark(tan, tan))",source:e.source}),s=r({selector:"& *",source:e.source});return o.append(s),{rule:s,supports:o}}const P=/^color-scheme$/i,N=/\blight-dark\(/i,basePlugin=e=>({postcssPlugin:"postcss-light-dark-function",prepare(){let r=0;const currentToggleNameGenerator=()=>toggleNameGenerator(r++),t=new Map;return{postcssPlugin:"postcss-light-dark-function",Declaration(r,{atRule:o,rule:s}){const i=r.parent;if(i){if(P.test(r.prop)){if(i.some((e=>"decl"===e.type&&e.prop===k)))return;const[e,t]=colorSchemes(r.value);if(e&&t){r.cloneBefore({prop:k,value:D});const e=i.clone();e.removeAll(),e.append(r.clone({prop:k,value:" "}));const t=o({name:"media",params:"(prefers-color-scheme: dark)",source:i.source});return t.append(e),void i.after(t)}return t?void r.cloneBefore({prop:k,value:" "}):e?void r.cloneBefore({prop:k,value:D}):void 0}if(N.test(r.value)){if(n(r))return;if(a(r,N))return;const i=transformLightDark(r.value,currentToggleNameGenerator);if(i.value===r.value)return;for(const[e,t]of i.toggles)r.cloneBefore({prop:e,value:t});if(r.cloneBefore({value:i.value}),r.variable&&r.parent){const e=t.get(r.parent)??newNestedRuleWithSupportsNot(r,s,o);for(const[t,o]of i.toggles)e.rule.append(r.clone({prop:t,value:o}));e.rule.append(r.clone({value:i.value})),t.has(r.parent)||(r.parent.append(e.supports),t.set(r.parent,e))}e?.preserve||r.remove()}}}}}});basePlugin.postcss=!0;const postcssPlugin=r=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},r);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-light-dark-function",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-light-dark-function/src/index.ts b/plugins/postcss-light-dark-function/src/index.ts index 4f4e46498..05906028c 100644 --- a/plugins/postcss-light-dark-function/src/index.ts +++ b/plugins/postcss-light-dark-function/src/index.ts @@ -1,9 +1,10 @@ import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; -import type { Container, Plugin, PluginCreator, Rule } from 'postcss'; -import { DARK_PROP, OFF, ON, toggleNameGenerator } from './props'; +import type { AtRule, Container, Plugin, PluginCreator, Rule } from 'postcss'; +import { LIGHT_PROP, OFF, ON, toggleNameGenerator } from './props'; import { colorSchemes } from './color-schemes'; import { hasFallback, hasSupportsAtRuleAncestor } from '@csstools/utilities'; import { transformLightDark } from './transform-light-dark'; +import { newNestedRuleWithSupportsNot } from './nested-rule'; const COLOR_SCHEME_REGEX = /^color-scheme$/i; const LIGHT_DARK_FUNCTION_REGEX = /\blight-dark\(/i; @@ -17,7 +18,7 @@ const basePlugin: PluginCreator = (opts) => { return toggleNameGenerator(counter++); }; - const variableInheritanceRules: Map = new Map(); + const variableInheritanceRules: Map = new Map(); return { postcssPlugin: 'postcss-light-dark-function', @@ -28,19 +29,19 @@ const basePlugin: PluginCreator = (opts) => { } if (COLOR_SCHEME_REGEX.test(decl.prop)) { - if (parent.some((sibling) => sibling.type === 'decl' && sibling.prop === DARK_PROP)) { + if (parent.some((sibling) => sibling.type === 'decl' && sibling.prop === LIGHT_PROP)) { return; } const [light, dark] = colorSchemes(decl.value); if (light && dark) { - decl.cloneBefore({ prop: DARK_PROP, value: OFF }); + decl.cloneBefore({ prop: LIGHT_PROP, value: ON }); const parentClone = parent.clone(); parentClone.removeAll(); - parentClone.append(decl.clone({ prop: DARK_PROP, value: ON })); + parentClone.append(decl.clone({ prop: LIGHT_PROP, value: OFF })); const prefers = atRule({ name: 'media', params: '(prefers-color-scheme: dark)', source: parent.source }); prefers.append(parentClone); @@ -51,13 +52,13 @@ const basePlugin: PluginCreator = (opts) => { } if (dark) { - decl.cloneBefore({ prop: DARK_PROP, value: ON }); + decl.cloneBefore({ prop: LIGHT_PROP, value: OFF }); return; } if (light) { - decl.cloneBefore({ prop: DARK_PROP, value: OFF }); + decl.cloneBefore({ prop: LIGHT_PROP, value: ON }); return; } @@ -86,19 +87,20 @@ const basePlugin: PluginCreator = (opts) => { decl.cloneBefore({ value: modified.value }); if (decl.variable && decl.parent) { - const variableInheritanceRule = variableInheritanceRules.get(decl.parent) ?? rule({ - selector: '& *', - source: decl.source, - }); + const variableInheritanceRule = variableInheritanceRules.get(decl.parent) ?? newNestedRuleWithSupportsNot( + decl, + rule, + atRule + ); for (const [toggleName, toggle] of modified.toggles) { - variableInheritanceRule.append(decl.clone({ prop: toggleName, value: toggle })); + variableInheritanceRule.rule.append(decl.clone({ prop: toggleName, value: toggle })); } - variableInheritanceRule.append(decl.clone({ value: modified.value })); + variableInheritanceRule.rule.append(decl.clone({ value: modified.value })); if (!variableInheritanceRules.has(decl.parent)) { - decl.parent.append(variableInheritanceRule); + decl.parent.append(variableInheritanceRule.supports); variableInheritanceRules.set(decl.parent, variableInheritanceRule); } } diff --git a/plugins/postcss-light-dark-function/src/nested-rule.ts b/plugins/postcss-light-dark-function/src/nested-rule.ts new file mode 100644 index 000000000..f9c7692ca --- /dev/null +++ b/plugins/postcss-light-dark-function/src/nested-rule.ts @@ -0,0 +1,25 @@ +import type { AtRule, AtRuleProps, Declaration, Rule, RuleProps } from "postcss"; + +export function newNestedRuleWithSupportsNot( + decl: Declaration, + rule: (ruleProps: RuleProps) => Rule, + atRule: (atRuleProps: AtRuleProps) => AtRule +): { rule: Rule, supports: AtRule } { + const supports = atRule({ + name: 'supports', + params: 'not (color: light-dark(tan, tan))', + source: decl.source, + }); + + const r = rule({ + selector: '& *', + source: decl.source, + }); + + supports.append(r); + + return { + rule: r, + supports: supports + } +} diff --git a/plugins/postcss-light-dark-function/src/props.ts b/plugins/postcss-light-dark-function/src/props.ts index 40dbdfd06..d829a4457 100644 --- a/plugins/postcss-light-dark-function/src/props.ts +++ b/plugins/postcss-light-dark-function/src/props.ts @@ -1,4 +1,4 @@ -export const DARK_PROP = '--csstools-color-scheme--dark'; +export const LIGHT_PROP = '--csstools-color-scheme--light'; export const ON = 'initial'; export const OFF = ' '; export function toggleNameGenerator(counter: number): string { diff --git a/plugins/postcss-light-dark-function/src/transform-light-dark.ts b/plugins/postcss-light-dark-function/src/transform-light-dark.ts index badf15b08..b5c8c6d12 100644 --- a/plugins/postcss-light-dark-function/src/transform-light-dark.ts +++ b/plugins/postcss-light-dark-function/src/transform-light-dark.ts @@ -2,7 +2,7 @@ import { tokenize } from '@csstools/css-tokenizer'; import { TokenType } from '@csstools/css-tokenizer'; import { FunctionNode, TokenNode, WhitespaceNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; import { parseLightDark } from './parse-light-dark'; -import { DARK_PROP } from './props'; +import { LIGHT_PROP } from './props'; export function transformLightDark(value: string, toggleNameGenerator: () => string): { value: string, toggles: Map } { const toggles: Map = new Map(); @@ -20,7 +20,7 @@ export function transformLightDark(value: string, toggleNameGenerator: () => str const [light, dark] = lightDark; const toggleName = toggleNameGenerator(); - toggles.set(toggleName, `var(${DARK_PROP}) ${light.toString()}`); + toggles.set(toggleName, `var(${LIGHT_PROP}) ${dark.toString()}`); return new FunctionNode( [TokenType.Function, 'var(', -1, -1, { value: 'var' }], @@ -35,7 +35,7 @@ export function transformLightDark(value: string, toggleNameGenerator: () => str new WhitespaceNode( [[TokenType.Whitespace, ' ', -1, -1, undefined]], ), - dark, + light, ], ); }, diff --git a/plugins/postcss-light-dark-function/test/_browser.mjs b/plugins/postcss-light-dark-function/test/_browser.mjs index bc1685f94..03ccc9750 100644 --- a/plugins/postcss-light-dark-function/test/_browser.mjs +++ b/plugins/postcss-light-dark-function/test/_browser.mjs @@ -68,7 +68,7 @@ const requestListener = async function (req, res) { const css = await postcss([plugin({preserve: false})]).process(data, { from: 'test/styles.css', to: 'test/styles.css' }); res.setHeader('Content-type', 'text/css'); res.writeHead(200); - res.end(css.css); + res.end(css.css.replaceAll('not (color: light-dark(tan, tan))', 'not (foo: foo)')); break; } diff --git a/plugins/postcss-light-dark-function/test/_tape.mjs b/plugins/postcss-light-dark-function/test/_tape.mjs index f6956c962..163e6fc0c 100644 --- a/plugins/postcss-light-dark-function/test/_tape.mjs +++ b/plugins/postcss-light-dark-function/test/_tape.mjs @@ -31,6 +31,9 @@ postcssTape(plugin)({ 'cascade-layers-d': { message: 'supports cascade layers', }, + 'color-scheme-normal': { + message: 'support color-scheme normal', + }, 'common-patterns-1': { message: 'support common patterns', }, diff --git a/plugins/postcss-light-dark-function/test/basic.expect.css b/plugins/postcss-light-dark-function/test/basic.expect.css index 56fa1333c..2a7476752 100644 --- a/plugins/postcss-light-dark-function/test/basic.expect.css +++ b/plugins/postcss-light-dark-function/test/basic.expect.css @@ -1,40 +1,40 @@ .color-scheme--dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .color-scheme--light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .color-scheme--light-dark { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light dArk; } @media (prefers-color-scheme: dark) { .color-scheme--light-dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; } } .color-scheme--dark-light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: LIGHT dark; } @media (prefers-color-scheme: dark) { .color-scheme--dark-light { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; } } .light-dark-function { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--0, blue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--0, cyan); color: light-dark(cyan, blue); } @@ -46,79 +46,82 @@ } .light-dark-function-recurse-1 { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--1, blue); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--1, cyan); color: light-dark(light-dark(cyan, rgb(0, 0, 0)), blue); } .light-dark-function-recurse-1 { - --csstools-light-dark-toggle--2: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--2, blue); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--2, cyan); color: light-dark(cyan, light-dark(white, blue)); } .light-dark-function-recurse-2 { - --csstools-light-dark-toggle--3: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--3, blue); + --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--3, cyan); color: light-dark(light-dark(light-dark(cyan, rgb(33, 33, 33)), rgb(0, 0, 0)), blue); } .light-dark-function-recurse-2 { - --csstools-light-dark-toggle--4: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--4, blue); + --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--4, cyan); color: light-dark(cyan, light-dark(white, light-dark(rgb(204, 204, 204), blue))); } .light-dark-function-recurse-3 { - --csstools-light-dark-toggle--5: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--5, blue); + --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--5, cyan); color: light-dark(light-dark(light-dark(light-dark(cyan, rgb(71, 71, 71)), rgb(33, 33, 33)), rgb(0, 0, 0)), blue); } .light-dark-function-recurse-3 { - --csstools-light-dark-toggle--6: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--6, blue); + --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--6, cyan); color: light-dark(cyan, light-dark(white, light-dark(light-dark(rgb(155, 155, 155), blue), blue))); } .light-dark-function-mix { - --csstools-light-dark-toggle--7: var(--csstools-color-scheme--dark) color-mix(in oklch, red, cyan); - color: var(--csstools-light-dark-toggle--7, blue); + --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--7, color-mix(in oklch, red, cyan)); color: light-dark(color-mix(in oklch, red, light-dark(cyan, rgb(0, 0, 0))), blue); } .light-dark-function-mix { - --csstools-light-dark-toggle--8: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--8, color-mix(in oklch, red, blue)); + --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) color-mix(in oklch, red, blue); + color: var(--csstools-light-dark-toggle--8, cyan); color: light-dark(cyan, color-mix(in oklch, red, light-dark(white, blue))); } .light-dark-function-rcs { - --csstools-light-dark-toggle--9: var(--csstools-color-scheme--dark) rgb(from cyan r g b); - color: var(--csstools-light-dark-toggle--9, blue); + --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--9, rgb(from cyan r g b)); color: light-dark(rgb(from light-dark(cyan, rgb(0, 0, 0)) r g b), blue); } .light-dark-function-rcs { - --csstools-light-dark-toggle--10: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--10, rgb(from blue r g b)); + --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) rgb(from blue r g b); + color: var(--csstools-light-dark-toggle--10, cyan); color: light-dark(cyan, rgb(from light-dark(white, blue) r g b)); } .light-dark-function-mix { - --csstools-light-dark-toggle--11: var(--csstools-color-scheme--dark) white; - --csstools-light-dark-toggle--12: var(--csstools-color-scheme--dark) yellow; - color: color-mix(in srgb, var(--csstools-light-dark-toggle--11, blue), var(--csstools-light-dark-toggle--12, red)); + --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) blue; + --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) red; + color: color-mix(in srgb, var(--csstools-light-dark-toggle--11, white), var(--csstools-light-dark-toggle--12, yellow)); color: color-mix(in srgb, light-dark(white, blue), light-dark(yellow, red)); } .prop { - --csstools-light-dark-toggle--13: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--13, deepskyblue); + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--13, cyan); color: blue; - & * { - --csstools-light-dark-toggle--13: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--13, deepskyblue); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--13, cyan); + } } } diff --git a/plugins/postcss-light-dark-function/test/basic.preserve-false.expect.css b/plugins/postcss-light-dark-function/test/basic.preserve-false.expect.css index ad0c2e009..a152b0ee9 100644 --- a/plugins/postcss-light-dark-function/test/basic.preserve-false.expect.css +++ b/plugins/postcss-light-dark-function/test/basic.preserve-false.expect.css @@ -1,40 +1,40 @@ .color-scheme--dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } .color-scheme--light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .color-scheme--light-dark { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light dArk; } @media (prefers-color-scheme: dark) { .color-scheme--light-dark { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; } } .color-scheme--dark-light { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: LIGHT dark; } @media (prefers-color-scheme: dark) { .color-scheme--dark-light { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; } } .light-dark-function { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--0, blue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--0, cyan); } .ignore { @@ -45,67 +45,70 @@ } .light-dark-function-recurse-1 { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--1, blue); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--1, cyan); } .light-dark-function-recurse-1 { - --csstools-light-dark-toggle--2: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--2, blue); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--2, cyan); } .light-dark-function-recurse-2 { - --csstools-light-dark-toggle--3: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--3, blue); + --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--3, cyan); } .light-dark-function-recurse-2 { - --csstools-light-dark-toggle--4: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--4, blue); + --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--4, cyan); } .light-dark-function-recurse-3 { - --csstools-light-dark-toggle--5: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--5, blue); + --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--5, cyan); } .light-dark-function-recurse-3 { - --csstools-light-dark-toggle--6: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--6, blue); + --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--6, cyan); } .light-dark-function-mix { - --csstools-light-dark-toggle--7: var(--csstools-color-scheme--dark) color-mix(in oklch, red, cyan); - color: var(--csstools-light-dark-toggle--7, blue); + --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--7, color-mix(in oklch, red, cyan)); } .light-dark-function-mix { - --csstools-light-dark-toggle--8: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--8, color-mix(in oklch, red, blue)); + --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) color-mix(in oklch, red, blue); + color: var(--csstools-light-dark-toggle--8, cyan); } .light-dark-function-rcs { - --csstools-light-dark-toggle--9: var(--csstools-color-scheme--dark) rgb(from cyan r g b); - color: var(--csstools-light-dark-toggle--9, blue); + --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--9, rgb(from cyan r g b)); } .light-dark-function-rcs { - --csstools-light-dark-toggle--10: var(--csstools-color-scheme--dark) cyan; - color: var(--csstools-light-dark-toggle--10, rgb(from blue r g b)); + --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) rgb(from blue r g b); + color: var(--csstools-light-dark-toggle--10, cyan); } .light-dark-function-mix { - --csstools-light-dark-toggle--11: var(--csstools-color-scheme--dark) white; - --csstools-light-dark-toggle--12: var(--csstools-color-scheme--dark) yellow; - color: color-mix(in srgb, var(--csstools-light-dark-toggle--11, blue), var(--csstools-light-dark-toggle--12, red)); + --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) blue; + --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) red; + color: color-mix(in srgb, var(--csstools-light-dark-toggle--11, white), var(--csstools-light-dark-toggle--12, yellow)); } .prop { - --csstools-light-dark-toggle--13: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--13, deepskyblue); + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--13, cyan); color: blue; - & * { - --csstools-light-dark-toggle--13: var(--csstools-color-scheme--dark) cyan; - --theme-color: var(--csstools-light-dark-toggle--13, deepskyblue); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) deepskyblue; + --theme-color: var(--csstools-light-dark-toggle--13, cyan); + } } } diff --git a/plugins/postcss-light-dark-function/test/both-in-root.expect.css b/plugins/postcss-light-dark-function/test/both-in-root.expect.css index 5f991ed22..e53ce896b 100644 --- a/plugins/postcss-light-dark-function/test/both-in-root.expect.css +++ b/plugins/postcss-light-dark-function/test/both-in-root.expect.css @@ -1,8 +1,8 @@ :root { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) white; - --color: var(--csstools-light-dark-toggle--0, black); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) black; + --color: var(--csstools-light-dark-toggle--0, white); } @supports (color: light-dark(red, red)) { @@ -11,7 +11,10 @@ } } -:root * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) white; - --color: var(--csstools-light-dark-toggle--0, black); +@supports not (color: light-dark(tan, tan)) { + + :root * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) black; + --color: var(--csstools-light-dark-toggle--0, white); + } } diff --git a/plugins/postcss-light-dark-function/test/cascade-layers-a.expect.css b/plugins/postcss-light-dark-function/test/cascade-layers-a.expect.css index 5f9e87524..1de2990c8 100644 --- a/plugins/postcss-light-dark-function/test/cascade-layers-a.expect.css +++ b/plugins/postcss-light-dark-function/test/cascade-layers-a.expect.css @@ -1,6 +1,6 @@ @layer theme { :root { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } } diff --git a/plugins/postcss-light-dark-function/test/cascade-layers-b.expect.css b/plugins/postcss-light-dark-function/test/cascade-layers-b.expect.css index 1edd45d7b..de4056bac 100644 --- a/plugins/postcss-light-dark-function/test/cascade-layers-b.expect.css +++ b/plugins/postcss-light-dark-function/test/cascade-layers-b.expect.css @@ -1,7 +1,7 @@ @layer theme { :root { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) red; - color: var(--csstools-light-dark-toggle--0, blue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--0, red); color: light-dark(red, blue); } } diff --git a/plugins/postcss-light-dark-function/test/cascade-layers-c.expect.css b/plugins/postcss-light-dark-function/test/cascade-layers-c.expect.css index db39fedb6..230a1795b 100644 --- a/plugins/postcss-light-dark-function/test/cascade-layers-c.expect.css +++ b/plugins/postcss-light-dark-function/test/cascade-layers-c.expect.css @@ -1,10 +1,12 @@ @layer theme { :root { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) red; - --color: var(--csstools-light-dark-toggle--0, blue); - & * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) red; - --color: var(--csstools-light-dark-toggle--0, blue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + --color: var(--csstools-light-dark-toggle--0, red); + @supports not (color: light-dark(tan, tan)) { + & * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + --color: var(--csstools-light-dark-toggle--0, red); + } } } diff --git a/plugins/postcss-light-dark-function/test/cascade-layers-d.expect.css b/plugins/postcss-light-dark-function/test/cascade-layers-d.expect.css index c6f3d8bd2..ade176689 100644 --- a/plugins/postcss-light-dark-function/test/cascade-layers-d.expect.css +++ b/plugins/postcss-light-dark-function/test/cascade-layers-d.expect.css @@ -1,12 +1,14 @@ @layer theme { :root { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) red; - --color: var(--csstools-light-dark-toggle--0, blue); - & * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) red; - --color: var(--csstools-light-dark-toggle--0, blue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + --color: var(--csstools-light-dark-toggle--0, red); + @supports not (color: light-dark(tan, tan)) { + & * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + --color: var(--csstools-light-dark-toggle--0, red); + } } } diff --git a/plugins/postcss-light-dark-function/test/color-scheme-normal.css b/plugins/postcss-light-dark-function/test/color-scheme-normal.css new file mode 100644 index 000000000..be27ca273 --- /dev/null +++ b/plugins/postcss-light-dark-function/test/color-scheme-normal.css @@ -0,0 +1,7 @@ +:root { + color-scheme: normal; +} + +.foo { + --color: light-dark(white, black); +} diff --git a/plugins/postcss-light-dark-function/test/color-scheme-normal.expect.css b/plugins/postcss-light-dark-function/test/color-scheme-normal.expect.css new file mode 100644 index 000000000..4a1ee5fb2 --- /dev/null +++ b/plugins/postcss-light-dark-function/test/color-scheme-normal.expect.css @@ -0,0 +1,21 @@ +:root { + color-scheme: normal; +} + +.foo { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) black; + --color: var(--csstools-light-dark-toggle--0, white); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) black; + --color: var(--csstools-light-dark-toggle--0, white); + } + } +} + +@supports (color: light-dark(red, red)) { +.foo { + --color: light-dark(white, black); +} +} diff --git a/plugins/postcss-light-dark-function/test/common-patterns-1.expect.css b/plugins/postcss-light-dark-function/test/common-patterns-1.expect.css index 6dbed23b8..e7a79a5f0 100644 --- a/plugins/postcss-light-dark-function/test/common-patterns-1.expect.css +++ b/plugins/postcss-light-dark-function/test/common-patterns-1.expect.css @@ -1,24 +1,26 @@ /* multiple color vars in ":root" */ :root { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light dark; - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) red; + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) pink; - --color-red: var(--csstools-light-dark-toggle--0, pink); - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) blue; - --color-blue: var(--csstools-light-dark-toggle--1, cyan); - --csstools-light-dark-toggle--2: var(--csstools-color-scheme--dark) green; - --color-green: var(--csstools-light-dark-toggle--2, lime); - & * { + --color-red: var(--csstools-light-dark-toggle--0, red); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) cyan; + --color-blue: var(--csstools-light-dark-toggle--1, blue); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) lime; + --color-green: var(--csstools-light-dark-toggle--2, green); + @supports not (color: light-dark(tan, tan)) { + & * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) red; + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) pink; - --color-red: var(--csstools-light-dark-toggle--0, pink); - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) blue; - --color-blue: var(--csstools-light-dark-toggle--1, cyan); - --csstools-light-dark-toggle--2: var(--csstools-color-scheme--dark) green; - --color-green: var(--csstools-light-dark-toggle--2, lime); + --color-red: var(--csstools-light-dark-toggle--0, red); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) cyan; + --color-blue: var(--csstools-light-dark-toggle--1, blue); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) lime; + --color-green: var(--csstools-light-dark-toggle--2, green); + } } } @supports (color: light-dark(red, red)) { @@ -31,6 +33,6 @@ } @media (prefers-color-scheme: dark) { :root { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; } } diff --git a/plugins/postcss-light-dark-function/test/examples/element.expect.css b/plugins/postcss-light-dark-function/test/examples/element.expect.css index e520ec1d7..5558dee51 100644 --- a/plugins/postcss-light-dark-function/test/examples/element.expect.css +++ b/plugins/postcss-light-dark-function/test/examples/element.expect.css @@ -1,11 +1,11 @@ :root { /* Root only supports light mode */ - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light; } .foo { /* This element and its children only support dark mode */ - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; color-scheme: dark; } diff --git a/plugins/postcss-light-dark-function/test/examples/example.expect.css b/plugins/postcss-light-dark-function/test/examples/example.expect.css index d4d1b5461..a9f94f29e 100644 --- a/plugins/postcss-light-dark-function/test/examples/example.expect.css +++ b/plugins/postcss-light-dark-function/test/examples/example.expect.css @@ -1,15 +1,18 @@ .foo { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink; - color: var(--csstools-light-dark-toggle--0, magenta); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--0, pink); color: light-dark(pink, magenta); } .bar { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); - & * { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + } } } diff --git a/plugins/postcss-light-dark-function/test/examples/example.preserve-false.expect.css b/plugins/postcss-light-dark-function/test/examples/example.preserve-false.expect.css index 0fb81e73c..38a19527b 100644 --- a/plugins/postcss-light-dark-function/test/examples/example.preserve-false.expect.css +++ b/plugins/postcss-light-dark-function/test/examples/example.preserve-false.expect.css @@ -1,13 +1,16 @@ .foo { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink; - color: var(--csstools-light-dark-toggle--0, magenta); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta; + color: var(--csstools-light-dark-toggle--0, pink); } .bar { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); - & * { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan; - --bar: var(--csstools-light-dark-toggle--1, deepskyblue); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + @supports not (color: light-dark(tan, tan)) { + + & * { + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; + --bar: var(--csstools-light-dark-toggle--1, cyan); + } } } diff --git a/plugins/postcss-light-dark-function/test/examples/root.expect.css b/plugins/postcss-light-dark-function/test/examples/root.expect.css index 78f64c294..8b19f98a0 100644 --- a/plugins/postcss-light-dark-function/test/examples/root.expect.css +++ b/plugins/postcss-light-dark-function/test/examples/root.expect.css @@ -1,7 +1,7 @@ :root { - --csstools-color-scheme--dark: ; + --csstools-color-scheme--light: initial; color-scheme: light dark; }@media (prefers-color-scheme: dark) {:root { - --csstools-color-scheme--dark: initial; + --csstools-color-scheme--light: ; } } diff --git a/plugins/postcss-light-dark-function/test/variables.css b/plugins/postcss-light-dark-function/test/variables.css index c8dbb4438..b08ce85af 100644 --- a/plugins/postcss-light-dark-function/test/variables.css +++ b/plugins/postcss-light-dark-function/test/variables.css @@ -1,7 +1,9 @@ :root { --color-light-dark-1: light-dark(green, blue); + --color-light-dark-2: light-dark(lime, cyan); } :root { color: light-dark(var(--green), blue); + background-color: light-dark(var(--pink), magenta); } diff --git a/plugins/postcss-light-dark-function/test/variables.expect.css b/plugins/postcss-light-dark-function/test/variables.expect.css index ae41263fb..213f2fd39 100644 --- a/plugins/postcss-light-dark-function/test/variables.expect.css +++ b/plugins/postcss-light-dark-function/test/variables.expect.css @@ -1,25 +1,35 @@ :root { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) green; - --color-light-dark-1: var(--csstools-light-dark-toggle--0, blue); - & * { - --csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) green; - --color-light-dark-1: var(--csstools-light-dark-toggle--0, blue); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + --color-light-dark-1: var(--csstools-light-dark-toggle--0, green); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) cyan; + --color-light-dark-2: var(--csstools-light-dark-toggle--1, lime); + @supports not (color: light-dark(tan, tan)) { + & * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) blue; + --color-light-dark-1: var(--csstools-light-dark-toggle--0, green); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) cyan; + --color-light-dark-2: var(--csstools-light-dark-toggle--1, lime); + } } } @supports (color: light-dark(red, red)) { :root { --color-light-dark-1: light-dark(green, blue); + --color-light-dark-2: light-dark(lime, cyan); } } :root { - --csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) var(--green); - color: var(--csstools-light-dark-toggle--1, blue); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) blue; + color: var(--csstools-light-dark-toggle--2, var(--green)); + --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) magenta; + background-color: var(--csstools-light-dark-toggle--3, var(--pink)); } @supports (color: light-dark(red, red)) { :root { color: light-dark(var(--green), blue); + background-color: light-dark(var(--pink), magenta); } } diff --git a/plugins/postcss-light-dark-function/test/wpt/light-dark-basic.html b/plugins/postcss-light-dark-function/test/wpt/light-dark-basic.html index 85924c579..af7c9d56f 100644 --- a/plugins/postcss-light-dark-function/test/wpt/light-dark-basic.html +++ b/plugins/postcss-light-dark-function/test/wpt/light-dark-basic.html @@ -81,6 +81,25 @@ expected_light: 'rgb(255, 255, 255)', expected_dark: 'rgb(255, 0, 0)', }, + { + title: 'Light Dark Basic - C', + style: ` + #light { + color-scheme: light; + } + + #dark { + color-scheme: dark; + } + + .box { + background-color: light-dark(white, black); + } + `, + expected_light: 'rgb(255, 255, 255)', + expected_dark: 'rgb(0, 0, 0)', + root_supports_only_light: true, + }, { title: 'Light Dark Cascade Layers - A', style: ` @@ -144,8 +163,15 @@ document.head.append(styleElement); for (let element of elements) { - let should_be_dark = element.id == "dark" || (element.id == "system" && system_is_dark); - assert_equals(getComputedStyle(element).backgroundColor, should_be_dark ? testCase.expected_dark : testCase.expected_light); + let should_be_dark = element.id == "dark" || (element.id == "system" && system_is_dark && !testCase.root_supports_only_light); + let actual_value = getComputedStyle(element).backgroundColor; + let expected_value = should_be_dark ? testCase.expected_dark : testCase.expected_light; + + assert_equals( + actual_value, + expected_value, + `${testCase.title} (${element.id}, ${system_is_dark ? 'is dark' : 'is not dark'})` + ); } styleElement.remove(); diff --git a/plugins/postcss-light-dark-function/test/wpt/light-dark-currentcolor-in-color.html b/plugins/postcss-light-dark-function/test/wpt/light-dark-currentcolor-in-color.html index 5958da85b..355d0320e 100644 --- a/plugins/postcss-light-dark-function/test/wpt/light-dark-currentcolor-in-color.html +++ b/plugins/postcss-light-dark-function/test/wpt/light-dark-currentcolor-in-color.html @@ -69,8 +69,15 @@ document.head.append(styleElement); for (let element of elements) { - let should_be_dark = element.id == "dark" || (element.id == "system" && system_is_dark); - assert_equals(getComputedStyle(element).color, should_be_dark ? testCase.expected_dark : testCase.expected_light); + let should_be_dark = element.id == "dark" || (element.id == "system" && system_is_dark && !testCase.root_supports_only_light); + let actual_value = getComputedStyle(element).color; + let expected_value = should_be_dark ? testCase.expected_dark : testCase.expected_light; + + assert_equals( + actual_value, + expected_value, + `${testCase.title} (${element.id}, ${system_is_dark ? 'is dark' : 'is not dark'})` + ); } styleElement.remove(); diff --git a/plugins/postcss-light-dark-function/test/wpt/light-dark-inherited.html b/plugins/postcss-light-dark-function/test/wpt/light-dark-inherited.html index 28bc61081..63b5fa814 100644 --- a/plugins/postcss-light-dark-function/test/wpt/light-dark-inherited.html +++ b/plugins/postcss-light-dark-function/test/wpt/light-dark-inherited.html @@ -147,6 +147,49 @@ styleElement.remove(); } + { + const styleElement = document.createElement('style'); + + const testCaseStyle = await (fetch(`/test/styles.css`, { + method: 'POST', + body: ` + .light { + color-scheme: light; + } + + .dark { + color-scheme: dark; + } + + #a { + --color-a: light-dark(rgb(1, 0, 0), rgb(0, 1, 0)); + color: green; + background-color: light-dark(rgb(2, 0, 0), rgb(0, 2, 0)); + border-color: var(--color-a); + } + `, + }).then((response) => response.text())); + + styleElement.textContent = testCaseStyle; + document.head.append(styleElement); + + const a = getComputedStyle(document.getElementById('a')); + const b = getComputedStyle(document.getElementById('b')); + const c = getComputedStyle(document.getElementById('c')); + const d = getComputedStyle(document.getElementById('d')); + const e = getComputedStyle(document.getElementById('e')); + + assert_equals(a.color, 'rgb(0, 128, 0)', 'a color'); + assert_equals(a.backgroundColor, 'rgb(2, 0, 0)', 'a background-color'); + assert_equals(a.borderColor, 'rgb(1, 0, 0)', 'a border-color'); + + assert_equals(b.color, 'rgb(0, 128, 0)', 'a color'); + assert_equals(b.backgroundColor, 'rgba(0, 0, 0, 0)', 'a background-color'); + assert_equals(b.borderColor, 'rgb(0, 128, 0)', 'a border-color'); + + styleElement.remove(); + } + return true; }