fix transformer

Author: lukasoppermann

src/transformers/cubicBezierToCss.ts

@@ -14,13 +14,17 @@ export const cubicBezierToCss: Transform = {
   filter: isCubicBezier,
   transform: (token: TransformedToken, _config: PlatformConfig) => {
     const value = token.$value ?? token.value
-    // throw value of more or less than 4 items in array
-    if (value.length !== 4 || value.some((item: unknown) => typeof item !== 'number')) {
-      throw new Error(
-        `Invalid cubicBezier token ${token.path.join('.')}, must be an array with 4 numbers, but got this instead: ${JSON.stringify(value)}`,
-      )
-    }
-    // return value
-    return `cubic-bezier(${value.join(',')})`
+    return cubicBezierArrayToCss(value, token.path)
   },
 }
+
+export const cubicBezierArrayToCss = (value: number[], path: string[]) => {
+  // throw value of more or less than 4 items in array
+  if (value.length !== 4 || value.some((item: unknown) => typeof item !== 'number')) {
+    throw new Error(
+      `Invalid cubicBezier token ${path.join('.')}, must be an array with 4 numbers, but got this instead: ${JSON.stringify(value)}`,
+    )
+  }
+  // return value
+  return `cubic-bezier(${value.join(',')})`
+}

src/transformers/transitionToCss.test.ts

@@ -6,130 +6,80 @@ describe('transitionToCss', () => {
     const token = getMockToken({
       $value: {
         duration: '300ms',
-        timing: [0.4, 0, 0.2, 1],
+        timingFunction: [0.4, 0, 0.2, 1],
       },
       $type: 'transition',
     })
 
-    expect(transitionToCss.transform(token, {}, {})).toBe('300ms cubic-bezier(0.4, 0, 0.2, 1)')
+    expect(transitionToCss.transform(token, {}, {})).toBe('300ms cubic-bezier(0.4,0,0.2,1)')
   })
 
   it('should transform transition token with delay to CSS', () => {
     const token = getMockToken({
       $value: {
         duration: '300ms',
-        timing: [0.4, 0, 0.2, 1],
+        timingFunction: [0.4, 0, 0.2, 1],
         delay: '100ms',
       },
       $type: 'transition',
     })
 
-    expect(transitionToCss.transform(token, {}, {})).toBe('300ms cubic-bezier(0.4, 0, 0.2, 1) 100ms')
+    expect(transitionToCss.transform(token, {}, {})).toBe('300ms cubic-bezier(0.4,0,0.2,1) 100ms')
   })
 
   it('should transform transition token with resolved references', () => {
     const token = {
       $value: {
         duration: '300ms',
-        timing: [0.4, 0, 0.2, 1],
+        timingFunction: [0.4, 0, 0.2, 1],
         delay: '0ms',
       },
       $type: 'transition',
     }
     const resolvedRefs = {
       duration: '300ms',
-      timing: [0.4, 0, 0.2, 1],
+      timingFunction: [0.4, 0, 0.2, 1],
       delay: '0ms',
     }
 
-    expect(transitionToCss.transform(token, resolvedRefs)).toBe('300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms')
-  })
-
-  it('should transform transition token with mixed values and references', () => {
-    const token = getMockToken({
-      $value: {
-        duration: '{motion.duration.base.value}',
-        timing: [0.4, 0, 0.2, 1],
-        delay: '0ms',
-      },
-      $type: 'transition',
-    })
-
-    expect(transitionToCss.transform(token, resolvedRefs)).toBe('300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms')
-  })
-
-  it('should handle common timing function aliases', () => {
-    const token = {
-      $value: {
-        duration: '300ms',
-        timing: [0.4, 0, 1, 1],
-      },
-      $type: 'transition',
-    }
-
-    expect(transitionToCss.transform(token, {}, {})).toBe('300ms ease-out')
-  })
-
-  it('should handle direct reference token', () => {
-    const token = {
-      $value: '{motion.transition.standard}',
-      $type: 'transition',
-    }
-    const resolvedRefs = {
-      'motion.transition.standard': {
-        duration: '300ms',
-        timing: [0.4, 0, 0.2, 1],
-        delay: '0ms',
-      },
-    }
-
-    expect(transitionToCss.transform(token, resolvedRefs)).toBe('300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms')
+    expect(transitionToCss.transform(token, resolvedRefs)).toBe('300ms cubic-bezier(0.4,0,0.2,1) 0ms')
   })
 
   it('should handle missing optional delay', () => {
-    const token = {
+    const token = getMockToken({
       $value: {
         duration: '300ms',
-        timing: [0.4, 0, 0.2, 1],
+        timingFunction: [0.4, 0, 0.2, 1],
       },
       $type: 'transition',
-    }
-
-    expect(transitionToCss.transform(token, {}, {})).toBe('300ms cubic-bezier(0.4, 0, 0.2, 1)')
-  })
-
-  it('should throw error for invalid token type', () => {
-    const token = {
-      $value: {
-        duration: '300ms',
-        timing: [0.4, 0, 0.2, 1],
-      },
-      $type: 'invalid',
-    }
+    })
 
-    expect(() => transitionToCss.transform(token, {}, {})).toThrow('Invalid token type: invalid')
+    expect(transitionToCss.transform(token, {}, {})).toBe('300ms cubic-bezier(0.4,0,0.2,1)')
   })
 
   it('should throw error for missing required properties', () => {
-    const token = {
+    const token = getMockToken({
       $value: {
         duration: '300ms',
       },
       $type: 'transition',
-    }
-    // @ts-expect-error: testing invalid token
-    expect(() => transitionToCss.transform(token, {}, {})).toThrow('Missing required property: timing')
+    })
+    expect(() => transitionToCss.transform(token, {}, {})).toThrow(
+      'Missing property: timingFunction on token with value {"duration":"300ms"}',
+    )
   })
 
   it('should throw error for invalid timing value', () => {
-    const token = {
+    const token = getMockToken({
       $value: {
         duration: '300ms',
-        timing: [0.4, 0, 0.2], // Missing one value
+        timingFunction: [0.4, 0, 0.2], // Missing one value
       },
       $type: 'transition',
-    }
+    })
 
-    expect(() => transitionToCss.transform(token, {}, {})).toThrow('Invalid timing value')
+    expect(() => transitionToCss.transform(token, {}, {})).toThrow(
+      'Invalid cubicBezier token path, must be an array with 4 numbers, but got this instead: [0.4,0,0.2]',
+    )
   })
 })

src/transformers/transitionToCss.ts

@@ -1,4 +1,5 @@
 import {isTransition} from '../filters/index.js'
+import {cubicBezierArrayToCss} from './cubicBezierToCss.js'
 import {checkRequiredTokenProperties} from './utilities/checkRequiredTokenProperties.js'
 import {getTokenValue} from './utilities/getTokenValue.js'
 import type {Transform, TransformedToken} from 'style-dictionary/types'
@@ -26,6 +27,6 @@ export const transitionToCss: Transform = {
     // check required properties
     checkRequiredTokenProperties(value, ['duration', 'timingFunction'])
 
-    return `${value.duration} ${value.timingFunction} ${value.delay ? value.delay : ''}`.trim()
+    return `${value.duration} ${cubicBezierArrayToCss(value.timingFunction, token.path)} ${value.delay ? value.delay : ''}`.trim()
   },
 }