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

lmc-eu · Oct 1, 2024 · 9f65d9b · 9f65d9b
1 parent f2a263b
commit 9f65d9b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 32 deletions.
diff --git a/exporters/variables-scss/generated/exporter.cjs b/exporters/variables-scss/generated/exporter.cjs
diff --git a/exporters/variables-scss/src/generators/__tests__/stylesObjectGenerator.test.ts b/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',
         },

diff --git a/exporters/variables-scss/src/helpers/tokenHelper.ts b/exporters/variables-scss/src/helpers/tokenHelper.ts
@@ -153,7 +153,15 @@ const jsKeyValueTemplate: KeyValueTemplateCallback = (key, value) => {
 };
 
 const scssKeyValueTemplate: KeyValueTemplateCallback = (key, value) => {
-  return `${toKebabCase(key)}: ${isNumber(value) ? value : removePairQuotes(value as string)}`;
+  const formattedKey = toKebabCase(key);
+
+  if (typeof value === 'string' && value.includes(', ')) {
+    return `${formattedKey}: "${value}"`;
+  }
+
+  const formattedValue = isNumber(value) ? value : removePairQuotes(value as string);
+
+  return `${formattedKey}: ${formattedValue}`;
 };
 
 const passObjectKeyValueToCallback = <Shape>(object: Shape, callback: KeyValueTemplateCallback) => {

diff --git a/exporters/variables-scss/tests/fixtures/exampleTypographyTokens.ts b/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,