search

lustre-labs / lustre

A Gleam web framework for building HTML templates, single page applications, and real-time server components.
https://hexdocs.pm/lustre
MIT License
950 stars 65 forks source link

🐛 Multiple `class` attributes are combined at runtime but duplicated for static rendering. #12

Closed hayleigh-dot-dev closed 12 months ago

hayleigh-dot-dev commented 1 year ago

As a convenience it is possible to supply more than one class attribute and have the runtime concatenate them.

html.aside(
  [
    attribute.style([#("align-self", "start")]),
    attribute.class("relative sticky top-0 hidden px-4 pb-10 h-screen"),
    attribute.class("lg:block lg:col-span-2"),
    attribute.class("xl:col-span-2"),

For things like tailwind in particular this is a quite nice QOL feature, but when statically rendering a lustre element to a string or string builder these classes render individually such that the above element is emitted as

<aside
  style="align-self: start"
  class="relative sticky top-0 hidden px-4 pb-10 h-screen"
  class="lg:block lg:col-span-2"
  class="xl:col-span-2"
>

This ultimately means only the first class attribute is considered by the browser.

hayleigh-dot-dev commented 12 months ago

It'd also be handy if both the runtime and static rendering combined multiple style attributes as well.