Feat(exporter-tokens): Add color prefix to css-variables mixin

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}),

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' +

exporters/tokens/src/generators/__tests__/mixinGenerator.test.ts

@@ -1,12 +1,11 @@
-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';
 import { generateMixinFromTokens } from '../mixinGenerator';
 import { exampleColorsTokens } from '../../../tests/fixtures/exampleColorTokens';
 import { SCSS_INDENTATION } from '../../constants';
 
-const mappedTokens: Map<string, Token> = new Map([]);
 const tokenGroups: Array<TokenGroup> = exampleGroups;
 
 describe('mixinGenerator', () => {
@@ -37,15 +36,14 @@ describe('mixinGenerator', () => {
 
       const styles = generateMixinFromTokens(
         Array.from(tokens.values()),
-        mappedTokens,
         tokenGroups,
         tokenPrefix,
         groupName,
         hasParentPrefix,
         false,
       );
 
-      expect(styles).toBe(`@mixin css-variables {\n${expectedStyles}\n}\n`);
+      expect(styles).toBe(`@mixin color-css-variables {\n${expectedStyles}\n}\n`);
     },
   );
 });

exporters/tokens/src/generators/contentGenerator.ts

@@ -127,7 +127,6 @@ export const generateFileContent = (
       if (!hasJsOutput && hasMixin) {
         styledMixin += generateMixinFromTokens(
           filteredTokens,
-          mappedTokens,
           tokenGroups,
           tokenPrefix,
           group,

exporters/tokens/src/generators/mixinGenerator.ts

@@ -4,7 +4,6 @@ import { SCSS_INDENTATION } from '../constants';
 
 export const generateMixinFromTokens = (
   tokens: Token[],
-  mappedTokens: Map<string, Token>,
   tokenGroups: Array<TokenGroup>,
   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`;
 };