fixup! Feat(variables-scss): Export to javascript #DS-1437

lmc-eu · Sep 25, 2024 · e584daf · e584daf
1 parent 91c08c5
commit e584daf
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 37 deletions.
diff --git a/exporters/variables-scss/generated/exporter.cjs b/exporters/variables-scss/generated/exporter.cjs
@@ -13,41 +13,41 @@ ${n}
 ${n}
 },
 `}return`${c}: ${u},
-`}).join("").slice(0,-1),Rt=a=>a.length===4?a.filter((c,u)=>u!==1).join("-"):a.join("-"),Bt=a=>a.length===4?a[1]:"mobile",xt=(a,c)=>{var m;let u;const n=(m=a.name.match(/\d+/))==null?void 0:m[0],T=ht(a.name.toLowerCase());return a.tokenType!==v.TokenType.color&&n?u=n:u=c?C(T):T,u},jt=(a,c,u)=>{if(c===v.TokenType.color){const n=`${a.toLowerCase()}${Ne}`;return u?C(n):`$${n}`}return u?je(a.toLowerCase()):`$${je(a.toLowerCase())}`},Ne="-colors",Xe="Colors",x="colors",Fe="styles",Lt=(a,c,u,n)=>{const T=c,m=a.slice(0,2),f=Rt(a).toLowerCase(),r=Bt(a).toLowerCase();let t=u;m.forEach((o,e)=>{const i=n?C(f):`$${f}`,y=e===0?i:o;e===m.length-1?t[r]=vt(T.value,f.includes("italic"),n):(t[y]=t[y]||{},t=t[y])})},Ft=(a,c,u,n,T,m=!1)=>{let f=T;a.forEach((r,t)=>{const o=t===0?jt(r,c.tokenType,m):r;if(t===a.length-1){const e=m?`${C(D(c,u,n))}`:`$${D(c,u,n)}`,i=xt(c,m);f[i]=e}else f[m?C(o):o]=f[o]||{},f=f[m?C(o):o]})},At=(a,c,u,n,T)=>{var r,t;const{tokenType:m}=a,f=(t=(r=a.origin)==null?void 0:r.name)==null?void 0:t.split("/");return f&&(m===v.TokenType.typography?Lt(f,a,n,T):Ft(f,a,c,u,n,T)),n},Qe=(a,c)=>{const u=c?Xe:Ne;return a.replace(u,"").replace("$","")},Mt=(a,c)=>({...a,[Qe(c,!1)]:c}),$t=(a,c)=>a.reduce((u,n)=>({...u,[Qe(n,c)]:n}),{}),wt=a=>a.reduce(Mt,{}),Ht=(a,c,u,n,T)=>{const m=a.reduce((t,o)=>{const e=At(o,u,n,t,T);return{...t,...e}},{}),f=Object.keys(m).filter(t=>t.endsWith(T?Xe:Ne));if(f.length>0){const t=$t(f,T),o=T?x:`$${x}`;return{...m,[o]:t}}const r=Object.keys(m).filter(t=>t.includes("heading")||t.includes("body"));if(r.length>0){const t=wt(r),o=T?Fe:`$${Fe}`;return{...m,[o]:{...t,moveToTheEnd:"true"}}}return m},Ut="    ",Wt=a=>a.replace(/\n{3,}/g,`
+`}).join("").slice(0,-1),Rt=a=>a.length===4?a.filter((c,u)=>u!==1).join("-"):a.join("-"),Bt=a=>a.length===4?a[1]:"mobile",xt=(a,c)=>{var m;let u;const n=(m=a.name.match(/\d+/))==null?void 0:m[0],T=ht(a.name.toLowerCase());return a.tokenType!==v.TokenType.color&&n?u=n:u=c?C(T):T,u},jt=(a,c,u)=>{if(c===v.TokenType.color){const n=`${a.toLowerCase()}${Ne}`;return u?C(n):`$${n}`}return u?je(a.toLowerCase()):`$${je(a.toLowerCase())}`},Ne="-colors",Xe="Colors",x="colors",Fe="styles",Lt=(a,c,u,n)=>{const T=c,m=a.slice(0,2),f=Rt(a).toLowerCase(),r=Bt(a).toLowerCase();let t=u;m.forEach((o,e)=>{const i=n?C(f):`$${f}`,y=e===0?i:o;e===m.length-1?t[r]=vt(T.value,f.includes("italic"),n):(t[y]=t[y]||{},t=t[y])})},Ft=(a,c,u,n,T,m=!1)=>{let f=T;a.forEach((r,t)=>{const o=t===0?jt(r,c.tokenType,m):r;if(t===a.length-1){const e=m?`${C(D(c,u,n))}`:`$${D(c,u,n)}`,i=xt(c,m);f[i]=e}else f[m?C(o):o]=f[o]||{},f=f[m?C(o):o]})},At=(a,c,u,n,T)=>{var r,t;const{tokenType:m}=a,f=(t=(r=a.origin)==null?void 0:r.name)==null?void 0:t.split("/");return f&&(m===v.TokenType.typography?Lt(f,a,n,T):Ft(f,a,c,u,n,T)),n},Qe=(a,c)=>{const u=c?Xe:Ne;return a.replace(u,"").replace("$","")},Mt=(a,c)=>({...a,[Qe(c,!1)]:c}),$t=(a,c)=>a.reduce((u,n)=>({...u,[Qe(n,c)]:n}),{}),wt=a=>a.reduce(Mt,{}),Ht=(a,c,u,n,T)=>{const m=a.reduce((t,o)=>{const e=At(o,u,n,t,T);return{...t,...e}},{}),f=Object.keys(m).filter(t=>t.endsWith(T?Xe:Ne));if(f.length>0){const t=$t(f,T),o=T?x:`$${x}`;return{...m,[o]:t}}const r=Object.keys(m).filter(t=>t.includes("heading")||t.includes("body"));if(r.length>0){const t=wt(r),o=T?Fe:`$${Fe}`;return{...m,[o]:{...t,moveToTheEnd:"true"}}}return m},Ut="    ",Wt="  ",Vt=a=>a.replace(/\n{3,}/g,`
 
