V5 fully support w3c tokens

src/build.test.js

@@ -8,28 +8,21 @@ describe('index.js', () => {
     expect(StyleDictionary.hooks.formats['typescript/esm-declarations']).toBeDefined()
   })
   it('all transformers are attached', () => {
+    expect(StyleDictionary.hooks.transforms['clamp/css']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['color/css']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['color/hex']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['color/rgba']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['color/rgbAlpha']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['color/rgbaFloat']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['color/hexAlpha']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['comment/deprecated']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['clamp/css']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['name/pathToDotNotation']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['name/pathToCamelCase']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['shadow/css']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['transition/css']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['cubicBezier/css']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['dimension/css']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['font/css']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['fontFamily/css']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['fontWeight/number']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['gradient/css']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['cubicBezier/css']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['strokeStyle/css']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['dimension/pixelToRem']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['dimension/remToPixel']).toBeDefined()
-    expect(StyleDictionary.hooks.transforms['dimension/pixelUnitless']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['name/pathToCamelCase']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['name/pathToDotNotation']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['number']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['shadow/css']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['strokeStyle/css']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['transition/css']).toBeDefined()
   })
 
   it('all transformGroups are attached', () => {
@@ -38,21 +31,19 @@ describe('index.js', () => {
 
   it('all filters are attached', () => {
     expect(StyleDictionary.hooks.filters['isBorder']).toBeDefined()
+    expect(StyleDictionary.hooks.filters['isClamp']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isColor']).toBeDefined()
-    expect(StyleDictionary.hooks.filters['isColorOrGradient']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isCubicBezier']).toBeDefined()
-    expect(StyleDictionary.hooks.filters['isClamp']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isDeprecated']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isDimension']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isDuration']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isFontFamily']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isFontWeight']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isGradient']).toBeDefined()
+    expect(StyleDictionary.hooks.filters['isNumber']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isShadow']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isSource']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isStrokeStyle']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isTransition']).toBeDefined()
-    expect(StyleDictionary.hooks.filters['isTypographic']).toBeDefined()
-    expect(StyleDictionary.hooks.filters['isNumber']).toBeDefined()
   })
 })

src/filter/isBorder.test.ts

