BREAKING: change name fontWeight transform, add some tests, update docs

.changeset/eighty-eggs-smile.md

@@ -0,0 +1,7 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Add value transform `ts/typography/css/fontFamily` to font-families which adds quotes if it has white space. The source
+value will then match with how it's rendered in the composite typography token value. `outputReferences: true` will now replace
+the quoted value with the reference. Previously, the reference was wrapped in quotes.

.changeset/tidy-pots-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+BREAKING: change name of ts/type/fontWeight transform to -> ts/typography/fontWeight, for consistency's sake.

README.md

@@ -28,14 +28,14 @@ Generic:
 - Transform dimensions tokens to have `px` as a unit when missing (transitive) -> `ts/size/px`
 - Transform opacity from `%` to number between `0` and `1` -> `ts/opacity`
 - Transform lineheight from `%` to unitless (150% -> 1.5) -> `ts/size/lineheight`
-- Transform fontweight from keynames to fontweight numbers (100, 200, 300 ... 900) -> `ts/type/fontWeight`
+- Transform fontweight from keynames to fontweight numbers (100, 200, 300 ... 900) -> `ts/typography/fontWeight`
 - Transform color modifiers from Tokens Studio to color values -> `ts/color/modifiers`
 
 CSS:
 
 - Transform letterspacing from `%` to `em` -> `ts/size/css/letterspacing`
 - Transform colors to `rgba()` format -> `ts/color/css/hexrgba`
-- Transform font name into valid CSS, quoting if necessary. Fixes `outputReferences: true` in css shorthand -> `ts/type/css/quoteFontName`
+- Transform font family into valid CSS, adding single quotes if necessary -> `ts/typography/css/fontFamily`
 - Transform typography objects to CSS shorthand -> `ts/typography/css/shorthand`
 - Transform Tokens Studio shadow objects to CSS shadow shorthand -> `ts/shadow/css/shorthand`
 - Transform border objects to CSS border shorthand -> `ts/border/css/shorthand`
@@ -187,10 +187,10 @@ const sd = StyleDictionary.extend({
         'ts/size/px',
         'ts/opacity',
         'ts/size/lineheight',
-        'ts/type/fontWeight',
+        'ts/typography/fontWeight',
         'ts/resolveMath',
         'ts/size/css/letterspacing',
-        'ts/type/css/quoteFontName',
+        'ts/typography/css/fontFamily',
         'ts/typography/css/shorthand',
         'ts/border/css/shorthand',
         'ts/shadow/css/shorthand',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokens-studio/sd-transforms",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "description": "Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio",
   "license": "MIT",
   "author": "Joren Broekema <joren.broekema@gmail.com>",

src/registerTransforms.ts

@@ -23,10 +23,10 @@ export const transforms = [
   'ts/size/px',
   'ts/opacity',
   'ts/size/lineheight',
-  'ts/type/fontWeight',
+  'ts/typography/fontWeight',
   'ts/resolveMath',
   'ts/size/css/letterspacing',
-  'ts/type/css/quoteFontName',
+  'ts/typography/css/fontFamily',
   'ts/typography/css/shorthand',
   'ts/border/css/shorthand',
   'ts/shadow/css/shorthand',
@@ -104,14 +104,14 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
   });
 
   _sd.registerTransform({
-    name: 'ts/type/fontWeight',
+    name: 'ts/typography/fontWeight',
     type: 'value',
     matcher: token => token.type === 'fontWeights',
     transformer: token => transformFontWeights(token.value),
   });
 
   _sd.registerTransform({
-    name: 'ts/type/css/quoteFontName',
+    name: 'ts/typography/css/fontFamily',
     type: 'value',
     matcher: token => token.type === 'fontFamilies',
     transformer: token => processFontFamily(token.value),

test/spec/css/transformFontFamilies.spec.ts

@@ -0,0 +1,16 @@
+import { expect } from '@esm-bundle/chai';
+import { processFontFamily } from '../../../src/css/transformTypography.js';
+
+describe('process font family', () => {
+  it('transforms font-family to have single quotes around multi-word font-families', () => {
+    expect(processFontFamily('')).to.equal(`sans-serif`);
+    expect(processFontFamily('Arial, sans-serif')).to.equal(`Arial, sans-serif`);
+    expect(processFontFamily('Arial Black, sans-serif')).to.equal(`'Arial Black', sans-serif`);
+    expect(processFontFamily('Arial Black, Times New Roman, Foo, sans-serif')).to.equal(
+      `'Arial Black', 'Times New Roman', Foo, sans-serif`,
+    );
+    expect(processFontFamily(`'Arial Black', Times New Roman, Foo, sans-serif`)).to.equal(
+      `'Arial Black', 'Times New Roman', Foo, sans-serif`,
+    );
+  });
+});