Consider using css custom properties for dynamic styles

[TxHawks]

Motivation

Using css custom properties to set custom styles could possibly help minimising the runtime even further. Linaria is taking this approach, and it would be great to have a combination of their approach with a utility-first approach

[kripod]

Thank you for the valuable suggestion! Quoting from the backstory behind treat:

Linaria looked a lot more promising due to its theming support, but it came with an important caveat. Theming is achieved via CSS custom properties (i.e. CSS variables), which means that legacy browsers like IE11 are not supported. This simply wasn’t an option for us.

To keep glaze working with IE11, custom properties are not being used as of today. However, switching may be an option for the future, e.g. applying rules like:

<p className=“pl pr” style={{ '--pl': '1rem', '--pr': '1rem'>…</p>

.pl { padding-left: var(--pl); }
.pr { padding-right: var(--pr); }

The consequence is that way less CSS classes need to be generated. However, this comes at the cost of a changed API, as a style prop shall be specified most of the time.

I think that #9 could solve the concerns regarding bundle size. This should be documented, though.

[TxHawks]

Thanks for the detailed response. I understand that IE11 support is crucial for many, but I think it is worth taking into account that many website no longer support IE11. It might be worthwhile making this opt in, probably with a second hook.

I realize this makes the API surface larger and increases code complexity, but I think it could be worth it from future-proofing and performance points of view.

[kripod]

I agree, this would be very useful. Currently, I’m working on multi-page docs and then I’ll review #10. Afterwards, the useStyling() hook will be re-architectured for improved modularity. I’ll take this use-case into account while redesigning the internals.

[kripod]

A very interesting take was posted by @jamiebuilds today: https://twitter.com/buildsghost/status/1251572060750409728

[finnhvman]

Some thoughts about supporting/not supporting IE11:
https://medium.com/@burger.neal/the-end-of-life-of-internet-explorer-11-12736f9ff75f

[hennessyevan]

Could we not put this behind a flag? Or support it with a fallback?

[kripod]

Great ideas, thanks! Although I think these should be considered after the project's first stable release. There are a lot of other tasks to do until then, especially regarding the documentation.