[feat] Style directives

[plmrry]

Style Directives

Related RFC

To-Do

• Documentation
• Parser warnings / errors?

Code

• In compile/nodes/Element.ts, match Style types and push styles in to styles array:
• Create Style node, get text from info: compile/nodes/Style.ts
• In tag.ts:
  • Allow Style node with string value
  • Add expression to directive
  • Add Style to get_directive_type
• Add Style interface to compile/nodes/interfaces.ts
• Add Style interface to compiler/interfaces.ts
• Render DOM:
  • In compile/render_dom/wrappers/Element/index.ts, push updaters into hydrate chunks
  • Handle dependency updates
• Render SSR:
  • Collect style expressions
  • Handle spread case
  • Handle case of style attribute with style directives
  • In runtime/internal/ssr.ts, create new add_styles function
  • Call add_styles with concatenated style expressions
  • Modify spread internal to handle styles

Tests

• Parser tests:
  • With variable
  • With string
• Render tests:
  • With variable
  • With string
  • With style attribute
  • With spread
  • With dynamic update

Cleanup

• Remove .solo tests
• Cleanup comments

[tanhauhau]

keep up the work!

[tanhauhau]

Thanks for your PR, great job 👍🏻

I've left some comments on the PR and also i wonder what happens if the style: directive clashes with the style attribute?

eg:

<h1 style:font-size="30px" style="color: red; font-size: 40px;" style:color="blue" />

[plmrry]

@tanhauhau @Rich-Harris Anything else this needs?

[kevmodrome]

Are there any blockers to this being merged? Would love to use this feature! :)

[tanhauhau]

i've rebased the branch to the latest master and

• fixed the ssr case where style directive and style attribute is setting the same style property
• fixed the parsing error edge case
• only update the style when needed

[dummdidumm]

Also closes #5204 (we don't want to adjust the behavior, it's not worth documenting that small gotcha, and the OP in that issue presented exactly this style directive as a workaround)

[plmrry]

i've rebased the branch to the latest master and

• fixed the ssr case where style directive and style attribute is setting the same style property
• fixed the parsing error edge case
• only update the style when needed

Thank you so much @tanhauhau! Some of those changes were definitely over my head 😅

[plmrry]

Gentle nudge to @benmccann @tanhauhau — any thoughts on merging this?

[benmccann]

@tanhauhau / @Conduitry would have to sign off on this one. I'm not qualified 😄

[kevmodrome]

Another gentle nudge on this 👀 Would love to start using this!

[Prinzhorn]

The RFC mentions variables (I assume also vendor prefixes, because setProperty doesn't care).

<div style:--border-color="saddleBrown" />

I couldn't find a test for that in this PR (I did ctrl+f for style:-). Does it work?

[plmrry]

I couldn't find a test for that in this PR (I did ctrl+f for style:-). Does it work?

Good point, I'll add a test

[arxpoetica]

I'm a little late to the game on this, but I'd like to see camelCase variable names supported as well as pipe-case, i.e., borderRadius and border-radius should both work.

I would think this shouldn't be too much trouble; since we're a compiler, we can optimize for either case.

Why it matters: if we allow for shorthand, border-radius will never work as a shorthand variable name (for example).

[aewing]

Why it matters: if we allow for shorthand, border-radius will never work as a shorthand variable name (for example).

This gap exists for shorthand attributes like aria-label, etc... already, and was pointed out in the the RFC PR, FWIW.

[didier]

🥳🥳🥳