fix: set font family name in quotes (#137)

* fix: fonts with whitespace need quotes

* feat: add changeset

.changeset/modern-tips-invite.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+set font family name in quotes if its name has whitespaces

src/css/transformTypography.ts

@@ -2,23 +2,26 @@ import { transformDimension } from '../transformDimension.js';
 import { transformFontWeights } from '../transformFontWeights.js';
 import { checkAndEvaluateMath } from '../checkAndEvaluateMath.js';
 import { isNothing } from '../utils/is-nothing.js';
+import { hasWhiteSpace } from '../utils/has-whitespace.js';
 
 /**
  * Helper: Transforms typography object to typography shorthand for CSS
  * This currently works fine if every value uses an alias, but if any one of these use a raw value, it will not be transformed.
  * If you'd like to output all typography values, you'd rather need to return the typography properties itself
  */
+
 export function transformTypographyForCSS(
   value: Record<string, string | undefined> | undefined | string,
 ): string | undefined {
   if (typeof value !== 'object') {
     return value;
   }
-  const { fontFamily } = value;
-  let { fontWeight, fontSize, lineHeight } = value;
+
+  let { fontFamily, fontWeight, fontSize, lineHeight } = value;
   fontWeight = transformFontWeights(fontWeight);
   fontSize = transformDimension(checkAndEvaluateMath(fontSize));
   lineHeight = checkAndEvaluateMath(lineHeight);
+  fontFamily = hasWhiteSpace(fontFamily) ? `'${fontFamily}'` : fontFamily;
 
   return `${isNothing(fontWeight) ? 400 : fontWeight} ${isNothing(fontSize) ? '16px' : fontSize}/${
     isNothing(lineHeight) ? 1 : lineHeight

src/utils/has-whitespace.ts

@@ -0,0 +1,8 @@
+export function hasWhiteSpace(value: string | undefined): boolean {
+  const reWhiteSpace = new RegExp('\\s+');
+
+  if (value !== undefined && reWhiteSpace.test(value)) {
+    return true;
+  }
+  return false;
+}

test/integration/math-in-complex-values.test.ts

@@ -43,7 +43,7 @@ describe('sd-transforms advanced tests', () => {
 
   it('supports typography tokens with math or fontweight alias', async () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
-    expect(file).to.include(`--sdTypo: 400 24px/1.125 Arial Black;`);
+    expect(file).to.include(`--sdTypo: 400 24px/1.125 'Arial Black';`);
   });
 
   it('supports border tokens with math width and hexrgba color', async () => {

test/integration/object-value-references.test.ts

@@ -45,9 +45,9 @@ describe('typography references', () => {
     const file = await promises.readFile(outputFilePath, 'utf-8');
     expect(file).to.include(
       `
-  --sdBefore: 700 36px/1 Aria Sans;
-  --sdFontHeadingXxl: 700 36px/1 Aria Sans;
-  --sdAfter: 700 36px/1 Aria Sans;`,
+  --sdBefore: 700 36px/1 'Aria Sans';
+  --sdFontHeadingXxl: 700 36px/1 'Aria Sans';
+  --sdAfter: 700 36px/1 'Aria Sans';`,
     );
   });
 

test/spec/css/transformTypographyForCSS.spec.ts

@@ -38,4 +38,15 @@ describe('transform typography', () => {
 
     expect(transformTypographyForCSS({})).to.equal('400 16px/1 sans-serif');
   });
+
+  it('set quotes around fontFamily if it has white spaces in name', () => {
+    expect(
+      transformTypographyForCSS({
+        fontWeight: 'light',
+        fontSize: '20',
+        lineHeight: '1.5',
+        fontFamily: 'Arial Narrow',
+      }),
+    ).to.equal("300 20px/1.5 'Arial Narrow'");
+  });
 });