fix: handle timingFunction and fontFamily props in transforms

amzn · Jun 4, 2024 · ff75bc2 · ff75bc2
1 parent 8d6fac5
commit ff75bc2
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 71 deletions.
diff --git a/.changeset/strong-tools-draw.md b/.changeset/strong-tools-draw.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': minor
+---
+
+Handle transition timingFunction prop in cubicBezier/css transform. Handle typography fontFamily prop in fontFamily/css transform.
diff --git a/__tests__/cleanDir.test.js b/__tests__/cleanDir.test.js
@@ -16,10 +16,6 @@ import StyleDictionary from '../lib/StyleDictionary.js';
 import cleanFile from '../lib/cleanFile.js';
 import cleanDir from '../lib/cleanDir.js';
 
-function format() {
-  return 'hi';
-}
-
 describe('cleanDir', () => {
   beforeEach(() => {
     clearOutput();

diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js
@@ -1049,39 +1049,132 @@ describe('common', () => {
     });
 
     describe('fontFamily/css', () => {
-      const fontFamilyTransform = (value) =>
-        transforms['fontFamily/css'].transform({ value }, {}, {});
+      const fontFamilyTransform = (token) => transforms['fontFamily/css'].transform(token, {}, {});
 
       it('should handle simple fontFamily as is', () => {
-        expect(fontFamilyTransform('Arial')).to.equal('Arial');
+        expect(fontFamilyTransform({ value: 'Arial', type: 'fontFamily' })).to.equal('Arial');
       });
 
       it('should comma separated type fontFamily values', () => {
-        expect(fontFamilyTransform('Arial, sans-serif')).to.equal('Arial, sans-serif');
+        expect(fontFamilyTransform({ value: 'Arial, sans-serif', type: 'fontFamily' })).to.equal(
+          'Arial, sans-serif',
+        );
       });
 
       it('should handle array type fontFamily values', () => {
-        expect(fontFamilyTransform(['Arial', 'sans-serif'])).to.equal('Arial, sans-serif');
+        expect(
+          fontFamilyTransform({ value: ['Arial', 'sans-serif'], type: 'fontFamily' }),
+        ).to.equal('Arial, sans-serif');
       });
 
       it('should wrap fontFamily values with spaces in quotes', () => {
-        expect(fontFamilyTransform('Gill Sans')).to.equal("'Gill Sans'");
-        expect(fontFamilyTransform('Gill Sans, Arial, Comic Sans, Open Sans, sans-serif')).to.equal(
-          "'Gill Sans', Arial, 'Comic Sans', 'Open Sans', sans-serif",
+        expect(fontFamilyTransform({ value: 'Gill Sans', type: 'fontFamily' })).to.equal(
+          "'Gill Sans'",
         );
         expect(
-          fontFamilyTransform(['Gill Sans', 'Arial', 'Comic Sans', 'Open Sans', 'sans-serif']),
+          fontFamilyTransform({
+            value: 'Gill Sans, Arial, Comic Sans, Open Sans, sans-serif',
+            type: 'fontFamily',
+          }),
         ).to.equal("'Gill Sans', Arial, 'Comic Sans', 'Open Sans', sans-serif");
+        expect(
+          fontFamilyTransform({
+            value: ['Gill Sans', 'Arial', 'Comic Sans', 'Open Sans', 'sans-serif'],
+            type: 'fontFamily',
+          }),
+        ).to.equal("'Gill Sans', Arial, 'Comic Sans', 'Open Sans', sans-serif");
+      });
+
+      it('should handle fontFamily prop within typography tokens', () => {
+        expect(
+          fontFamilyTransform({
+            value: {
+              fontFamily: ['Gill Sans', 'sans-serif'],
+              fontWeight: 300,
+              fontSize: '20px',
+              lineHeight: '1.5',
+            },
+            type: 'typography',
+          }),
+        ).to.eql({
+          fontFamily: "'Gill Sans', sans-serif",
+          fontWeight: 300,
+          fontSize: '20px',
+          lineHeight: '1.5',
+        });
+
+        expect(
+          fontFamilyTransform({
+            value: {
+              fontWeight: 300,
+              fontSize: '20px',
+              lineHeight: '1.5',
+            },
+            type: 'typography',
+          }),
+        ).to.eql({
+          fontWeight: 300,
+          fontSize: '20px',
+          lineHeight: '1.5',
+        });
       });
     });
 
     describe('cubicBezier/css', () => {
-      const cubicBezierTransform = (value) =>
-        transforms['cubicBezier/css'].transform({ value }, {}, {});
+      const cubicBezierTransform = (token) =>
+        transforms['cubicBezier/css'].transform(token, {}, {});
 
       it('should stringify cubicBezier values to cubicBezier() CSS function', () => {
-        expect(cubicBezierTransform([0.5, 0, 1, 1])).to.equal('cubic-bezier(0.5, 0, 1, 1)');
-        expect('ease-in-out').to.equal('ease-in-out');
+        expect(cubicBezierTransform({ value: [0.5, 0, 1, 1], type: 'cubicBezier' })).to.equal(
+          'cubic-bezier(0.5, 0, 1, 1)',
+        );
+        expect(cubicBezierTransform({ value: 'ease-in-out', type: 'cubicBezier' })).to.equal(
+          'ease-in-out',
+        );
+      });
+
+      it('should stringify transition token cubicBezier properties to cubicBezier() CSS function', () => {
+        expect(
+          cubicBezierTransform({
+            value: {
+              duration: '200ms',
+              delay: '0ms',
+              timingFunction: [0.5, 0, 1, 1],
+            },
+            type: 'transition',
+          }),
+        ).to.eql({
+          duration: '200ms',
+          delay: '0ms',
+          timingFunction: 'cubic-bezier(0.5, 0, 1, 1)',
+        });
+        expect(
+          cubicBezierTransform({
+            value: {
+              duration: '200ms',
+              delay: '0ms',
+              timingFunction: 'ease-in-out',
+            },
+            type: 'transition',
+          }),
+        ).to.eql({
+          duration: '200ms',
+          delay: '0ms',
+          timingFunction: 'ease-in-out',
+        });
+
+        expect(
+          cubicBezierTransform({
+            value: {
+              duration: '200ms',
+              delay: '0ms',
+            },
+            type: 'transition',
+          }),
+        ).to.eql({
+          duration: '200ms',
+          delay: '0ms',
+        });
       });
     });
 
@@ -1118,28 +1211,6 @@ describe('common', () => {
         expect(typographyTransform({})).to.equal('16px sans-serif');
         expect(typographyTransform({}, { basePxFontSize: 12 })).to.equal('12px sans-serif');
       });
-
-      it('sets quotes around fontFamily if it has white-spaces in name', () => {
-        expect(
-          typographyTransform({
-            fontWeight: 300,
-            fontSize: '20px',
-            lineHeight: '1.5',
-            fontFamily: 'Arial Narrow, Arial, sans-serif',
-          }),
-        ).to.equal("300 20px/1.5 'Arial Narrow', Arial, sans-serif");
-      });
-
-      it('handles array fontFamily values', () => {
-        expect(
-          typographyTransform({
-            fontWeight: 300,
-            fontSize: '20px',
-            lineHeight: '1.5',
-            fontFamily: ['Arial Narrow', 'Arial', 'sans-serif'],
-          }),
-        ).to.equal("300 20px/1.5 'Arial Narrow', Arial, sans-serif");
-      });
     });
 
     // https://design-tokens.github.io/community-group/format/#border
@@ -1201,7 +1272,7 @@ describe('common', () => {
           transitionTransform({
             duration: '200ms',
             delay: '0ms',
-            timingFunction: [0.5, 0, 1, 1],
+            timingFunction: 'cubic-bezier(0.5, 0, 1, 1)',
           }),
         ).to.equal('200ms cubic-bezier(0.5, 0, 1, 1) 0ms');
 

diff --git a/__tests__/exportPlatform.test.js b/__tests__/exportPlatform.test.js
@@ -651,7 +651,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details.
           },
           platforms: {
             css: {
-              transforms: ['transition/css/shorthand'],
+              transforms: ['cubicBezier/css', 'transition/css/shorthand'],
             },
           },
         });
@@ -678,7 +678,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details.
           },
           platforms: {
             css: {
-              transforms: ['transition/css/shorthand'],
+              transforms: ['cubicBezier/css', 'transition/css/shorthand'],
             },
           },
         });