-`),Vt=a=>a.replace(/\n{2,}$/,`
-`),Je=(a,c)=>{const u=c?"	":Ut;let n=0,T="";const m=a.split(`
+`),Yt=a=>a.replace(/\n{2,}$/,`
+`),Je=(a,c)=>{const u=c?Wt:Ut;let n=0,T="";const m=a.split(`
 `),f=c?"{":"(",r=c?"}":")";for(const t of m)t.includes(f)&&t.includes(r)?T+=`${u.repeat(n)}${t}
 `:t.includes(f)?(T+=`${u.repeat(n)}${t}
 `,n+=1):t.includes(r)?(n-=1,T+=`${u.repeat(n)}${t}
 `):T+=`${u.repeat(n)}${t}
-`;return T=Wt(T),T=Vt(T),T},Yt=a=>`/* This file was generated by Supernova, don't change manually */
-${a}`,Gt=(a,c,u)=>a.filter(n=>{var r,t;const T=n.tokenType===c,m=(t=(r=n.origin)==null?void 0:r.name)==null?void 0:t.includes(u),f=!(n.tokenType===v.TokenType.typography&&n.name.includes("-Underline"));return T&&m&&f}),Kt=a=>Object.entries(a).map(([c,u])=>`export const ${c} = {
+`;return T=Vt(T),T=Yt(T),T},Gt=a=>`/* This file was generated by Supernova, don't change manually */
+${a}`,Kt=(a,c,u)=>a.filter(n=>{var r,t;const T=n.tokenType===c,m=(t=(r=n.origin)==null?void 0:r.name)==null?void 0:t.includes(u),f=!(n.tokenType===v.TokenType.typography&&n.name.includes("-Underline"));return T&&m&&f}),zt=a=>Object.entries(a).map(([c,u])=>`export const ${c} = {
 ${Ze(u)}
 };
 
-`).join(""),zt=a=>Object.entries(a).map(([c,u])=>`${c}: (
+`).join(""),qt=a=>Object.entries(a).map(([c,u])=>`${c}: (
 ${qe(u)}
 ) !default;
 
-`).join(""),qt=(a,c,u)=>{let n;if(c&&c.length>0){const m=a.filter(f=>!c.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},[]);n=[...new Set(m)]}else n=u;return n},Zt=(a,c,u,n,T)=>{let m="",f={};const{groupNames:r=[""],hasParentPrefix:t=!0,sortByNumValue:o=!1,hasStylesObject:e=!0,tokenTypes:i,excludeGroupNames:y=null}=n;i.forEach(p=>{qt(a,y,r).forEach(d=>{const g=Gt(a,p,d);p!==v.TokenType.typography&&(m+=Nt(g,c,u,d,t,o,T),m+=`
+`).join(""),Zt=(a,c,u)=>{let n;if(c&&c.length>0){const m=a.filter(f=>!c.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},[]);n=[...new Set(m)]}else n=u;return n},Xt=(a,c,u,n,T)=>{let m="",f={};const{groupNames:r=[""],hasParentPrefix:t=!0,sortByNumValue:o=!1,hasStylesObject:e=!0,tokenTypes:i,excludeGroupNames:y=null}=n;i.forEach(p=>{Zt(a,y,r).forEach(d=>{const g=Kt(a,p,d);p!==v.TokenType.typography&&(m+=Nt(g,c,u,d,t,o,T),m+=`
 
-`);const S=Ht(g,c,u,t,T);f=ze(f,S)})});let l=m;return e&&(l+=T?Kt(f):zt(f)),{content:Yt(Je(l,T))}},Ae=[{fileName:"borders",tokenTypes:[v.TokenType.dimension],groupNames:["Border"],hasStylesObject:!1,sortByNumValue:!0},{fileName:"other",tokenTypes:[v.TokenType.dimension,v.TokenType.string],excludeGroupNames:["Border","Radius","Spacing"],sortByNumValue:!0},{fileName:"radii",tokenTypes:[v.TokenType.dimension],groupNames:["Radius"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"spacing",tokenTypes:[v.TokenType.dimension],groupNames:["Spacing"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"shadows",tokenTypes:[v.TokenType.shadow],hasParentPrefix:!1},{fileName:"gradients",tokenTypes:[v.TokenType.gradient],hasParentPrefix:!0},{fileName:"typography",tokenTypes:[v.TokenType.typography],hasParentPrefix:!1}],Me=[{fileName:"colors",tokenTypes:[v.TokenType.color]}],j="themes",N="global",R="scss",B="js",M=(a,c,u,n,T=!1)=>n.map(m=>{const f=Zt(a,c,u,m,T);return{fileName:m.fileName,...f}}),$=(a,c=!1)=>`${a.map(u=>{const n=c?"ts":"scss",T=u.fileName.replace(/^_/,"").replace(new RegExp(`\\.${n}$`),"");return c?`export * from './${T}';`:`@forward '${T}';`}).join(`
+`);const S=Ht(g,c,u,t,T);f=ze(f,S)})});let l=m;return e&&(l+=T?zt(f):qt(f)),{content:Gt(Je(l,T))}},Ae=[{fileName:"borders",tokenTypes:[v.TokenType.dimension],groupNames:["Border"],hasStylesObject:!1,sortByNumValue:!0},{fileName:"other",tokenTypes:[v.TokenType.dimension,v.TokenType.string],excludeGroupNames:["Border","Radius","Spacing"],sortByNumValue:!0},{fileName:"radii",tokenTypes:[v.TokenType.dimension],groupNames:["Radius"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"spacing",tokenTypes:[v.TokenType.dimension],groupNames:["Spacing"],hasParentPrefix:!1,sortByNumValue:!0},{fileName:"shadows",tokenTypes:[v.TokenType.shadow],hasParentPrefix:!1},{fileName:"gradients",tokenTypes:[v.TokenType.gradient],hasParentPrefix:!0},{fileName:"typography",tokenTypes:[v.TokenType.typography],hasParentPrefix:!1}],Me=[{fileName:"colors",tokenTypes:[v.TokenType.color]}],j="themes",N="global",R="scss",B="js",M=(a,c,u,n,T=!1)=>n.map(m=>{const f=Xt(a,c,u,m,T);return{fileName:m.fileName,...f}}),$=(a,c=!1)=>`${a.map(u=>{const n=c?"ts":"scss",T=u.fileName.replace(/^_/,"").replace(new RegExp(`\\.${n}$`),"");return c?`export * from './${T}';`:`@forward '${T}';`}).join(`
 `)}
-`,Xt=a=>`import * as ${C(a)} from './${j}/${a}';`,Qt=a=>`@use '${j}/${a}';`,Jt=a=>c=>a?Xt(c.name):Qt(c.name),eo=(a,c)=>a.map(Jt(c)).join(`
-`),to=(a,c)=>a.map(u=>c?`${C(u.name)}: {
+`,Qt=a=>`import * as ${C(a)} from './${j}/${a}';`,Jt=a=>`@use '${j}/${a}';`,eo=a=>c=>a?Qt(c.name):Jt(c.name),to=(a,c)=>a.map(eo(c)).join(`
+`),oo=(a,c)=>a.map(u=>c?`${C(u.name)}: {
 ${x}: ${C(u.name)}.${x}
 },`:`${u.name}: (
 ${x}: ${u.name}.$${x},
 ),`).join(`
-`),$e=(a,c=!1)=>{const u=eo(a,c),n=to(a,c),f=`${u}
+`),$e=(a,c=!1)=>{const u=to(a,c),n=oo(a,c),f=`${u}
 
 // The first theme is the default theme, as the left column in the Figma table.
 ${c?`export const themes = {
 `:`$themes: (
 `}${n}
 ${c?`};
 `:`);
-`}`;return Je(f,c)},oo=async(a,c,u,n,T)=>{const m=[],f=M(a,c,u,Ae),r=M(a,c,u,Ae,!0),t=$(f),o=$(r,!0);m.push(...f.map(l=>({path:`./${R}/${N}`,fileName:`_${l.fileName}.scss`,content:l.content})),...r.map(l=>({path:`./${B}/${N}/`,fileName:`${l.fileName}.ts`,content:l.content}))),m.push({path:`./${R}/${N}/`,fileName:"index.scss",content:t}),m.push({path:`./${B}/${N}/`,fileName:"index.ts",content:o}),m.push({path:`./${R}/`,fileName:"@global.scss",content:`@forward '${N}';
+`}`;return Je(f,c)},ro=async(a,c,u,n,T)=>{const m=[],f=M(a,c,u,Ae),r=M(a,c,u,Ae,!0),t=$(f),o=$(r,!0);m.push(...f.map(l=>({path:`./${R}/${N}`,fileName:`_${l.fileName}.scss`,content:l.content})),...r.map(l=>({path:`./${B}/${N}/`,fileName:`${l.fileName}.ts`,content:l.content}))),m.push({path:`./${R}/${N}/`,fileName:"index.scss",content:t}),m.push({path:`./${B}/${N}/`,fileName:"index.ts",content:o}),m.push({path:`./${R}/`,fileName:"@global.scss",content:`@forward '${N}';
 `}),m.push({path:`./${B}/`,fileName:"@global.ts",content:`export * from './${N}';
-`});const e=await Promise.all(n.map(async l=>({themedTokens:await T.tokens.computeTokensByApplyingThemes(a,[l]),theme:l})));for(const{themedTokens:l,theme:p}of e){const s=M(l,c,u,Me),d=M(l,c,u,Me,!0),g=$(s),S=$(d,!0);m.push(...s.map(b=>({path:`./${R}/${j}/${p.name}/`,fileName:`_${b.fileName}.scss`,content:b.content})),...d.map(b=>({path:`./${B}/${j}/${p.name}/`,fileName:`${b.fileName}.ts`,content:b.content}))),m.push({path:`./${R}/${j}/${p.name}/`,fileName:"index.scss",content:g}),m.push({path:`./${B}/${j}/${p.name}/`,fileName:"index.ts",content:S})}const i=$e(n),y=$e(n,!0);return m.push({path:`./${R}/`,fileName:"@themes.scss",content:i}),m.push({path:`./${B}/`,fileName:"@themes.ts",content:y}),m};Pulsar.export(async(a,c)=>{const u={designSystemId:c.dsId,versionId:c.versionId};let n=await a.tokens.getTokens(u),T=await a.tokens.getTokenGroups(u);c.brandId&&(n=n.filter(i=>i.brandId===c.brandId),T=T.filter(i=>i.brandId===c.brandId));const m=new Map(n.map(i=>[i.id,i])),f=await a.tokens.getTokenThemes(u),r=(i,y,l)=>k.FileHelper.createTextFile({relativePath:i,fileName:y,content:l});let t=[];t=(await oo(n,m,T,f,a)).map(i=>r(i.path,i.fileName,i.content));const e=i=>{let y=[];const l=JSON.stringify(i,(p,s)=>{if(typeof s=="object"&&s!==null){if(y!=null&&y.includes(s))return"CIRCULAR_REFERENCE";y==null||y.push(s)}return s},2);return y=null,l};return t.push(r("./original-data/","_original-tokens.json",e(n)),r("./original-data/","_original-groups.json",JSON.stringify(T,null,2))),t});const ro=Pulsar.exportConfig();exports.exportConfiguration=ro;
+`});const e=await Promise.all(n.map(async l=>({themedTokens:await T.tokens.computeTokensByApplyingThemes(a,[l]),theme:l})));for(const{themedTokens:l,theme:p}of e){const s=M(l,c,u,Me),d=M(l,c,u,Me,!0),g=$(s),S=$(d,!0);m.push(...s.map(b=>({path:`./${R}/${j}/${p.name}/`,fileName:`_${b.fileName}.scss`,content:b.content})),...d.map(b=>({path:`./${B}/${j}/${p.name}/`,fileName:`${b.fileName}.ts`,content:b.content}))),m.push({path:`./${R}/${j}/${p.name}/`,fileName:"index.scss",content:g}),m.push({path:`./${B}/${j}/${p.name}/`,fileName:"index.ts",content:S})}const i=$e(n),y=$e(n,!0);return m.push({path:`./${R}/`,fileName:"@themes.scss",content:i}),m.push({path:`./${B}/`,fileName:"@themes.ts",content:y}),m};Pulsar.export(async(a,c)=>{const u={designSystemId:c.dsId,versionId:c.versionId};let n=await a.tokens.getTokens(u),T=await a.tokens.getTokenGroups(u);c.brandId&&(n=n.filter(i=>i.brandId===c.brandId),T=T.filter(i=>i.brandId===c.brandId));const m=new Map(n.map(i=>[i.id,i])),f=await a.tokens.getTokenThemes(u),r=(i,y,l)=>k.FileHelper.createTextFile({relativePath:i,fileName:y,content:l});let t=[];t=(await ro(n,m,T,f,a)).map(i=>r(i.path,i.fileName,i.content));const e=i=>{let y=[];const l=JSON.stringify(i,(p,s)=>{if(typeof s=="object"&&s!==null){if(y!=null&&y.includes(s))return"CIRCULAR_REFERENCE";y==null||y.push(s)}return s},2);return y=null,l};return t.push(r("./original-data/","_original-tokens.json",e(n)),r("./original-data/","_original-groups.json",JSON.stringify(T,null,2))),t});const no=Pulsar.exportConfig();exports.exportConfiguration=no;
diff --git a/exporters/variables-scss/src/formatters/__tests__/stylesFormatter.test.ts b/exporters/variables-scss/src/formatters/__tests__/stylesFormatter.test.ts
@@ -31,10 +31,10 @@ export const gridSpacingDesktop: '32px';
 export const gridColumns = '12';
 
 export const grids = {
-\tspacing: {
-\t\tdesktop: gridSpacingDesktop,
-\t},
-\tcolumns: gridColumns,
+  spacing: {
+    desktop: gridSpacingDesktop,
+  },
+  columns: gridColumns,
 };
 `;
 

diff --git a/exporters/variables-scss/src/formatters/stylesFormatter.ts b/exporters/variables-scss/src/formatters/stylesFormatter.ts
@@ -1,4 +1,5 @@
 export const SCSS_INDENTATION = '    ';
+export const JS_INDENTATION = '  ';
 
 export const removeExtraBlankLines = (css: string): string => {
   return css.replace(/\n{3,}/g, '\n\n');
@@ -9,7 +10,7 @@ export const formatLinesAtEndOfTheFile = (css: string): string => {
 };
 
 export const indentAndFormat = (css: string, hasJsOutput: boolean): string => {
-  const INDENTATION = hasJsOutput ? '\t' : SCSS_INDENTATION;
+  const INDENTATION = hasJsOutput ? JS_INDENTATION : SCSS_INDENTATION;
   let indentationLevel = 0;
   let formattedCSS = '';
 

diff --git a/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts
@@ -45,15 +45,16 @@ const mockedTsFile = `/* This file was generated by Supernova, don't change manu
 export const gridSpacingDesktop = '32px';\n
 export const gridColumns = '12';\n
 export const grids = {
-\tspacing: {
-\t\tdesktop: gridSpacingDesktop,
-\t},
-\tcolumns: gridColumns,
+  spacing: {
+    desktop: gridSpacingDesktop,
+  },
+  columns: gridColumns,
 };\n`;
 
 const mockedRootThemeFile = `@use 'themes/theme-light';
 @use 'themes/theme-light-inverted';
 
+// The first theme is the default theme, as the left column in the Figma table.
 $themes: (
     theme-light: (
         colors: theme-light.$colors,
@@ -66,13 +67,14 @@ $themes: (
 
 const mockedRootThemeJsFile = `import * as themeLight from './themes/theme-light';
 import * as themeLightInverted from './themes/theme-light-inverted';\n
+// The first theme is the default theme, as the left column in the Figma table.
 export const themes = {
-\tthemeLight: {
-\t\tcolors: themeLight.colors
-\t},
-\tthemeLightInverted: {
-\t\tcolors: themeLightInverted.colors
-\t},
+  themeLight: {
+    colors: themeLight.colors
+  },
+  themeLightInverted: {
+    colors: themeLightInverted.colors
+  },
 };
 `;
 
@@ -114,8 +116,8 @@ describe('fileGenerator', () => {
         { path: './scss/global/', fileName: 'index.scss', content: indexFile },
         { path: './js/global/', fileName: 'index.ts', content: indexJsFile },
         // Root index files
-        { path: './scss/', fileName: '@global.scss', content: `@forward 'global';` },
-        { path: './js/', fileName: '@global.ts', content: `export * from './global';` },
+        { path: './scss/', fileName: '@global.scss', content: `@forward 'global';\n` },
+        { path: './js/', fileName: '@global.ts', content: `export * from './global';\n` },
         // Themes files
         { path: './scss/themes/theme-light/', fileName: '_colors.scss', content: emptyFile },
         { path: './js/themes/theme-light/', fileName: 'colors.ts', content: emptyFile },

diff --git a/exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts
@@ -69,11 +69,11 @@ describe('stylesObjectGenerator', () => {
         expectedStyles: {
           '$heading-xlarge-bold': {
             desktop:
-              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2\n)',
+              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
           },
           '$heading-xlarge-bold-underline': {
             desktop:
-              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2\n)',
+              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
           },
           $styles: {
             'heading-xlarge-bold': '$heading-xlarge-bold',
@@ -154,16 +154,16 @@ describe('stylesObjectGenerator', () => {
         expectedObject: {
           '$heading-xlarge-bold': {
             desktop:
-              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2\n)',
+              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
             tablet:
-              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2\n)',
+              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
           },
         },
         description: 'should create object structure from typography token',
         stylesObjectRef: {
           '$heading-xlarge-bold': {
             tablet:
-              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2\n)',
+              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 32px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
           },
         } as StylesObjectType,
         hasJsOutput: false,
@@ -210,7 +210,7 @@ describe('stylesObjectGenerator', () => {
         expectedStyles: {
           '$heading-xlarge-bold': {
             desktop:
-              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2\n)',
+              '(\nfont-family: "\'Inter\', sans-serif",\nfont-size: 64px,\nfont-style: normal,\nfont-weight: 700,\nline-height: 1.2,\n)',
           },
           exampleRef: 'exampleRef',
         },

diff --git a/exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts b/exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts
@@ -37,5 +37,5 @@ font-family: "'Inter', sans-serif",
 font-size: 64px,
 font-style: italic,
 font-weight: 700,
-line-height: 1.2
+line-height: 1.2,
 )`;