[RRFC] Tools for inline css

[sorvell]

Motivation

CSS libraries like Tailwind, StyleX, panda, etc are pretty popular. Some of the benefits they typically tout are:

1. ability to write/co-locate css close to your template
2. avoid cognitive load associated with naming
3. efficiency
4. integration with a design system

The Tailwind docs ask "why not inline styles"? and note the benefits of using a design system and lack of expressiveness.

Lit element directives can easily overcome these limitations...

Example

proof of concept playground

render() {
  return html`<div ${rule(`background: ${color('primary')} &:hover img { scale: 2; }`)}>
    <img src...>  
    <section>Caption...</section>
  </div>
  <button ${rule`${button({kind: 'secondary', circle: true})}`}>😉</button>
  `
}

How

The primary tool here is the rule directive. It simply appends a uniquely named css rule to a managed stylesheet in the host element (cached by the css itself). With the use of modern css nesting, individual rules can expressively reference/target descendants, siblings, states, and media queries. Directive results can also be shared so it's possible to compose them as desired. The rule itself can also optionally be named.

Various other tools can accompany this to facilitate design system restrictions likely that leverage css custom properties under the hood. This is what the color and size functions demonstrate in the example above. This type of system could also easily provide patterns, recipes, and variants similar to what is supported in panda and similar libraries.