transforms.js
Custom transforms for Style Dictionary
On this page
transforms.js
This script defines and registers custom transforms for Style Dictionary. Transforms convert token values into platform-specific formats (e.g., px, rem, vw, color formats).
Key Responsibilities
- Register transforms for size (px, rem, vw), shadow, typography, and more
- Convert token values to the correct units and formats for each platform
- Enable advanced logic for color, font, and shadow tokens
Example Transforms
cx/size/px: Converts size tokens to px unitscx/size/rem: Converts size tokens to rem unitscx/size/vw: Converts size tokens to vw unitscx/shadow/web: Converts shadow tokens for webcx/typography/web: Converts typography tokens for web
Example Usage
import registerTransforms from './transforms.js'
registerTransforms(StyleDictionary)