Merge pull request #142 from lukasoppermann/only-$type

Only $type

Author: lukasoppermann

README.md

@@ -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/build.test.js

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

src/filter/getIsType.test.ts

@@ -9,4 +9,4 @@ import {TransformedToken} from 'style-dictionary/types'
 export const getIsType =
   (...args: string[]) =>
   (token: TransformedToken): boolean =>
-    args.includes(token?.$type ?? token?.type ?? '')
+    args.includes(token?.$type ?? '')

src/filter/getIsType.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]])
   })
 })

src/filter/isBorder.test.ts

@@ -4,4 +4,9 @@ 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'
+
+export const isBorder = {
+  name: 'isBorder',
+  filter: isBorderFilter,
+}

src/filter/isBorder.ts

@@ -3,44 +3,6 @@ import {isClamp} from './isClamp'
 
 describe('Filter: isClamp', () => {
   const items = [
-    {
-      value: '300ms',
-      $type: 'clamp',
-    },
-    {
-      value: {
-        test: '2rem',
-      },
-      $type: 'clamp',
-    },
-    {
-      value: {
-        min: '2rem',
-      },
-      type: 'clamp',
-    },
-    {
-      value: 'string',
-    },
-    {
-      value: {
-        min: '2rem',
-        ideal: '3rem',
-        max: '3rem',
-      },
-      type: 'clamp',
-    },
-    {
-      value: {
-        min: '2rem',
-        ideal: '3rem',
-        max: '3rem',
-      },
-      type: 'dimension',
-    },
-  ] as TransformedToken[]
-
-  const w3cItems = [
     {
       $value: '300ms',
       $type: 'clamp',
@@ -66,7 +28,7 @@ describe('Filter: isClamp', () => {
         ideal: '3rem',
         max: '3rem',
       },
-      type: 'clamp',
+      $type: 'clamp',
     },
     {
       $value: {
@@ -78,10 +40,6 @@ describe('Filter: isClamp', () => {
     },
   ] as TransformedToken[]
   it('filters clamp tokens', () => {
-    expect(items.filter(isClamp)).toStrictEqual([items[4]])
-  })
-
-  it('filters clamp tokens in W3C format', () => {
-    expect(w3cItems.filter(isClamp)).toStrictEqual([w3cItems[4]])
+    expect(items.filter(isClamp.filter)).toStrictEqual([items[4]])
   })
 })

src/filter/isClamp.test.ts

@@ -5,14 +5,19 @@ 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') &&
+    token?.$type === 'clamp' &&
     tokenValue !== null &&
     typeof tokenValue === 'object' &&
     'min' in tokenValue &&
     'ideal' in tokenValue &&
     'max' in tokenValue
   )
 }
+
+export const isClamp = {
+  name: 'isClamp',
+  filter: isClampFilter,
+}

src/filter/isClamp.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]])
   })
 })

src/filter/isColor.test.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'
+
+export const isColor = {
+  name: 'isColor',
+  filter: isColorFilter,
+}