Fix styleLint output for all dimension values to be pixel strings instead of arrays

Co-authored-by: lukasoppermann <[email protected]>

Author: Copilot

src/platforms/styleLint.ts

@@ -9,7 +9,7 @@ export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath, op
   transforms: [
     'name/pathToKebabCase',
     'color/hex',
-    'dimension/remPxArray',
+    'dimension/pixel',
     'shadow/css',
     'border/css',
     'typography/css',

src/primerStyleDictionary.ts

@@ -6,6 +6,7 @@ import {
   colorToRgbaFloat,
   cubicBezierToCss,
   dimensionToRem,
+  dimensionToPixel,
   dimensionToPixelUnitless,
   durationToCss,
   figmaAttributes,
@@ -123,6 +124,8 @@ PrimerStyleDictionary.registerTransform(floatToPixelUnitless)
 
 PrimerStyleDictionary.registerTransform(dimensionToRem)
 
+PrimerStyleDictionary.registerTransform(dimensionToPixel)
+
 PrimerStyleDictionary.registerTransform(dimensionToRemPxArray)
 
 PrimerStyleDictionary.registerTransform(dimensionToPixelUnitless)

src/transformers/dimensionToPixel.test.ts

@@ -0,0 +1,78 @@
+import {dimensionToPixel} from './dimensionToPixel.js'
+import {getMockToken} from '../test-utilities/index.js'
+
+describe('Transform: dimensionToPixel', () => {
+  it('transforms `px` dimension token', () => {
+    const input = [
+      getMockToken({
+        value: {value: 16, unit: 'px'},
+      }),
+    ]
+    const expectedOutput = ['16px']
+    expect(input.map(item => dimensionToPixel.transform(item, {basePxFontSize: 16}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms `rem` dimension token', () => {
+    const input = [
+      getMockToken({
+        value: {value: 1, unit: 'rem'},
+      }),
+    ]
+    const expectedOutput = ['16px']
+    expect(input.map(item => dimensionToPixel.transform(item, {basePxFontSize: 16}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms `em` dimension token', () => {
+    const input = [
+      getMockToken({
+        value: {value: 1.5, unit: 'em'},
+      }),
+    ]
+    const expectedOutput = ['1.5em']
+    expect(input.map(item => dimensionToPixel.transform(item, {basePxFontSize: 16}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms dimension token with `0` value', () => {
+    const input = [
+      getMockToken({
+        value: {value: 0, unit: 'px'},
+      }),
+    ]
+    const expectedOutput = ['0']
+    expect(input.map(item => dimensionToPixel.transform(item, {basePxFontSize: 16}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms dimension token with decimal value', () => {
+    const input = [
+      getMockToken({
+        value: {value: 1.5, unit: 'px'},
+      }),
+    ]
+    const expectedOutput = ['1.5px']
+    expect(input.map(item => dimensionToPixel.transform(item, {basePxFontSize: 16}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('uses custom base font size', () => {
+    const input = [
+      getMockToken({
+        value: {value: 1, unit: 'rem'},
+      }),
+    ]
+    const expectedOutput = ['20px']
+    expect(input.map(item => dimensionToPixel.transform(item, {basePxFontSize: 20}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('throws error for invalid dimension value', () => {
+    const input = getMockToken({
+      value: 'invalid',
+    })
+    expect(() => dimensionToPixel.transform(input, {basePxFontSize: 16}, {})).toThrow('Invalid dimension token')
+  })
+
+  it('throws error for unsupported unit', () => {
+    const input = getMockToken({
+      value: {value: 16, unit: 'vh'},
+    })
+    expect(() => dimensionToPixel.transform(input, {basePxFontSize: 16}, {})).toThrow('Invalid dimension token')
+  })
+})

src/transformers/dimensionToPixel.ts

@@ -0,0 +1,57 @@
+import {isDimension} from '../filters/index.js'
+import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-dictionary/types'
+
+/**
+ * @description base font size from options or 16
+ * @param options
+ * @returns number
+ */
+const getBasePxFontSize = (options?: PlatformConfig): number => (options && options.basePxFontSize) || 16
+
+/**
+ * @description converts dimension tokens value to `px` string, ignores `em` as they are relative to the font size of the parent element
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `dimension`
+ * @transformer returns a `px` string
+ */
+export const dimensionToPixel: Transform = {
+  name: 'dimension/pixel',
+  type: 'value',
+  transitive: true,
+  filter: isDimension,
+  transform: (token: TransformedToken, config: PlatformConfig, options: Config) => {
+    const valueProp = options.usesDtcg ? '$value' : 'value'
+    const baseFont = getBasePxFontSize(config)
+    const dimensionValue = token[valueProp] as {value: number; unit: string}
+
+    if (typeof dimensionValue !== 'object' || !('value' in dimensionValue) || !('unit' in dimensionValue)) {
+      throw new Error(
+        `Invalid dimension token: '${token.name}: ${JSON.stringify(token[valueProp])}' must be an object with value and unit properties \n`,
+      )
+    }
+
+    const {value, unit} = dimensionValue
+
+    if (value === 0) {
+      return '0'
+    }
+
+    if (unit === 'px') {
+      return `${value}px`
+    }
+
+    if (unit === 'rem') {
+      // Convert rem to px
+      return `${value * baseFont}px`
+    }
+
+    if (unit === 'em') {
+      // Keep em as is since it's relative
+      return `${value}em`
+    }
+
+    throw new Error(
+      `Invalid dimension token: '${token.name}: ${JSON.stringify(token[valueProp])}' has unsupported unit '${unit}' \n`,
+    )
+  },
+}

src/transformers/index.ts

@@ -8,6 +8,7 @@ export {floatToPixelUnitless} from './floatToPixel.js'
 export {gradientToCss} from './gradientToCss.js'
 export {dimensionToRem} from './dimensionToRem.js'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray.js'
+export {dimensionToPixel} from './dimensionToPixel.js'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless.js'
 export {durationToCss} from './durationToCss.js'
 export {figmaAttributes} from './figmaAttributes.js'