search

kripod / otion

Atomic CSS-in-JS with a featherweight runtime
MIT License
631 stars 24 forks source link

RCF: CSS custom properties (variables) #44

Closed eddyw closed 4 years ago

eddyw commented 4 years ago

Hi 👋 ,

Motivation & Details

Currently otion treats CSS custom properties (variables) as regular CSS attributes. This means that property precedence is also based on the count of number of dashes (-) (check any codesandbox). Also, they are not supported (because of TS typings) in media queries.

For property precedence, would it be better to move them at the top and ignore count of dashes if the identifier starts with --? At least, it'd be easier to debug since all CSS properties would be displayed at the top in devtools instead of "randomly" placed.

kripod commented 4 years ago

Thank you for the submission, these are some very interesting ideas!

CSS custom properties should be placed at the top of the style sheet, indeed. As for retaining type safety, I would possibly introduce a variables property, similarly to selectors, so that type errors will be thrown for invalid CSS property keys.

kripod commented 4 years ago

On a second thought, is there a use-case behind defining the value of a custom property and putting it into the otion-managed style sheet instead of just inlining it into an element’s style attribute? The value can be referenced in either case with var().

kripod commented 4 years ago

The property precedence management issue has been fixed in v0.5.1. I have added instructions about using CSS Custom Properties to the readme.

For a better debugging experience, however, I would advise inlining custom property declarations into style attributes. I investigated other means of --custom-property precedence management, but it would impact the performance of other rules negatively.