I’m excited to share my first custom transformer for Style Dictionary! 🎉
The built-in pxToRem
transform is great, but it only works for dimensions
and fontSizes
. However, what if you need a more flexible solution that converts all pixel values to REM – while still allowing specific exceptions?
That’s exactly what I’ve achieved with my custom transformer!
With this solution, you can define any $value
in pixels, and if needed, add a simple disablePxToRem: true
flag to bypass the conversion for specific properties like small border.
Style Dictionary Example:
"$value": "2px",
"disablePxToRem": true // (optional)
Why is this useful?
This transformer is perfect for developers and designers who want more control and consistency in their design tokens. Whether you’re scaling a large design system or just simplifying your CSS workflow, this solution ensures you can maintain flexibility without adding complexity.
- Supports scalable, clean, and reusable design tokens.
Here’s the full integration:
https://gist.github.com/artursopelnik/b4d6a6f839fa98c6d8d00d4c6861d286
Have questions? Don’t hesitate to contact us!