Fix border transformer to work with new W3C dimension format and ensure px values in styleLint output

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

Author: Copilot

package-lock.json

@@ -2,7 +2,7 @@ import {getMockToken} from '../test-utilities/index.js'
 import {borderToCss} from './borderToCss.js'
 
 describe('Transformer: borderToCss', () => {
-  it('transforms `border` token to css border string', () => {
+  it('transforms `border` token to css border string with string width', () => {
     const input = getMockToken({
       $value: {
         color: '#000000',
@@ -15,8 +15,43 @@ describe('Transformer: borderToCss', () => {
     expect(borderToCss.transform(input, {}, {})).toStrictEqual(expectedOutput)
   })
 
+  it('transforms `border` token to css border string with dimension object width', () => {
+    const input = getMockToken({
+      $value: {
+        color: '#000000',
+        style: 'solid',
+        width: {value: 2, unit: 'px'},
+      },
+    })
+
+    const expectedOutput = '2px solid #000000'
+    expect(borderToCss.transform(input, {}, {})).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms `border` token to css border string with array width from dimension/remPxArray', () => {
+    const input = getMockToken({
+      $value: {
+        color: '#000000',
+        style: 'solid',
+        width: ['0.125rem', '2px'], // Array from dimension/remPxArray transformer
+      },
+    })
+
+    const expectedOutput = '2px solid #000000' // Should use px value for styleLint
+    expect(borderToCss.transform(input, {}, {})).toStrictEqual(expectedOutput)
+  })
+
+  it('returns already transformed string values as-is', () => {
+    const input = getMockToken({
+      $value: '1px solid #000000',
+    })
+
+    const expectedOutput = '1px solid #000000'
+    expect(borderToCss.transform(input, {}, {})).toStrictEqual(expectedOutput)
+  })
+
   it('throws an error when required values are missing', () => {
-    // missing blur
+    // missing width
     expect(() =>
       borderToCss.transform(
         getMockToken({
@@ -30,7 +65,7 @@ describe('Transformer: borderToCss', () => {
       ),
     ).toThrowError()
 
-    // missing spread
+    // missing style
     expect(() =>
       borderToCss.transform(
         getMockToken({
@@ -44,7 +79,7 @@ describe('Transformer: borderToCss', () => {
       ),
     ).toThrowError()
 
-    // missing offsets
+    // missing color
     expect(() =>
       borderToCss.transform(
         getMockToken({
@@ -58,4 +93,20 @@ describe('Transformer: borderToCss', () => {
       ),
     ).toThrowError()
   })
+
+  it('throws an error for invalid width values', () => {
+    expect(() =>
+      borderToCss.transform(
+        getMockToken({
+          $value: {
+            color: '#000000',
+            style: 'solid',
+            width: 123, // Invalid: number instead of string or object
+          },
+        }),
+        {},
+        {},
+      ),
+    ).toThrowError('Invalid width value')
+  })
 })

src/transformers/borderToCss.test.ts

@@ -1,6 +1,7 @@
 import type {Transform, TransformedToken} from 'style-dictionary/types'
 import {isBorder} from '../filters/isBorder.js'
 import type {BorderTokenValue} from '../types/borderTokenValue.js'
+import {dimensionToString} from './utilities/dimensionToString.js'
 
 /**
  * checks if all required properties exist on shadow token
@@ -13,6 +14,31 @@ const checkForBorderTokenProperties = (border: Record<string, unknown>): border
   }
   return false
 }
+
+/**
+ * Converts width value to string, handling different formats
+ * @param width - The width value (string, dimension object, or array from dimension/remPxArray)
+ * @returns CSS width string
+ */
+const getWidthString = (width: unknown): string => {
+  // If it's already a string, return as is
+  if (typeof width === 'string') {
+    return width
+  }
+
+  // If it's an array from dimension/remPxArray transformer, use the px value (second element)
+  if (Array.isArray(width) && width.length === 2) {
+    return width[1] // Return the px value for styleLint compatibility
+  }
+
+  // If it's a dimension object, convert to string
+  if (typeof width === 'object' && width !== null && 'value' in width && 'unit' in width) {
+    return dimensionToString(width as {value: number; unit: string})
+  }
+
+  throw new Error(`Invalid width value: ${JSON.stringify(width)}`)
+}
+
 /**
  * @description converts w3c border tokens in css border string
  * @type valueTransformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
@@ -36,7 +62,10 @@ export const borderToCss: Transform = {
         `Invalid border token property ${JSON.stringify(value)}. Must be an object with color, width and style properties.`,
       )
     }
+
+    const widthString = getWidthString(value.width)
+
     /* width | style | color */
-    return `${value.width} ${value.style} ${value.color}`
+    return `${widthString} ${value.style} ${value.color}`
   },
 }

src/transformers/borderToCss.ts

@@ -5,6 +5,6 @@
 export type StrokeStyleString = 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'outset' | 'inset'
 export type BorderTokenValue = {
   color: string
-  width: string
+  width: string | {value: number; unit: string} | [string, string] // Support string, dimension object, or array from transformers
   style: StrokeStyleString
 }