From 998270a9c70c05853335bff91df4d32ad6823acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 19 Nov 2024 15:48:23 +0100 Subject: [PATCH] Feat(exporter-tokens): Add `color` prefix to css-variables mixin --- exporters/tokens/generated/exporter.cjs | 6 +++--- .../tokens/src/generators/__tests__/fileGenerator.test.ts | 2 +- .../tokens/src/generators/__tests__/mixinGenerator.test.ts | 6 ++---- exporters/tokens/src/generators/contentGenerator.ts | 1 - exporters/tokens/src/generators/mixinGenerator.ts | 3 +-- 5 files changed, 7 insertions(+), 11 deletions(-) diff --git a/exporters/tokens/generated/exporter.cjs b/exporters/tokens/generated/exporter.cjs index bd274fc955..cb0c4ffeb9 100644 --- a/exporters/tokens/generated/exporter.cjs +++ b/exporters/tokens/generated/exporter.cjs @@ -38,8 +38,8 @@ ${n.join(`, }`,Jt=n=>`( ${n.join(`, `)}, -)`,eo=(n,a)=>`${n}: ${/\s/.test(a)?`"${a}"`:a}`,to=(n,a)=>{const c=qt(n);let i;return typeof a=="string"&&a.includes(", ")?i=`"${a}"`:Zt(a)?i=a:i=Xt(a),`${c}: ${i}`},ee=(n,a)=>Object.entries(n).map(c=>{const[i,m]=c;return a(i,m)}),oo=({fontFamily:n,fontSize:a,fontWeight:c,lineHeight:i},m,y)=>{const f={fontFamily:`'${n.text}', sans-serif`,fontSize:`'${a.measure}${a.unit==="Pixels"?"px":a.unit}'`,fontStyle:`'${m?"italic":"normal"}'`,fontWeight:c.text};i&&i.measure&&(f.lineHeight=i.measure/100);const r=ee(f,to),t=ee(f,eo);return y?Qt(t):Jt(r)},ro=(n,a,c,i,m,y,f)=>{var t,o,e,s;const r=T=>{const{tokenType:l}=n;return l===T};if(r(k.TokenType.dimension)){const T=n,l=I(T,c,y);let p=(t=T.value)==null?void 0:t.measure;p=A(l,p);const u=P.CSSHelper.unitToCSS((o=T.value)==null?void 0:o.unit);return B(l,p,f,u)}if(r(k.TokenType.string)){const T=n,l=I(T,c,y);let p=T.value.text;return p=A(l,p),B(l,p,f)}if(r(k.TokenType.color)){const T=n,l=I(T,c,y);if(m){let p=P.CSSHelper.colorTokenValueToCSS(T.value,a,{allowReferences:!0,decimals:3,colorFormat:P.ColorFormat.hex8,tokenToVariableRef:()=>""});return p=A(l,ye(p)),B(l,p,f)}return`$${l}: var(--${i}color-${l});`}if(r(k.TokenType.shadow)){const T=n,l=I(n,c,y),{value:p,origin:u}=T;let d=P.CSSHelper.shadowTokenValueToCSS(p,a,{allowReferences:!0,decimals:3,colorFormat:P.ColorFormat.hashHex8,tokenToVariableRef:()=>""});const g=y||(e=u==null?void 0:u.name)==null?void 0:e.split("/")[0].toLowerCase();return d=Z(l,d,i,g),d=X(d),B(l,d,f)}if(r(k.TokenType.gradient)){const T=n,l=I(n,c,y),{value:p,origin:u}=T;let d=P.CSSHelper.gradientTokenValueToCSS(p,a,{allowReferences:!0,colorFormat:P.ColorFormat.hashHex8,decimals:3,tokenToVariableRef:()=>""});d=zt(d);const g=y||(s=u==null?void 0:u.name)==null?void 0:s.split("/")[0].toLowerCase();return d=Z(l,d,i,g),d=X(d),B(l,d,f)}return null},no=(n,a,c,i,m,y,f,r,t=!1)=>{const e=be(n,c,f,m,r).map(s=>({css:ro(s,a,c,i,y,f,t),parentGroupId:s.parentGroupId}));return Kt(e)},ao=(n,a,c,i)=>{const m=a,y=n.slice(0,2),f=Vt(n).toLowerCase(),r=Ut(n).toLowerCase();let t=c;y.forEach((o,e)=>{const s=i?E(f):`$${f}`,T=e===0?s:o;e===y.length-1?t[r]=oo(m.value,f.includes("italic"),i):(t[T]=t[T]||{},t=t[T])})},io=(n,a,c,i,m,y=!1)=>{let f=m;n.forEach((r,t)=>{const o=t===0?Gt(r,a.tokenType,y):r;if(t===n.length-1){const e=y?`${E(I(a,c,i))}`:`$${I(a,c,i)}`,s=Wt(a,y);f[s]=e}else f[y?E(o):o]=f[o]||{},f=f[y?E(o):o]})},so=(n,a,c,i,m)=>{var r,t;const{tokenType:y}=n,f=(t=(r=n.origin)==null?void 0:r.name)==null?void 0:t.split("/");return!f||f.length<=1||(y===k.TokenType.typography?ao(f,n,i,m):io(f,n,a,c,i,m)),i},he=(n,a)=>{const c=a?ue:V;return n.replace(c,"").replace("$","")},co=(n,a)=>({...n,[he(a,!1)]:a}),lo=(n,a)=>n.reduce((c,i)=>({...c,[he(i,a)]:i}),{}),uo=n=>n.reduce(co,{}),po=(n,a,c,i,m)=>{const y=n.reduce((t,o)=>{const e=so(o,c,i,t,m);return{...t,...e}},{}),f=Object.keys(y).filter(t=>t.endsWith(m?ue:V));if(f.length>0){const t=lo(f,m),o=m?z:`$${z}`;return{...y,[o]:t}}const r=Object.keys(y).filter(t=>t.includes("heading")||t.includes("body"));if(r.length>0){const t=uo(r),o=m?q:`$${q}`;return{...y,[o]:{...t,moveToTheEnd:"true"}}}return y},To="css-variable-prefix",mo=n=>{var i;const a=n.find(m=>m.tokenType===k.TokenType.string&&m.name===To);return((i=a==null?void 0:a.value)==null?void 0:i.text)??""},yo=(n,a,c,i,m,y,f)=>`@mixin css-variables { -${be(n,c,y,m,f).map(o=>{const e=I(o,c,y);return`${pe}--${i}color-${e}: #{$${e}};`}).join(` +)`,eo=(n,a)=>`${n}: ${/\s/.test(a)?`"${a}"`:a}`,to=(n,a)=>{const c=qt(n);let i;return typeof a=="string"&&a.includes(", ")?i=`"${a}"`:Zt(a)?i=a:i=Xt(a),`${c}: ${i}`},ee=(n,a)=>Object.entries(n).map(c=>{const[i,m]=c;return a(i,m)}),oo=({fontFamily:n,fontSize:a,fontWeight:c,lineHeight:i},m,y)=>{const f={fontFamily:`'${n.text}', sans-serif`,fontSize:`'${a.measure}${a.unit==="Pixels"?"px":a.unit}'`,fontStyle:`'${m?"italic":"normal"}'`,fontWeight:c.text};i&&i.measure&&(f.lineHeight=i.measure/100);const r=ee(f,to),t=ee(f,eo);return y?Qt(t):Jt(r)},ro=(n,a,c,i,m,y,f)=>{var t,o,e,s;const r=T=>{const{tokenType:l}=n;return l===T};if(r(k.TokenType.dimension)){const T=n,l=I(T,c,y);let p=(t=T.value)==null?void 0:t.measure;p=A(l,p);const u=P.CSSHelper.unitToCSS((o=T.value)==null?void 0:o.unit);return B(l,p,f,u)}if(r(k.TokenType.string)){const T=n,l=I(T,c,y);let p=T.value.text;return p=A(l,p),B(l,p,f)}if(r(k.TokenType.color)){const T=n,l=I(T,c,y);if(m){let p=P.CSSHelper.colorTokenValueToCSS(T.value,a,{allowReferences:!0,decimals:3,colorFormat:P.ColorFormat.hex8,tokenToVariableRef:()=>""});return p=A(l,ye(p)),B(l,p,f)}return`$${l}: var(--${i}color-${l});`}if(r(k.TokenType.shadow)){const T=n,l=I(n,c,y),{value:p,origin:u}=T;let d=P.CSSHelper.shadowTokenValueToCSS(p,a,{allowReferences:!0,decimals:3,colorFormat:P.ColorFormat.hashHex8,tokenToVariableRef:()=>""});const g=y||(e=u==null?void 0:u.name)==null?void 0:e.split("/")[0].toLowerCase();return d=Z(l,d,i,g),d=X(d),B(l,d,f)}if(r(k.TokenType.gradient)){const T=n,l=I(n,c,y),{value:p,origin:u}=T;let d=P.CSSHelper.gradientTokenValueToCSS(p,a,{allowReferences:!0,colorFormat:P.ColorFormat.hashHex8,decimals:3,tokenToVariableRef:()=>""});d=zt(d);const g=y||(s=u==null?void 0:u.name)==null?void 0:s.split("/")[0].toLowerCase();return d=Z(l,d,i,g),d=X(d),B(l,d,f)}return null},no=(n,a,c,i,m,y,f,r,t=!1)=>{const e=be(n,c,f,m,r).map(s=>({css:ro(s,a,c,i,y,f,t),parentGroupId:s.parentGroupId}));return Kt(e)},ao=(n,a,c,i)=>{const m=a,y=n.slice(0,2),f=Vt(n).toLowerCase(),r=Ut(n).toLowerCase();let t=c;y.forEach((o,e)=>{const s=i?E(f):`$${f}`,T=e===0?s:o;e===y.length-1?t[r]=oo(m.value,f.includes("italic"),i):(t[T]=t[T]||{},t=t[T])})},io=(n,a,c,i,m,y=!1)=>{let f=m;n.forEach((r,t)=>{const o=t===0?Gt(r,a.tokenType,y):r;if(t===n.length-1){const e=y?`${E(I(a,c,i))}`:`$${I(a,c,i)}`,s=Wt(a,y);f[s]=e}else f[y?E(o):o]=f[o]||{},f=f[y?E(o):o]})},so=(n,a,c,i,m)=>{var r,t;const{tokenType:y}=n,f=(t=(r=n.origin)==null?void 0:r.name)==null?void 0:t.split("/");return!f||f.length<=1||(y===k.TokenType.typography?ao(f,n,i,m):io(f,n,a,c,i,m)),i},he=(n,a)=>{const c=a?ue:V;return n.replace(c,"").replace("$","")},co=(n,a)=>({...n,[he(a,!1)]:a}),lo=(n,a)=>n.reduce((c,i)=>({...c,[he(i,a)]:i}),{}),uo=n=>n.reduce(co,{}),po=(n,a,c,i,m)=>{const y=n.reduce((t,o)=>{const e=so(o,c,i,t,m);return{...t,...e}},{}),f=Object.keys(y).filter(t=>t.endsWith(m?ue:V));if(f.length>0){const t=lo(f,m),o=m?z:`$${z}`;return{...y,[o]:t}}const r=Object.keys(y).filter(t=>t.includes("heading")||t.includes("body"));if(r.length>0){const t=uo(r),o=m?q:`$${q}`;return{...y,[o]:{...t,moveToTheEnd:"true"}}}return y},To="css-variable-prefix",mo=n=>{var i;const a=n.find(m=>m.tokenType===k.TokenType.string&&m.name===To);return((i=a==null?void 0:a.value)==null?void 0:i.text)??""},yo=(n,a,c,i,m,y)=>`@mixin color-css-variables { +${be(n,a,m,i,y).map(t=>{const o=I(t,a,m);return`${pe}--${c}color-${o}: #{$${o}};`}).join(` `)} } `,fo=n=>`/* This file was generated by Supernova, don't change manually */ @@ -52,7 +52,7 @@ ${Se(c)} ${ge(c)} ) !default;${ve(i,n)}`,ke=(n,a)=>{const c=Object.entries(n);return c.map(a(c.length)).join("")},ho=n=>ke(n,So),vo=n=>ke(n,bo),ko=(n,a,c)=>{let i;if(a&&a.length>0){const y=n.filter(f=>!a.some(r=>{var t,o;return(o=(t=f.origin)==null?void 0:t.name)==null?void 0:o.includes(r)})).reduce((f,r)=>{var o,e;const t=(e=(o=r.origin)==null?void 0:o.name)==null?void 0:e.split("/")[0];return t&&!f.includes(t)&&f.push(t),f},[]);i=[...new Set(y)]}else i=c;return i},Co=(n,a,c,i,m)=>{let y="",f={},r="";const{groupNames:t=[""],hasParentPrefix:o=!0,sortByNumValue:e=!1,hasMixin:s=!1,hasStylesObject:T=!0,tokenTypes:l,excludeGroupNames:p=null}=i;l.forEach(d=>{ko(n,p,t).forEach(S=>{const b=go(n,d,S),v=mo(n);d!==k.TokenType.typography&&(y+=no(b,a,c,v,S,s,o,e,m),y+=` -`),!m&&s&&(r+=yo(b,a,c,v,S,o,e));const h=po(b,a,c,o,m);f=fe(f,h)})});let u=y;return T&&(u+=m?ho(f):vo(f)),!m&&s&&(u+=r),{content:fo(de(u,m))}},F=(n,a,c,i,m=!1)=>i.map(y=>{const f=Co(n,a,c,y,m);return{fileName:y.fileName,...f}}),L=(n,a=!1)=>`${n.map(c=>{const i=a?"ts":"scss",m=c.fileName.replace(/^_/,"").replace(new RegExp(`\\.${i}$`),"");return a?`export * from './${m}';`:`@forward '${m}';`}).sort().join(` +`),!m&&s&&(r+=yo(b,c,v,S,o,e));const h=po(b,a,c,o,m);f=fe(f,h)})});let u=y;return T&&(u+=m?ho(f):vo(f)),!m&&s&&(u+=r),{content:fo(de(u,m))}},F=(n,a,c,i,m=!1)=>i.map(y=>{const f=Co(n,a,c,y,m);return{fileName:y.fileName,...f}}),L=(n,a=!1)=>`${n.map(c=>{const i=a?"ts":"scss",m=c.fileName.replace(/^_/,"").replace(new RegExp(`\\.${i}$`),"");return a?`export * from './${m}';`:`@forward '${m}';`}).sort().join(` `)} `,Po=n=>`import * as ${E(n)} from './${n}';`,Oo=n=>`@use '${_}/${n}';`,_o=n=>a=>n?Po(a.name):Oo(a.name),Io=(n,a)=>n.map(_o(a)).join(` `),Eo=(n,a)=>n.map(c=>{const i=`variables: meta.module-variables(${c.name}), diff --git a/exporters/tokens/src/generators/__tests__/fileGenerator.test.ts b/exporters/tokens/src/generators/__tests__/fileGenerator.test.ts index 4fec33f465..217bd5a3aa 100644 --- a/exporters/tokens/src/generators/__tests__/fileGenerator.test.ts +++ b/exporters/tokens/src/generators/__tests__/fileGenerator.test.ts @@ -61,7 +61,7 @@ export const themes = { `; const mockedColorTokensFile = `/* This file was generated by Supernova, don't change manually */ -\n\n@mixin css-variables {\n\n}\n`; +\n\n@mixin color-css-variables {\n\n}\n`; const mockedThemeRootFileContent = 'theme-light: (\n' + diff --git a/exporters/tokens/src/generators/__tests__/mixinGenerator.test.ts b/exporters/tokens/src/generators/__tests__/mixinGenerator.test.ts index f35f37a669..342d8aa91c 100644 --- a/exporters/tokens/src/generators/__tests__/mixinGenerator.test.ts +++ b/exporters/tokens/src/generators/__tests__/mixinGenerator.test.ts @@ -1,4 +1,4 @@ -import { Token, TokenGroup } from '@supernovaio/sdk-exporters'; +import { TokenGroup } from '@supernovaio/sdk-exporters'; import { exampleGroups } from '../../../tests/fixtures/exampleGroups'; import { examplePrefixToken } from '../../../tests/fixtures/examplePrefixToken'; import { findTokenPrefix } from '../../helpers/findTokenPrefix'; @@ -6,7 +6,6 @@ import { generateMixinFromTokens } from '../mixinGenerator'; import { exampleColorsTokens } from '../../../tests/fixtures/exampleColorTokens'; import { SCSS_INDENTATION } from '../../constants'; -const mappedTokens: Map = new Map([]); const tokenGroups: Array = exampleGroups; describe('mixinGenerator', () => { @@ -37,7 +36,6 @@ describe('mixinGenerator', () => { const styles = generateMixinFromTokens( Array.from(tokens.values()), - mappedTokens, tokenGroups, tokenPrefix, groupName, @@ -45,7 +43,7 @@ describe('mixinGenerator', () => { false, ); - expect(styles).toBe(`@mixin css-variables {\n${expectedStyles}\n}\n`); + expect(styles).toBe(`@mixin color-css-variables {\n${expectedStyles}\n}\n`); }, ); }); diff --git a/exporters/tokens/src/generators/contentGenerator.ts b/exporters/tokens/src/generators/contentGenerator.ts index 9fb731febb..bc52e5928c 100644 --- a/exporters/tokens/src/generators/contentGenerator.ts +++ b/exporters/tokens/src/generators/contentGenerator.ts @@ -127,7 +127,6 @@ export const generateFileContent = ( if (!hasJsOutput && hasMixin) { styledMixin += generateMixinFromTokens( filteredTokens, - mappedTokens, tokenGroups, tokenPrefix, group, diff --git a/exporters/tokens/src/generators/mixinGenerator.ts b/exporters/tokens/src/generators/mixinGenerator.ts index a2ab5b6990..d44195e14f 100644 --- a/exporters/tokens/src/generators/mixinGenerator.ts +++ b/exporters/tokens/src/generators/mixinGenerator.ts @@ -4,7 +4,6 @@ import { SCSS_INDENTATION } from '../constants'; export const generateMixinFromTokens = ( tokens: Token[], - mappedTokens: Map, tokenGroups: Array, tokenPrefix: string, group: string, @@ -20,5 +19,5 @@ export const generateMixinFromTokens = ( }) .join('\n'); - return `@mixin css-variables {\n${variables}\n}\n`; + return `@mixin color-css-variables {\n${variables}\n}\n`; };