Style Dictionary: Custom ‘px to rem’ Transform

Style Dictionary pxToRem Grafik

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!

Scroll to Top