Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 79d7baa

Browse files
romainmenkeromainmenke
authoredSep 22, 2024··
postcss-light-dark-function: fix inherited fallback custom props (#1478)
1 parent a85fb2d commit 79d7baa

File tree

10 files changed

+36
-35
lines changed

10 files changed

+36
-35
lines changed
 

‎plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -866,12 +866,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
866866
--theme-color: var(--csstools-light-dark-toggle--0, cyan);
867867
}
868868

869-
@supports not (color: light-dark(tan, tan)) {
870-
871869
.schemed-prop * {
872870
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) deepskyblue;
873871
--theme-color: var(--csstools-light-dark-toggle--0, cyan);
874-
}
875872
}
876873

877874
.content-alt-text {

‎plugins/postcss-light-dark-function/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to PostCSS Light Dark Function
22

3+
### Unreleased (patch)
4+
5+
- Fix inherited fallback custom props when `preserve` is `false`
6+
37
### 2.0.3
48

59
_September 22, 2024_

‎plugins/postcss-light-dark-function/README.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,12 +157,9 @@ postcssLightDarkFunction({ preserve: false })
157157
.bar {
158158
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
159159
--bar: var(--csstools-light-dark-toggle--1, cyan);
160-
@supports not (color: light-dark(tan, tan)) {
161-
162-
& * {
160+
& * {
163161
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
164162
--bar: var(--csstools-light-dark-toggle--1, cyan);
165-
}
166163
}
167164
}
168165
```

‎plugins/postcss-light-dark-function/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
"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;
1+
"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 i=/dark/i,a=/light/i;function colorSchemes(e){const t=o.tokenize({css:e});let r=!1,s=!1;return t.forEach((e=>{o.isTokenIdent(e)&&(a.test(e[4].value)?r=!0:i.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 i=n[s?0:1];if(r.isFunctionNode(i)){const e=[i];r.walk(e,(({node:e,parent:o},t)=>{recurseLightDark(e,o,t,s)})),[i]=e}o.value[t]=i}function transformLightDark(e,t){const n=new Map,i=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(o.tokenize({css:e})),(e=>{const i=parseLightDark(e);if(!i)return;const[a,c]=i,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]]),a])}));return{value:r.stringify(i),toggles:n}}function newNestedRuleWithSupportsNot(e,o,t,r){const s=o({selector:"& *",source:e.source});if(!r)return{inner:s,outer:s};const n=t({name:"supports",params:"not (color: light-dark(tan, tan))",source:e.source});return n.append(s),{inner:s,outer:n}}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:i,rule:a}){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=i({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 t=r.get(o.parent)??newNestedRuleWithSupportsNot(o,a,i,e?.preserve);for(const[e,r]of s.toggles)t.inner.append(o.clone({prop:e,value:r}));t.inner.append(o.clone({value:s.value})),r.has(o.parent)||(o.parent.append(t.outer),r.set(o.parent,t))}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;

‎plugins/postcss-light-dark-function/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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 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};
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 u,walk as l,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)&&!u(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];l(e,(({node:e,parent:r},t)=>{recurseLightDark(e,r,t,!0)})),[t]=e}if(i(s)){const e=[s];l(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];l(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,o){const s=r({selector:"& *",source:e.source});if(!o)return{inner:s,outer:s};const n=t({name:"supports",params:"not (color: light-dark(tan, tan))",source:e.source});return n.append(s),{inner:s,outer:n}}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 n=t.get(r.parent)??newNestedRuleWithSupportsNot(r,s,o,e?.preserve);for(const[e,t]of i.toggles)n.inner.append(r.clone({prop:e,value:t}));n.inner.append(r.clone({value:i.value})),t.has(r.parent)||(r.parent.append(n.outer),t.set(r.parent,n))}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};

‎plugins/postcss-light-dark-function/src/index.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
2-
import type { AtRule, Container, Plugin, PluginCreator, Rule } from 'postcss';
2+
import type { ChildNode, Container, Plugin, PluginCreator, Rule } from 'postcss';
33
import { LIGHT_PROP, OFF, ON, toggleNameGenerator } from './props';
44
import { colorSchemes } from './color-schemes';
55
import { hasFallback, hasSupportsAtRuleAncestor } from '@csstools/utilities';
@@ -18,7 +18,7 @@ const basePlugin: PluginCreator<pluginOptions> = (opts) => {
1818
return toggleNameGenerator(counter++);
1919
};
2020

21-
const variableInheritanceRules: Map<Container, { rule: Rule, supports: AtRule }> = new Map();
21+
const variableInheritanceRules: Map<Container, { inner: Rule, outer: Container<ChildNode> }> = new Map();
2222

2323
return {
2424
postcssPlugin: 'postcss-light-dark-function',
@@ -90,17 +90,18 @@ const basePlugin: PluginCreator<pluginOptions> = (opts) => {
9090
const variableInheritanceRule = variableInheritanceRules.get(decl.parent) ?? newNestedRuleWithSupportsNot(
9191
decl,
9292
rule,
93-
atRule
93+
atRule,
94+
opts?.preserve,
9495
);
9596

9697
for (const [toggleName, toggle] of modified.toggles) {
97-
variableInheritanceRule.rule.append(decl.clone({ prop: toggleName, value: toggle }));
98+
variableInheritanceRule.inner.append(decl.clone({ prop: toggleName, value: toggle }));
9899
}
99100

100-
variableInheritanceRule.rule.append(decl.clone({ value: modified.value }));
101+
variableInheritanceRule.inner.append(decl.clone({ value: modified.value }));
101102

102103
if (!variableInheritanceRules.has(decl.parent)) {
103-
decl.parent.append(variableInheritanceRule.supports);
104+
decl.parent.append(variableInheritanceRule.outer);
104105
variableInheritanceRules.set(decl.parent, variableInheritanceRule);
105106
}
106107
}

‎plugins/postcss-light-dark-function/src/nested-rule.ts

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
1-
import type { AtRule, AtRuleProps, Declaration, Rule, RuleProps } from "postcss";
1+
import type { AtRule, AtRuleProps, ChildNode, Container, Declaration, Rule, RuleProps } from "postcss";
22

33
export function newNestedRuleWithSupportsNot(
44
decl: Declaration,
55
rule: (ruleProps: RuleProps) => Rule,
6-
atRule: (atRuleProps: AtRuleProps) => AtRule
7-
): { rule: Rule, supports: AtRule } {
8-
const supports = atRule({
9-
name: 'supports',
10-
params: 'not (color: light-dark(tan, tan))',
6+
atRule: (atRuleProps: AtRuleProps) => AtRule,
7+
preserve?: boolean,
8+
): { inner: Rule, outer: Container<ChildNode> } {
9+
const r = rule({
10+
selector: '& *',
1111
source: decl.source,
1212
});
1313

14-
const r = rule({
15-
selector: '& *',
14+
if (!preserve) {
15+
return {
16+
inner: r,
17+
outer: r
18+
}
19+
}
20+
21+
const supports = atRule({
22+
name: 'supports',
23+
params: 'not (color: light-dark(tan, tan))',
1624
source: decl.source,
1725
});
1826

1927
supports.append(r);
2028

2129
return {
22-
rule: r,
23-
supports: supports
30+
inner: r,
31+
outer: supports
2432
}
2533
}

‎plugins/postcss-light-dark-function/test/_browser.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,10 @@ const requestListener = async function (req, res) {
6565
break;
6666
}
6767

68-
const css = await postcss([plugin({preserve: false})]).process(data, { from: 'test/styles.css', to: 'test/styles.css' });
68+
const css = await postcss([plugin({ preserve: false })]).process(data, { from: 'test/styles.css', to: 'test/styles.css' });
6969
res.setHeader('Content-type', 'text/css');
7070
res.writeHead(200);
71-
res.end(css.css.replaceAll('not (color: light-dark(tan, tan))', 'not (foo: foo)'));
71+
res.end(css.css);
7272
break;
7373
}
7474

‎plugins/postcss-light-dark-function/test/basic.preserve-false.expect.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,8 @@
104104
--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) deepskyblue;
105105
--theme-color: var(--csstools-light-dark-toggle--13, cyan);
106106
color: blue;
107-
@supports not (color: light-dark(tan, tan)) {
108-
109-
& * {
107+
& * {
110108
--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) deepskyblue;
111109
--theme-color: var(--csstools-light-dark-toggle--13, cyan);
112-
}
113110
}
114111
}

‎plugins/postcss-light-dark-function/test/examples/example.preserve-false.expect.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,8 @@
66
.bar {
77
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
88
--bar: var(--csstools-light-dark-toggle--1, cyan);
9-
@supports not (color: light-dark(tan, tan)) {
10-
11-
& * {
9+
& * {
1210
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
1311
--bar: var(--csstools-light-dark-toggle--1, cyan);
14-
}
1512
}
1613
}

0 commit comments

Comments
 (0)
Please sign in to comment.