updating transforms to use new getValue function

src/transformer/border-css.test.ts

@@ -12,7 +12,7 @@ describe('transform: border', () => {
       $type: 'border',
     },
     {
-      value: {
+      $value: {
         color: '#33445566',
         width: '5px',
         style: 'solid',

src/transformer/border-css.ts

@@ -1,5 +1,6 @@
 import {Transform, TransformedToken} from 'style-dictionary/types'
 import {isBorder} from '../filter/isBorder.js'
+import {getValue} from '../utilities/getValue.js'
 
 type StrokeStyleString = 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'outset' | 'inset'
 
@@ -18,9 +19,10 @@ export const borderCss: Transform = {
   transitive: true,
   filter: isBorder,
   transform: (token: Omit<TransformedToken, 'value'> & {value?: TokenBorder}) => {
-    if (!token.value) return
-    if (typeof token.value.style !== 'string')
+    const tokenValue = getValue<Omit<TransformedToken, 'value'> & {value?: TokenBorder}>(token)
+    if (!tokenValue) return
+    if (typeof tokenValue.style !== 'string')
       throw new Error('Only string stroke styles are supported for border tokens')
-    return `${token.value.width} ${token.value.style} ${token.value.color}`
+    return `${tokenValue.width} ${tokenValue.style} ${tokenValue.color}`
   },
 }

src/transformer/clamp-css.test.ts

@@ -15,18 +15,27 @@ describe('transform: clampCss', () => {
       },
       $type: 'clamp',
     },
+    {
+      $value: {
+        min: '.5rem',
+        ideal: '5vw',
+        max: '2.5rem',
+      },
+      $type: 'clamp',
+    },
     {
       value: '',
     },
   ] as TransformedToken[]
 
   it('matches `clamp` tokens', () => {
-    expect(items.filter(clampCss.filter)).toStrictEqual([items[1]])
+    expect(items.filter(clampCss.filter)).toStrictEqual([items[1], items[2]])
   })
 
   it('transforms `clamp` tokens', () => {
     expect(items.filter(clampCss.filter).map(item => clampCss.transform(item, {}, {}))).toStrictEqual([
       'clamp(1.5rem, 5vw, 2.5rem)',
+      'clamp(.5rem, 5vw, 2.5rem)',
     ])
   })
 

src/transformer/clamp-css.ts

@@ -1,5 +1,6 @@
 import {Transform, TransformedToken} from 'style-dictionary/types'
 import {isClamp} from '../filter/isClamp.js'
+import {getValue} from '../utilities/getValue.js'
 
 type TokenClamp = {
   min: string
@@ -12,8 +13,9 @@ export const clampCss: Transform = {
   type: `value`,
   transitive: true,
   filter: isClamp,
-  transform: ({value}: Omit<TransformedToken, 'value'> & {value?: TokenClamp}) => {
-    if (!value) return
-    return `clamp(${value.min}, ${value.ideal}, ${value.max})`
+  transform: (token: Omit<TransformedToken, 'value'> & {value?: TokenClamp}) => {
+    const tokenValue = getValue<Omit<TransformedToken, 'value'> & {value?: TokenClamp}>(token)
+    if (!tokenValue) return
+    return `clamp(${tokenValue.min}, ${tokenValue.ideal}, ${tokenValue.max})`
   },
 }

src/transformer/color-alpha-to-hex.test.ts

@@ -5,15 +5,15 @@ import {colorAlphaToHex} from './color-alpha-to-hex'
 describe('transform: colorAlphaToHex', () => {
   it('transforms `color` tokens with hex value', () => {
     expect(
-      [{value: '#343'}, {value: '#343434'}, {value: '#34343466'}].map(item =>
+      [{value: '#343'}, {$value: '#343434'}, {value: '#34343466'}].map(item =>
         colorAlphaToHex.transform(item as TransformedToken, {}, {}),
       ),
     ).toStrictEqual(['#334433', '#343434', '#34343466'])
   })
 
   it('transforms `color` tokens with rgb value', () => {
     expect(
-      [{value: 'rgb(100,200,255)'}, {value: 'rgba(100,200,255, .4)'}].map(item =>
+      [{value: 'rgb(100,200,255)'}, {$value: 'rgba(100,200,255, .4)'}].map(item =>
         colorAlphaToHex.transform(item as TransformedToken, {}, {}),
       ),
     ).toStrictEqual(['#64c8ff', '#64c8ff66'])
@@ -23,7 +23,7 @@ describe('transform: colorAlphaToHex', () => {
     expect(
       [
         {value: '#343434', alpha: 0.4},
-        {value: '#34343466', alpha: 0.2},
+        {$value: '#34343466', alpha: 0.2},
         // @ts-expect-error: fake token for test causes error
       ].map(item => colorAlphaToHex.transform(item, {})),
     ).toStrictEqual(['#34343466', '#34343433'])

src/transformer/color-alpha-to-hex.ts

@@ -2,6 +2,7 @@ import {toHex} from 'color2k'
 import {alpha} from '../utilities/alpha.js'
 import {Transform, TransformedToken} from 'style-dictionary/types'
 import {isColor} from '../filter/isColor.js'
+import {getValue} from '../utilities/getValue.js'
 /**
  * colorAlphaToHex
  * @description convert a token of type `color` to a hex8 value if alpha < 1 and hex6 if alpha is 1
@@ -12,7 +13,8 @@ export const colorAlphaToHex: Transform = {
   transitive: true,
   filter: isColor,
   transform: (token: TransformedToken) => {
-    if (token.alpha) return toHex(alpha(token.value, token.alpha))
-    return toHex(token.value)
+    const tokenValue = getValue<string>(token)
+    if (token.alpha) return toHex(alpha(tokenValue, token.alpha))
+    return toHex(tokenValue)
   },
 }

src/transformer/color-alpha-to-rgba.test.ts

@@ -4,15 +4,15 @@ import {colorAlphaToRgba} from './color-alpha-to-rgba'
 describe('transform: colorToRgba', () => {
   it('transforms `color` tokens with hex value', () => {
     expect(
-      [{value: '#343'}, {value: '#343434'}, {value: '#34343466'}].map(item =>
+      [{value: '#343'}, {$value: '#343434'}, {value: '#34343466'}].map(item =>
         colorAlphaToRgba.transform(item as TransformedToken, {}, {}),
       ),
     ).toStrictEqual(['rgba(51, 68, 51, 1)', 'rgba(52, 52, 52, 1)', 'rgba(52, 52, 52, 0.4)'])
   })
 
   it('transforms `color` tokens with rgb value and keeps alpha values', () => {
     expect(
-      [{value: 'rgb(100,200,255)'}, {value: 'rgba(100,200,255, .4)'}, {value: 'rgba(100,200,255, 0)'}].map(item =>
+      [{value: 'rgb(100,200,255)'}, {$value: 'rgba(100,200,255, .4)'}, {value: 'rgba(100,200,255, 0)'}].map(item =>
         colorAlphaToRgba.transform(item as TransformedToken, {}, {}),
       ),
     ).toStrictEqual(['rgba(100, 200, 255, 1)', 'rgba(100, 200, 255, 0.4)', 'rgba(100, 200, 255, 0)'])
@@ -22,7 +22,7 @@ describe('transform: colorToRgba', () => {
     expect(
       [
         {value: '#343434', alpha: 0.4},
-        {value: '#343434cc', alpha: 0.2},
+        {$value: '#343434cc', alpha: 0.2},
         {value: '#343434', alpha: 0},
         // @ts-expect-error: fake token for test causes error
       ].map(item => colorAlphaToRgba.transform(item, {}, {})),

src/transformer/color-alpha-to-rgba.ts

@@ -2,6 +2,7 @@ import {toRgba} from 'color2k'
 import {Transform, TransformedToken} from 'style-dictionary/types'
 import {isColor} from '../filter/isColor.js'
 import {alpha} from '../utilities/alpha.js'
+import {getValue} from '../utilities/getValue.js'
 /**
  * colorAlphaToRgba
  * @description convert a token of type `color` to a rgba value
@@ -12,7 +13,8 @@ export const colorAlphaToRgba: Transform = {
   transitive: true,
   filter: isColor,
   transform: (token: TransformedToken) => {
-    if (token.alpha !== undefined) return alpha(token.value, token.alpha)
-    return toRgba(token.value)
+    const tokenValue = getValue<string>(token)
+    if (token.alpha !== undefined) return alpha(tokenValue, token.alpha)
+    return toRgba(tokenValue)
   },
 }