DEV Community

Jane Ori
Jane Ori

Posted on

CSS-Only Type Grinding: Casting Tokens (sm|md|etc) into Useful CSS Values

Ready for brand new CSS magic?

Gif of a person wiggling their fingers, looking right at the camera, and saying the word "magic"

If you're writing a sharable component or library and want to provide your dev users an API that has CSS options like:

--size: sm; | --size: md; | --size: lg;

it's actually possible to do in CSS, without involving JS, a build system, or Style/Container Queries thanks to a new technique I've named "Type Grinding."

Type Grinding allows your design tokens (keywords, or β€œ<custom-ident>” values) written in your CSS to be transformed into any other values - like width, padding, color, etc - without relying on anything outside of CSS.

gif of css token values changing other properties without js

The current global user support is 72.77% according to caniuse - specifically chromium based browsers.

How does it work?!

The company I work for, Bitovi, is super supportive and allowed me to drop what I was working on to write an article about this instead! So over on the company blog, I'll be destructuring the CSS involved here to teach how it works, bring awareness to what's possible, and hopefully empower you to do it yourself!

Please take a look - I would LOVE to see what you do with it!

Screenshot of the Bitovi Article's Header

Happy to answer questions below, on Twitter, or in the comments at the full blog post!

Thank you! πŸ‘½πŸ’œ

Top comments (0)