Ready for brand new CSS 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.
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!
Happy to answer questions below, on Twitter, or in the comments at the full blog post!
Thank you! 👽💜
Top comments (0)