feat: prefill missing props in composite tokens with defaults/fallbacks

.changeset/kind-birds-joke.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+BREAKING: when missing properties inside typography, border or shadow objects, we prefill them with empty string, 0, or some default value.

src/css/transformBorder.ts

@@ -14,7 +14,7 @@ export function transformBorderForCSS(
     return border;
   }
   const { color, width, style } = border;
-  return `${transformDimension(checkAndEvaluateMath(width))} ${style} ${transformHEXRGBaForCSS(
-    color,
-  )}`;
+  return `${transformDimension(checkAndEvaluateMath(width)) ?? ''} ${style ?? ''} ${
+    transformHEXRGBaForCSS(color) ?? ''
+  }`.trim();
 }

src/css/transformShadow.ts

@@ -19,7 +19,7 @@ export function transformShadowForCSS(
   y = transformDimension(checkAndEvaluateMath(y)) as string;
   blur = transformDimension(checkAndEvaluateMath(blur)) as string;
   spread = transformDimension(checkAndEvaluateMath(spread)) as string;
-  return `${
-    type === 'innerShadow' ? 'inset ' : ''
-  }${x} ${y} ${blur} ${spread} ${transformHEXRGBaForCSS(color)}`;
+  return `${type === 'innerShadow' ? 'inset ' : ''}${x ?? 0} ${y ?? 0} ${blur ?? 0}${
+    spread == null ? ' ' : ` ${spread} `
+  }${transformHEXRGBaForCSS(color) ?? 'rgba(0, 0, 0, 1)'}`.trim();
 }

src/css/transformTypography.ts

@@ -19,5 +19,5 @@ export function transformTypographyForCSS(
   fontSize = transformDimension(checkAndEvaluateMath(fontSize)) as string;
   lineHeight = checkAndEvaluateMath(lineHeight) as string;
 
-  return `${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
+  return `${fontWeight ?? 400} ${fontSize ?? '16px'}/${lineHeight ?? 1} ${fontFamily ?? 'Arial'}`;
 }

test/spec/css/transformBorder.spec.ts

@@ -28,4 +28,24 @@ describe('transform border', () => {
       }),
     ).to.equal('5px dashed rgba(0, 0, 0, 1)');
   });
+
+  it('provides empty string for missing properties', () => {
+    expect(
+      transformBorderForCSS({
+        width: '5',
+      }),
+    ).to.equal('5px');
+
+    expect(
+      transformBorderForCSS({
+        color: '#FFFFFF',
+      }),
+    ).to.equal('#FFFFFF');
+
+    expect(
+      transformBorderForCSS({
+        style: 'solid',
+      }),
+    ).to.equal('solid');
+  });
 });

test/spec/css/transformShadow.spec.ts

@@ -45,4 +45,14 @@ describe('transform shadow', () => {
       }),
     ).to.equal('5px 3px 6px 2px rgba(0, 0, 0, 1)');
   });
+
+  it('provides empty string or 0 for missing properties', () => {
+    expect(transformShadowForCSS({})).to.equal('0 0 0 rgba(0, 0, 0, 1)');
+
+    expect(transformShadowForCSS({ x: '5' })).to.equal('5px 0 0 rgba(0, 0, 0, 1)');
+
+    expect(transformShadowForCSS({ spread: '5', color: 'rgba(#000000, 0.5)' })).to.equal(
+      '0 0 0 5px rgba(0, 0, 0, 0.5)',
+    );
+  });
 });

test/spec/css/transformTypographyForCSS.spec.ts

@@ -26,4 +26,16 @@ describe('transform typography', () => {
       }),
     ).to.equal('300 20px/1.5 Arial');
   });
+
+  it('provides defaults for missing properties', () => {
+    expect(
+      transformTypographyForCSS({
+        fontWeight: 'light',
+        fontSize: '20',
+        fontFamily: 'Arial',
+      }),
+    ).to.equal('300 20px/1 Arial');
+
+    expect(transformTypographyForCSS({})).to.equal('400 16px/1 Arial');
+  });
 });