How to handle CSS?

[tomByrer]

An HTMLx string could include <script> and <style> tags. The contents of these tags must not be interpolated, but must instead be preserved as typed.
What happens to the contents of those tags is up to the framework.

Correct me if I'm wrong, but AFAIK CSS code tends to be handled by frameworks & bundlers in 1 or more of 3 ways:

• collate into global style sheet to be loaded in the index.html via bundle or <link href="main.css" rel="stylesheet" type="text/css">
• collate into the module/page bundle with unique names so not to leak into global styles
• inlined to all HTML elements via ``style="background:#1beef3;;">`

All have pros & cons. But could they cause unexpected behaviors when intermingled, & the CSS approach is unknown? What I'm imagining is that different frameworks, thus different CSS approaches, would be intermingled in the same project. So layout would be done by React, a spreadsheet would be run in Ember, comment section in Preact, Svelte runs the animations, etc.

[Rich-Harris]

HTMLx deliberately doesn't specify what should happen there — it's purely concerned with syntax, not behaviour. The main reason <style> got mentioned at all is to eliminate any confusion over whether the contents of {...} should be treated as a JS expression, because obviously those characters come up frequently in both CSS and JS!

I would expect each framework to have a clearly-defined answer to the question of what to do with that CSS. If they're doing things sensibly, there should be no ill effects from combining components from multiple frameworks, as the styles will be scoped to the components they belong to.