CSS solutions and support

[thescientist13]

Type of Change

• Other (please clarify below)

Summary

Wanted to track some ideas of how CSS can be used, or what can be assumed isomorphic for both Node and browser contexts.

Details

Things to validate

1. Using Node custom loaders to support import css from './styles.css'. In some browsers we should already have support for CSS Modules
2. Constructable Stylesheets - I have never used them, so at least just want to make sure I'm not missing anything obvious here that would interrupt normal usage
3. Other?

Perhaps option 1 could be leveraged to auto-inline CSS so in development you can have an external CSS, but not need it for production.

LInks / Resources / References

• Something interesting to keep an eye on - "open-stylable" Shadow Roots WICG/webcomponents#909
• Per Rich Harris,

  Cascading Style Sheet module scripts WICG/webcomponents#759 alongside Constructable Stylesheets to solve this problem. And we may be able to use ::theme and ::part to style things inside Shadow DOM. But these aren't free of problems either.

• Would also be nice to align with Compile JSX to custom element (reactive) lifecycles #69
• Provide a lightweight mechanism to add styles to a custom element WICG/webcomponents#468

[thescientist13]

Per Rich Harris,

CSS Modules alongside Constructable Stylesheets to solve this problem. And we may be able to use ::theme and ::part to style things inside Shadow DOM. But these aren't free of problems either.

[thescientist13]

Something interesting to keep an eye on - WICG/webcomponents#909

[thescientist13]

This has / is being solved through Greenwood and WCC is compatible - ProjectEvergreen/greenwood#923