duration to css (#750)

src/PrimerStyleDictionary.ts

@@ -5,21 +5,22 @@ import {
   colorToHexAlpha,
   colorToRgbAlpha,
   colorToHex,
+  colorToHexMix,
+  colorToRgbaFloat,
+  dimensionToRem,
+  dimensionToPixelUnitless,
+  durationToCss,
+  figmaAttributes,
   fontFamilyToCss,
   fontWeightToNumber,
   jsonDeprecated,
   namePathToDotNotation,
   namePathToCamelCase,
   namePathToKebabCase,
-  shadowToCss,
-  typographyToCss,
-  colorToHexMix,
-  dimensionToRem,
-  dimensionToPixelUnitless,
-  colorToRgbaFloat,
   namePathToSlashNotation,
-  figmaAttributes,
   namePathToFigma,
+  shadowToCss,
+  typographyToCss,
 } from './transformers'
 import {
   scssMixinCssVariables,
@@ -145,6 +146,11 @@ StyleDictionary.registerTransform({
   ...dimensionToPixelUnitless,
 })
 
+StyleDictionary.registerTransform({
+  name: 'duration/css',
+  ...durationToCss,
+})
+
 StyleDictionary.registerTransform({
   name: 'figma/attributes',
   ...figmaAttributes,

src/transformers/durationToCss.test.ts

@@ -0,0 +1,56 @@
+import {getMockToken} from '~/src/test-utilities'
+import {durationToCss} from './durationToCss'
+
+describe('Transformer: durationToCss', () => {
+  it('transforms `duration` token to css duration', () => {
+    const input = getMockToken({
+      value: '100ms',
+    })
+
+    const expectedOutput = '100ms'
+    expect(durationToCss.transformer(input, {})).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms `ms` to `s`', () => {
+    const input = getMockToken({
+      value: '1252ms',
+    })
+
+    const expectedOutput = '1.252s'
+    expect(durationToCss.transformer(input, {})).toStrictEqual(expectedOutput)
+  })
+
+  it('throws an error when unit is missing or invalid', () => {
+    // missing unit
+    expect(() =>
+      durationToCss.transformer(
+        getMockToken({
+          value: '1000',
+        }),
+        {},
+      ),
+    ).toThrowError()
+
+    // only ms unit is supported
+    expect(() =>
+      durationToCss.transformer(
+        getMockToken({
+          value: '1s',
+        }),
+        {},
+      ),
+    ).toThrowError()
+  })
+
+  it('throws an error when value is number', () => {
+    // missing unit
+    expect(() =>
+      durationToCss.transformer(
+        getMockToken({
+          value: 1000,
+        }),
+        {},
+      ),
+    ).toThrowError()
+  })
+})

src/transformers/durationToCss.ts

@@ -0,0 +1,28 @@
+import type StyleDictionary from 'style-dictionary'
+
+/**
+ * @description converts duration tokens string value to number with `ms` unit
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `duration`
+ * @transformer returns a css duration
+ */
+export const durationToCss: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: (token: StyleDictionary.TransformedToken) => token.type === `duration`,
+  transformer: (token: StyleDictionary.TransformedToken, _options?: StyleDictionary.Platform) => {
+    // throw an error if token value is not a string or does not end with `ms`
+    if (typeof token.value !== `string` || !token.value.endsWith(`ms`)) {
+      throw new Error(`duration token value must be a string with an "ms" unit`)
+    }
+    // get value
+    let value = parseInt(token.value.replace('ms', ''))
+    let unit = `ms`
+    if (value >= 1000) {
+      value = value / 1000
+      unit = `s`
+    }
+    // return value
+    return `${value}${unit}`
+  },
+}

src/transformers/index.ts

@@ -6,6 +6,7 @@ export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'
 export {dimensionToRem} from './dimensionToRem'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'
+export {durationToCss} from './durationToCss'
 export {figmaAttributes} from './figmaAttributes'
 export {fontFamilyToCss} from './fontFamilyToCss'
 export {fontWeightToNumber} from './fontWeightToNumber'