-
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
postcss-light-dark-function: fix inherited fallback custom props (#…
- Loading branch information
1 parent
a85fb2d
commit 79d7baa
Showing
10 changed files
with
36 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| "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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}; | ||
| 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}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,33 @@ | ||
| import type { AtRule, AtRuleProps, Declaration, Rule, RuleProps } from "postcss"; | ||
| import type { AtRule, AtRuleProps, ChildNode, Container, 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))', | ||
| atRule: (atRuleProps: AtRuleProps) => AtRule, | ||
| preserve?: boolean, | ||
| ): { inner: Rule, outer: Container<ChildNode> } { | ||
| const r = rule({ | ||
| selector: '& *', | ||
| source: decl.source, | ||
| }); | ||
|
|
||
| const r = rule({ | ||
| selector: '& *', | ||
| if (!preserve) { | ||
| return { | ||
| inner: r, | ||
| outer: r | ||
| } | ||
| } | ||
|
|
||
| const supports = atRule({ | ||
| name: 'supports', | ||
| params: 'not (color: light-dark(tan, tan))', | ||
| source: decl.source, | ||
| }); | ||
|
|
||
| supports.append(r); | ||
|
|
||
| return { | ||
| rule: r, | ||
| supports: supports | ||
| inner: r, | ||
| outer: supports | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters