Fix(variables-scss): Fix SCSS typography font family export

exporters/variables-scss/generated/exporter.cjs

@@ -13,7 +13,7 @@ ${a.join(`,
 }`,Rt=a=>`(
 ${a.join(`,
 `)},
-)`,Bt=(a,i)=>`${a}: ${/\s/.test(i)?`"${i}"`:i}`,jt=(a,i)=>`${It(a)}: ${Et(i)?i:Dt(i)}`,Le=(a,i)=>Object.entries(a).map(u=>{const[n,T]=u;return i(n,T)}),xt=({fontFamily:a,fontSize:i,fontWeight:u,lineHeight:n},T,m)=>{const f={fontFamily:`'${a.text}', sans-serif`,fontSize:`'${i.measure}${i.unit==="Pixels"?"px":i.unit}'`,fontStyle:`'${T?"italic":"normal"}'`,fontWeight:u.text};n&&n.measure&&(f.lineHeight=n.measure/100);const r=Le(f,jt),t=Le(f,Bt);return m?Nt(t):Rt(r)},Ne="-colors",qe="Colors",j="colors",Fe="styles",Lt=(a,i,u,n)=>{const T=i,m=a.slice(0,2),f=Vt(a).toLowerCase(),r=Yt(a).toLowerCase();let t=u;m.forEach((o,e)=>{const c=n?C(f):`$${f}`,y=e===0?c:o;e===m.length-1?t[r]=xt(T.value,f.includes("italic"),n):(t[y]=t[y]||{},t=t[y])})},Ft=(a,i,u,n,T,m=!1)=>{let f=T;a.forEach((r,t)=>{const o=t===0?Kt(r,i.tokenType,m):r;if(t===a.length-1){const e=m?`${C(D(i,u,n))}`:`$${D(i,u,n)}`,c=Gt(i,m);f[c]=e}else f[m?C(o):o]=f[o]||{},f=f[m?C(o):o]})},At=(a,i,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,i,u,n,T)),n},Ze=(a,i)=>{const u=i?qe:Ne;return a.replace(u,"").replace("$","")},Mt=(a,i)=>({...a,[Ze(i,!1)]:i}),$t=(a,i)=>a.reduce((u,n)=>({...u,[Ze(n,i)]:n}),{}),wt=a=>a.reduce(Mt,{}),Ht=(a,i,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?qe:Ne));if(f.length>0){const t=$t(f,T),o=T?j:`$${j}`;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},Ae={"radius-full":"full"},Ut=new Map([["breakpoint-mobile",0]]),De=(a,i)=>{const u=Ut.get(a);return typeof u==typeof i?u:i},Wt=a=>Ae[a]?Ae[a]:a,Xe=(a,i)=>{const u=Object.entries(i).reduce((m,[f,r])=>{let t;return typeof r=="object"&&r!==null&&typeof m[f]=="object"?t=Xe(m[f],r):t=r,{...m,[f]:t}},{...a}),n={},T={};return Object.entries(u).forEach(([m,f])=>{typeof f=="object"&&f!==null&&f.moveToTheEnd==="true"?(delete f.moveToTheEnd,T[m]=f):n[m]=f}),{...n,...T}};function Qe(a){return Object.entries(a).map(([i,u])=>{if(typeof u=="object"&&u!==null){const n=Qe(u);return`${i}: (
+)`,Bt=(a,i)=>`${a}: ${/\s/.test(i)?`"${i}"`:i}`,jt=(a,i)=>{const u=It(a);let n;return typeof i=="string"&&i.includes(", ")?n=`"${i}"`:Et(i)?n=i:n=Dt(i),`${u}: ${n}`},Le=(a,i)=>Object.entries(a).map(u=>{const[n,T]=u;return i(n,T)}),xt=({fontFamily:a,fontSize:i,fontWeight:u,lineHeight:n},T,m)=>{const f={fontFamily:`'${a.text}', sans-serif`,fontSize:`'${i.measure}${i.unit==="Pixels"?"px":i.unit}'`,fontStyle:`'${T?"italic":"normal"}'`,fontWeight:u.text};n&&n.measure&&(f.lineHeight=n.measure/100);const r=Le(f,jt),t=Le(f,Bt);return m?Nt(t):Rt(r)},Ne="-colors",qe="Colors",j="colors",Fe="styles",Lt=(a,i,u,n)=>{const T=i,m=a.slice(0,2),f=Vt(a).toLowerCase(),r=Yt(a).toLowerCase();let t=u;m.forEach((o,e)=>{const c=n?C(f):`$${f}`,y=e===0?c:o;e===m.length-1?t[r]=xt(T.value,f.includes("italic"),n):(t[y]=t[y]||{},t=t[y])})},Ft=(a,i,u,n,T,m=!1)=>{let f=T;a.forEach((r,t)=>{const o=t===0?Kt(r,i.tokenType,m):r;if(t===a.length-1){const e=m?`${C(D(i,u,n))}`:`$${D(i,u,n)}`,c=Gt(i,m);f[c]=e}else f[m?C(o):o]=f[o]||{},f=f[m?C(o):o]})},At=(a,i,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,i,u,n,T)),n},Ze=(a,i)=>{const u=i?qe:Ne;return a.replace(u,"").replace("$","")},Mt=(a,i)=>({...a,[Ze(i,!1)]:i}),$t=(a,i)=>a.reduce((u,n)=>({...u,[Ze(n,i)]:n}),{}),wt=a=>a.reduce(Mt,{}),Ht=(a,i,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?qe:Ne));if(f.length>0){const t=$t(f,T),o=T?j:`$${j}`;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},Ae={"radius-full":"full"},Ut=new Map([["breakpoint-mobile",0]]),De=(a,i)=>{const u=Ut.get(a);return typeof u==typeof i?u:i},Wt=a=>Ae[a]?Ae[a]:a,Xe=(a,i)=>{const u=Object.entries(i).reduce((m,[f,r])=>{let t;return typeof r=="object"&&r!==null&&typeof m[f]=="object"?t=Xe(m[f],r):t=r,{...m,[f]:t}},{...a}),n={},T={};return Object.entries(u).forEach(([m,f])=>{typeof f=="object"&&f!==null&&f.moveToTheEnd==="true"?(delete f.moveToTheEnd,T[m]=f):n[m]=f}),{...n,...T}};function Qe(a){return Object.entries(a).map(([i,u])=>{if(typeof u=="object"&&u!==null){const n=Qe(u);return`${i}: (
 ${n}
 ),
 `}return`${i}: ${u},

exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts

@@ -70,12 +70,12 @@ describe('stylesObjectGenerator', () => {
           '$heading-xlarge-bold': {
             desktop:
               // eslint-disable-next-line quotes -- we are handling special characters
-              "(\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:
               // eslint-disable-next-line quotes -- we are handling special characters
-              "(\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',
@@ -157,18 +157,18 @@ describe('stylesObjectGenerator', () => {
           '$heading-xlarge-bold': {
             desktop:
               // eslint-disable-next-line quotes -- we are handling special characters
-              "(\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:
               // eslint-disable-next-line quotes -- we are handling special characters
-              "(\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:
               // eslint-disable-next-line quotes -- we are handling special characters
-              "(\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,
@@ -216,7 +216,7 @@ describe('stylesObjectGenerator', () => {
           '$heading-xlarge-bold': {
             desktop:
               // eslint-disable-next-line quotes -- we are handling special characters
-              "(\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',
         },

exporters/variables-scss/src/helpers/tokenHelper.ts

@@ -153,7 +153,18 @@ const jsKeyValueTemplate: KeyValueTemplateCallback = (key, value) => {
 };
 
 const scssKeyValueTemplate: KeyValueTemplateCallback = (key, value) => {
-  return `${toKebabCase(key)}: ${isNumber(value) ? value : removePairQuotes(value as string)}`;
+  const formattedKey = toKebabCase(key);
+  let formattedValue;
+
+  if (typeof value === 'string' && value.includes(', ')) {
+    formattedValue = `"${value}"`;
+  } else if (isNumber(value)) {
+    formattedValue = value;
+  } else {
+    formattedValue = removePairQuotes(value as string);
+  }
+
+  return `${formattedKey}: ${formattedValue}`;
 };
 
 const passObjectKeyValueToCallback = <Shape>(object: Shape, callback: KeyValueTemplateCallback) => {

exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts

@@ -33,7 +33,7 @@ exampleTypographyTokens.set('typographyRef2', {
 } as TypographyToken);
 
 export const expectedTypographyValue = `(
-font-family: 'Inter', sans-serif,
+font-family: "'Inter', sans-serif",
 font-size: 64px,
 font-style: italic,
 font-weight: 700,