@@ -20,6 +20,6 @@ describe('Filter: isBorder', () => {
     },
   ] as TransformedToken[]
   it('filters border tokens', () => {
-    expect(items.filter(isBorder)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isBorder.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isBorder.ts

@@ -4,4 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `border`
  */
-export const isBorder = (token: TransformedToken): boolean => token?.$type === 'border' || token?.type === 'border'
+export const isBorderFilter = (token: TransformedToken): boolean =>
+  token?.$type === 'border' || token?.type === 'border'
+
+export const isBorder = {
+  name: 'isBorder',
+  filter: isBorderFilter,
+}

src/filter/isClamp.test.ts

@@ -78,10 +78,10 @@ describe('Filter: isClamp', () => {
     },
   ] as TransformedToken[]
   it('filters clamp tokens', () => {
-    expect(items.filter(isClamp)).toStrictEqual([items[4]])
+    expect(items.filter(isClamp.filter)).toStrictEqual([items[4]])
   })
 
   it('filters clamp tokens in W3C format', () => {
-    expect(w3cItems.filter(isClamp)).toStrictEqual([w3cItems[4]])
+    expect(w3cItems.filter(isClamp.filter)).toStrictEqual([w3cItems[4]])
   })
 })

src/filter/isClamp.ts

@@ -5,7 +5,7 @@ import {getValue} from '../utilities/getValue.js'
  * @type filter
  * @description only returns tokens of type `shadow`
  */
-export const isClamp = (token: TransformedToken): boolean => {
+export const isClampFilter = (token: TransformedToken): boolean => {
   const tokenValue = getValue(token)
   return (
     (token?.$type === 'clamp' || token?.type === 'clamp') &&
@@ -16,3 +16,8 @@ export const isClamp = (token: TransformedToken): boolean => {
     'max' in tokenValue
   )
 }
+
+export const isClamp = {
+  name: 'isClamp',
+  filter: isClampFilter,
+}

src/filter/isColor.test.ts

@@ -20,6 +20,6 @@ describe('Filter: isColor', () => {
     },
   ] as TransformedToken[]
   it('filters color tokens', () => {
-    expect(items.filter(isColor)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isColor.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isColor.ts

@@ -4,4 +4,9 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `color`
  */
-export const isColor = (token: TransformedToken): boolean => token?.$type === 'color' || token?.type === 'color'
+export const isColorFilter = (token: TransformedToken): boolean => token?.$type === 'color' || token?.type === 'color'
+
+export const isColor = {
+  name: 'isColor',
+  filter: isColorFilter,
+}

src/filter/isCubicBezier.test.ts

@@ -20,6 +20,6 @@ describe('Filter: isCubicBezier', () => {
     },
   ] as TransformedToken[]
   it('filters cubicBezier tokens', () => {
-    expect(items.filter(isCubicBezier)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isCubicBezier.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isCubicBezier.ts

@@ -4,5 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `cubicBezier`
  */
-export const isCubicBezier = (token: TransformedToken): boolean =>
+export const isCubicBezierFilter = (token: TransformedToken): boolean =>
   token?.$type === 'cubicBezier' || token?.type === 'cubicBezier'
+
+export const isCubicBezier = {
+  name: 'isCubicBezier',
+  filter: isCubicBezierFilter,
+}

src/filter/isDeprecated.test.ts

@@ -34,6 +34,6 @@ describe('Filter: isDeprecated', () => {
     // - $deprecated: string -> deprecated
     // - $deprecated: false -> NOT deprecated
     // - deprecated: anything -> NOT deprecated (ignored)
-    expect(items.filter(isDeprecated)).toStrictEqual([items[1], items[2]])
+    expect(items.filter(isDeprecated.filter)).toStrictEqual([items[1], items[2]])
   })
 })

src/filter/isDeprecated.ts

@@ -4,7 +4,12 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens with $deprecated = true or $deprecated = string
  */
-export const isDeprecated = (token: TransformedToken): boolean => {
+export const isDeprecatedFilter = (token: TransformedToken): boolean => {
   const deprecated = token.$deprecated
   return deprecated === true || typeof deprecated === 'string'
 }
+
+export const isDeprecated = {
+  name: 'isDeprecated',
+  filter: isDeprecatedFilter,
+}

src/filter/isDimension.test.ts

@@ -47,10 +47,14 @@ describe('Filter: isDimension', () => {
   ] as TransformedToken[]
 
   it('filters dimension tokens', () => {
-    expect(items.filter(isDimension)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isDimension.filter)).toStrictEqual([items[0], items[2]])
   })
 
   it('filters dimension tokens with new structured format', () => {
-    expect(newFormatItems.filter(isDimension)).toStrictEqual([newFormatItems[0], newFormatItems[1], newFormatItems[3]])
+    expect(newFormatItems.filter(isDimension.filter)).toStrictEqual([
+      newFormatItems[0],
+      newFormatItems[1],
+      newFormatItems[3],
+    ])
   })
 })

src/filter/isDimension.ts

@@ -4,5 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `dimension`
  */
-export const isDimension = (token: TransformedToken): boolean =>
+export const isDimensionFilter = (token: TransformedToken): boolean =>
   token?.$type === 'dimension' || token?.type === 'dimension'
+
+export const isDimension = {
+  name: 'isDimension',
+  filter: isDimensionFilter,
+}

src/filter/isDuration.test.ts

@@ -32,6 +32,6 @@ describe('Filter: isDuration', () => {
   ] as TransformedToken[]
 
   it('filters duration tokens (both old and new formats)', () => {
-    expect(items.filter(isDuration)).toStrictEqual([items[0], items[1], items[2], items[3]])
+    expect(items.filter(isDuration.filter)).toStrictEqual([items[0], items[1], items[2], items[3]])
   })
 })

src/filter/isDuration.ts

@@ -4,5 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `duration`
  */
-export const isDuration = (token: TransformedToken): boolean =>
+export const isDurationFilter = (token: TransformedToken): boolean =>
   token?.$type === 'duration' || token?.type === 'duration'
+
+export const isDuration = {
+  name: 'isDuration',
+  filter: isDurationFilter,
+}

src/filter/isFontFamily.test.ts

@@ -20,6 +20,6 @@ describe('Filter: isFontFamily', () => {
     },
   ] as TransformedToken[]
   it('filters fontFamily tokens', () => {
-    expect(items.filter(isFontFamily)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isFontFamily.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isFontFamily.ts

@@ -4,5 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `fontFamily`
  */
-export const isFontFamily = (token: TransformedToken): boolean =>
+export const isFontFamilyFilter = (token: TransformedToken): boolean =>
   token?.$type === 'fontFamily' || token?.type === 'fontFamily'
+
+export const isFontFamily = {
+  name: 'isFontFamily',
+  filter: isFontFamilyFilter,
+}

src/filter/isFontWeight.test.ts

@@ -20,6 +20,6 @@ describe('Filter: isFontWeight', () => {
     },
   ] as TransformedToken[]
   it('filters fontWeight tokens', () => {
-    expect(items.filter(isFontWeight)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isFontWeight.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isFontWeight.ts

@@ -4,5 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `fontWeight`
  */
-export const isFontWeight = (token: TransformedToken): boolean =>
+export const isFontWeightFilter = (token: TransformedToken): boolean =>
   token?.$type === 'fontWeight' || token?.type === 'fontWeight'
+
+export const isFontWeight = {
+  name: 'isFontWeight',
+  filter: isFontWeightFilter,
+}

src/filter/isGradient.test.ts

@@ -19,7 +19,7 @@ describe('Filter: isGradient', () => {
       value: 'string',
     },
   ] as TransformedToken[]
-  it('filters gradiet tokens', () => {
-    expect(items.filter(isGradient)).toStrictEqual([items[0], items[2]])
+  it('filters gradient tokens', () => {
+    expect(items.filter(isGradient.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isGradient.ts

@@ -4,5 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `gradient`
  */
-export const isGradient = (token: TransformedToken): boolean =>
+export const isGradientFilter = (token: TransformedToken): boolean =>
   token?.$type === 'gradient' || token?.type === 'gradient'
+
+export const isGradient = {
+  name: 'isGradient',
+  filter: isGradientFilter,
+}

src/filter/isNumber.test.ts

@@ -21,6 +21,6 @@ describe('Filter: isNumber', () => {
   ] as TransformedToken[]
 
   it('filters number tokens', () => {
-    expect(items.filter(isNumber)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isNumber.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isNumber.ts

@@ -4,4 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `number`
  */
-export const isNumber = (token: TransformedToken): boolean => token?.$type === 'number' || token?.type === 'number'
+export const isNumberFilter = (token: TransformedToken): boolean =>
+  token?.$type === 'number' || token?.type === 'number'
+
+export const isNumber = {
+  name: 'isNumber',
+  filter: isNumberFilter,
+}

src/filter/isShadow.test.ts

@@ -20,6 +20,6 @@ describe('Filter: isShadow', () => {
     },
   ] as TransformedToken[]
   it('filters shadow tokens', () => {
-    expect(items.filter(isShadow)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isShadow.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isShadow.ts

@@ -4,4 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `shadow`
  */
-export const isShadow = (token: TransformedToken): boolean => token?.$type === 'shadow' || token?.type === 'shadow'
+export const isShadowFilter = (token: TransformedToken): boolean =>
+  token?.$type === 'shadow' || token?.type === 'shadow'
+
+export const isShadow = {
+  name: 'isShadow',
+  filter: isShadowFilter,
+}

src/filter/isSource.test.ts

@@ -16,6 +16,6 @@ describe('Filter: isSource', () => {
     },
   ] as TransformedToken[]
   it('filters out non-source items', () => {
-    expect(items.filter(isSource)).toStrictEqual([items[0]])
+    expect(items.filter(isSource.filter)).toStrictEqual([items[0]])
   })
 })

src/filter/isSource.ts

@@ -5,4 +5,9 @@ import {TransformedToken} from 'style-dictionary/types'
  * @description only returns tokens that are coming from a `source` file and
  * not from an `included` file
  */
-export const isSource = (token: TransformedToken): boolean => token?.isSource === true
+export const isSourceFilter = (token: TransformedToken): boolean => token?.isSource === true
+
+export const isSource = {
+  name: 'isSource',
+  filter: isSourceFilter,
+}

src/filter/isStrokeStyle.test.ts

@@ -20,6 +20,6 @@ describe('Filter: isStrokeStyle', () => {
     },
   ] as TransformedToken[]
   it('filters strokeStyle tokens', () => {
-    expect(items.filter(isStrokeStyle)).toStrictEqual([items[0], items[2]])
+    expect(items.filter(isStrokeStyle.filter)).toStrictEqual([items[0], items[2]])
   })
 })

src/filter/isStrokeStyle.ts

@@ -4,5 +4,10 @@ import {TransformedToken} from 'style-dictionary/types'
  * @type filter
  * @description only returns tokens of type `strokeStyle`
  */
-export const isStrokeStyle = (token: TransformedToken): boolean =>
+export const isStrokeStyleFilter = (token: TransformedToken): boolean =>
   token?.$type === 'strokeStyle' || token?.type === 'strokeStyle'
+
+export const isStrokeStyle = {
+  name: 'isStrokeStyle',
+  filter: isStrokeStyleFilter,
+}