feat: add option to always include fontStyle prop in typo expand

.changeset/fair-pillows-hide.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Add option to always add font style when expanding typography objects.

README.md

@@ -151,6 +151,7 @@ Options:
 | name                          | type                     | required | default         | description                                                                                                                           |
 | ----------------------------- | ------------------------ | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | excludeParentKeys             | boolean                  | ❌       | `false`         | Whether or not to exclude parent keys from your token files                                                                           |
+| alwaysAddFontStyle            | boolean                  | ❌       | `false`         | Whether or not to always add a 'normal' fontStyle property to typography tokens which do not have explicit fontStyle                  |
 | casing                        | string                   | ❌       | `camel`         | What kind of casing to use for token names. Options: [`camel`, `pascal`, `snake`, `kebab`, `constant`]                                |
 | expand                        | boolean \| ExpandOptions | ❌       | See props below | `false` to not register the parser at all. By default, expands composition tokens. Optionally, border, shadow and typography as well. |
 | expand.composition            | boolean \| ExpandFilter  | ❌       | `true`          | Whether or not to expand compositions. Also allows a filter callback function to conditionally expand per token/filePath              |

src/TransformOptions.ts

@@ -32,6 +32,7 @@ export interface ColorModifierOptions {
 
 export interface TransformOptions {
   casing?: 'camel' | 'pascal' | 'snake' | 'kebab' | 'constant';
+  alwaysAddFontStyle?: boolean;
   expand?: ExpandOptions | false;
   excludeParentKeys?: boolean;
   ['ts/color/modifiers']?: ColorModifierOptions;

src/checkAndEvaluateMath.ts

@@ -1,6 +1,5 @@
 import { Parser } from 'expr-eval';
 import { parse, reduceExpression } from 'postcss-calc-ast-parser';
-import { isAlreadyQuoted } from './css/transformTypography.js';
 
 const mathChars = ['+', '-', '*', '/'];
 

src/parsers/add-font-styles.ts

@@ -4,10 +4,12 @@ import getReferences from 'style-dictionary/lib/utils/references/getReferences.j
 // @ts-expect-error no type exported for this function
 import usesReference from 'style-dictionary/lib/utils/references/usesReference.js';
 import { fontWeightReg } from '../transformFontWeights.js';
+import { TransformOptions } from '../TransformOptions.js';
 
 function recurse(
   slice: DeepKeyTokenMap<false>,
   boundGetRef: (ref: string) => Array<SingleToken<false>>,
+  alwaysAddFontStyle = false,
 ) {
   for (const key in slice) {
     const token = slice[key];
@@ -34,25 +36,32 @@ function recurse(
       }
 
       // cast it to TokenTypographyValue now that we've resolved references all the way, we know it cannot be a string anymore.
-      const tokenValue = value as TokenTypographyValue;
+      // fontStyle is a prop we add ourselves
+      const tokenValue = value as TokenTypographyValue & { fontStyle: string };
 
       if (fontWeight) {
         const fontStyleMatch = fontWeight.match(fontWeightReg);
         if (fontStyleMatch?.groups?.weight && fontStyleMatch.groups.style) {
-          // @ts-expect-error fontStyle is not a property that exists on Typography Tokens, we just add it ourselves
           tokenValue.fontStyle = fontStyleMatch.groups.style.toLowerCase();
           tokenValue.fontWeight = fontStyleMatch?.groups?.weight;
         }
       }
+
+      if (!tokenValue.fontStyle && alwaysAddFontStyle) {
+        tokenValue.fontStyle = 'normal';
+      }
     } else if (typeof token === 'object') {
       recurse(token as unknown as DeepKeyTokenMap<false>, boundGetRef);
     }
   }
 }
 
-export function addFontStyles(dictionary: DeepKeyTokenMap<false>): DeepKeyTokenMap<false> {
+export function addFontStyles(
+  dictionary: DeepKeyTokenMap<false>,
+  transformOpts?: TransformOptions,
+): DeepKeyTokenMap<false> {
   const copy = { ...dictionary };
   const boundGetRef = getReferences.bind({ properties: copy });
-  recurse(copy, boundGetRef);
+  recurse(copy, boundGetRef, transformOpts?.alwaysAddFontStyle);
   return copy;
 }

src/registerTransforms.ts

@@ -60,7 +60,7 @@ export async function registerTransforms(sd: Core, transformOpts?: TransformOpti
       parse: ({ filePath, contents }) => {
         const obj = JSON.parse(contents);
         const excluded = excludeParentKeys(obj, transformOpts);
-        const withFontStyles = addFontStyles(excluded);
+        const withFontStyles = addFontStyles(excluded, transformOpts);
         const expanded = expandComposites(withFontStyles, filePath, transformOpts);
         return expanded;
       },

test/spec/parsers/add-font-styles.spec.ts

@@ -96,4 +96,28 @@ describe('add font style', () => {
 
     expect(addFontStyles(inputTokens as DeepKeyTokenMap<false>)).to.eql(inputTokens);
   });
+
+  it(`allows always adding a default fontStyle`, () => {
+    expect(
+      addFontStyles(
+        {
+          foo: {
+            value: {
+              fontWeight: 'Bold',
+            },
+            type: 'typography',
+          },
+        } as DeepKeyTokenMap<false>,
+        { alwaysAddFontStyle: true },
+      ),
+    ).to.eql({
+      foo: {
+        value: {
+          fontWeight: 'Bold',
+          fontStyle: 'normal',
+        },
+        type: 'typography',
+      },
+    });
+  });
 });