Your view on CSS style names coming from Craft's field

[dominikkrulak]

I'm speculating what the best approach would be for a CSS style names coming from Craft's field like tag field?

Like:

<div class="{{ css }}"></div>

Is SSR worth setting up?

[khalwat]

Well, this would be outside of the purview of the Vite plugin, unless I'm misunderstanding the question.

If you're rendering via Twig, you're already inherently doing server side rendering, no?

[dominikkrulak]

Yes.

I misunderstood the concept of Vite's SSR as I read it again.

Well the idea was to pre-render <div class="{{ css }}"></div> -> run Vite so TailwindCSS styles can be extracted and build -> serve rendered document.

As the {{ css }} is dynamic, CSS stylesheet must be build on each request which is computationally difficult and maybe not worth it. Something like that if you get me.

Now I'm pouring CSS classes to templates based on user's selection from Craft's control panel e.g.

{% if style == 'sizeXs' %}
    {% set css = css|merge(['btn-xs']) %}
{% elseif style == 'sizeSm' %}
    {% set css = css|merge(['btn-sm']) %}
{% elseif style == 'sizeLg' %}
    {% set css = css|merge(['md:btn-lg']) %}
{% endif %}

Disadvantage of this approach is that stylesheet document after build may have classes that may not ever be used therefore larger document.

When I think about it it's maybe not worth thinking about it for several more CSS classes in stylesheet document. But if I had to find a way to make it happen it would work something like CriticalCSS plugin does but with few modifications.

Naa... it's stupid! Anyway thanks for your reply!