Custom element display rules should be in CSS, not JS (causes CLS)

[schoberg]

Flux version

v2.10.2

Livewire version

v3.7.6

Tailwind version

v4.1.18

Browser and Operating System

Chrome on MacOS

What is the problem?

Flux custom elements (ui-description, ui-select, ui-disclosure, ui-label, ui-checkbox, ui-switch, ui-radio, etc.) have no CSS display rules in flux.css. Their display values are only set at runtime via JS inject() calls.

Browsers default unknown elements to display: inline, so there's a visible CLS when the JS executes. I noticed it in ui-description with a tall line-height on first paint, then snapping to normal height once JS sets display: block, but it has potential to cause issues on other elements.

I saw ui-button already has display: block in flux.css but the other ~20 custom elements only get their display values from JS.

Code snippets to replicate the problem

<flux:field>
    <flux:label>Email</flux:label>
    <flux:input name="email" />
    <flux:description>Enter your email address. But this is more noticeable if you have a really long helper text that wraps a couple times. </flux:description>
</flux:field>

These inject() calls in dist/flux.js set display via JS instead of CSS:

inject(({ css }) => css`ui-select { display: block; }`);
inject(({ css }) => css`ui-description { display: block; }`);
inject(({ css }) => css`ui-disclosure { display: block; }`);
inject(({ css }) => css`ui-checkbox { display: inline-block; user-select: none; }`);
inject(({ css }) => css`ui-switch { display: inline-block; user-select: none; }`);
inject(({ css }) => css`ui-radio { display: inline-block; user-select: none; }`);
// ~15 more elements...

Only ui-button has a CSS rule in flux.css:

ui-button { display: block; }

Screenshots/ screen recordings of the problem

https://img.dropinblog.com/DLWgCScd

How do you expect it to work?

All custom element display rules should be in flux.css (not only injected via JS) so they apply from first paint. This eliminates the CLS gap between CSS loading and JS executing.

Note: these rules should be in @layer base so that Tailwind utility classes (e.g. inline-flex on ui-switch) can properly override them via cascade layer priority.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@schoberg thanks for reporting! I've submitted a PR with a fix.

[schoberg]

Awesome! Thanks for the quick action :)

[joffreypersia]

@joshhanley how will it behave if the project has already published the views for some components? I had to publish the views, but now I’m stuck during the update process for the form component…?

[joshhanley]

@joffreypersia I'm not sure what you mean. How will what behave? And what form component are you talking about?