diff --git a/docs/src/content/docs/reference/Hooks/Transforms/predefined.md b/docs/src/content/docs/reference/Hooks/Transforms/predefined.md
@@ -519,12 +519,13 @@ Assumes a time in miliseconds and transforms it into a decimal
 ### fontFamily/css
 
 Transforms `fontFamily` type token (which can be an array) into a CSS string, putting single quotes around font names that contain spaces where necessary.
+Also handles the `fontFamily` property inside `typography` type object-values.
 
 [DTCG definition](https://design-tokens.github.io/community-group/format/#font-family)
 
 ```css
 /**
- * Matches: token.type === 'fontFamily'
+ * Matches: token.type === 'fontFamily' || token.type === 'typography'
  * Returns:
  */
 :root {
@@ -537,12 +538,13 @@ Transforms `fontFamily` type token (which can be an array) into a CSS string, pu
 ### cubicBezier/css
 
 Transforms `cubicBezier` type token into a CSS string, using the CSS `cubic-bezier` function.
+Also handles the `timingFunction` property inside `transition` type object-values.
 
 [DTCG definition](https://design-tokens.github.io/community-group/format/#cubic-bezier)
 
 ```css
 /**
- * Matches: token.type === 'cubicBezier'
+ * Matches: token.type === 'cubicBezier' || token.type === 'transition'
  * Returns:
  */
 :root {

diff --git a/lib/common/transforms.js b/lib/common/transforms.js
@@ -135,29 +135,69 @@ function quoteWrapWhitespacedFont(fontString) {
 }
 
 /**
- * @param {string|string[]} fontFamily
+ * @param {Token} token
+ * @param {Config} options
  */
-function processFontFamily(fontFamily) {
-  let f = fontFamily;
-  if (typeof f === 'string' && f.includes(',')) {
-    f = f.split(',').map((part) => part.trim());
-  }
+function processFontFamily(token, options) {
+  const val = options.usesDtcg ? token.$value : token.value;
+  const type = options.usesDtcg ? token.$type : token.type;
 
-  if (Array.isArray(f)) {
-    return f.map((part) => quoteWrapWhitespacedFont(part)).join(', ');
+  /**
+   * @param {string|string[]} _family
+   * @returns
+   */
+  const processFamily = (_family) => {
+    let family = _family;
+    if (typeof family === 'string' && family.includes(',')) {
+      family = family.split(',').map((part) => part.trim());
+    }
+
+    if (Array.isArray(family)) {
+      return family.map((part) => quoteWrapWhitespacedFont(part)).join(', ');
+    }
+
+    return quoteWrapWhitespacedFont(family);
+  };
+
+  if (type === 'typography') {
+    if (val.fontFamily) {
+      return {
+        ...val,
+        fontFamily: processFamily(val.fontFamily),
+      };
+    }
+    return val;
   }
 
-  return quoteWrapWhitespacedFont(f);
+  return processFamily(val);
 }
 
 /**
- * @param {number[]|string} cubicBezier
+ * @param {Token} token
+ * @param {Config} options
  */
-function transformCubicBezierCSS(cubicBezier) {
-  if (Array.isArray(cubicBezier)) {
-    return `cubic-bezier(${cubicBezier.join(', ')})`;
+function transformCubicBezierCSS(token, options) {
+  const val = options.usesDtcg ? token.$value : token.value;
+  const type = options.usesDtcg ? token.$type : token.type;
+
+  /** @param {number[]|string} easing */
+  const transformEasing = (easing) => {
+    if (Array.isArray(easing)) {
+      return `cubic-bezier(${easing.join(', ')})`;
+    }
+    return easing;
+  };
+
+  if (type === 'transition') {
+    if (val.timingFunction) {
+      return {
+        ...val,
+        timingFunction: transformEasing(val.timingFunction),
+      };
+    }
+    return val;
   }
-  return cubicBezier;
+  return transformEasing(val);
 }
 
 /**
@@ -1084,12 +1124,12 @@ export default {
    */
   'fontFamily/css': {
     type: 'value',
-    filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'fontFamily',
+    filter: (token, options) => {
+      const type = options.usesDtcg ? token.$type : token.type;
+      return !!type && ['fontFamily', 'typography'].includes(type);
+    },
     transform: (token, _, options) => {
-      /** @type {string|string[]} */
-      const fontFamily = options.usesDtcg ? token.$value : token.value;
-
-      return processFontFamily(fontFamily);
+      return processFontFamily(token, options);
     },
   },
 
@@ -1108,11 +1148,12 @@ export default {
    */
   'cubicBezier/css': {
     type: 'value',
-    filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'cubicBezier',
+    filter: (token, options) => {
+      const type = options.usesDtcg ? token.$type : token.type;
+      return !!type && ['cubicBezier', 'transition'].includes(type);
+    },
     transform: (token, _, options) => {
-      /** @type {number[]|string} */
-      const cubicBezier = options.usesDtcg ? token.$value : token.value;
-      return transformCubicBezierCSS(cubicBezier);
+      return transformCubicBezierCSS(token, options);
     },
   },
 
@@ -1232,7 +1273,7 @@ export default {
         );
       }
 
-      fontFamily = processFontFamily(fontFamily ?? 'sans-serif');
+      fontFamily = fontFamily ?? 'sans-serif';
 
       return `${fontStyle ? `${fontStyle} ` : ''}${fontVariant ? `${fontVariant} ` : ''}${
         fontWeight ? `${fontWeight} ` : ''
@@ -1267,7 +1308,7 @@ export default {
       }
       const { duration, delay, timingFunction } = val;
 
-      return `${duration} ${transformCubicBezierCSS(timingFunction)} ${delay}`;
+      return `${duration} ${timingFunction} ${delay}`;
     },
   },