Lack of proper CSS handling?

[Perusae]

After reviewing the manual, we identified a deficiency in the handling of included CSS.

• Include styles
• Include CSS classes, which are transformed into CSS styles
• Manually add ALL CSS classes to a stylesheet and use the NewCSSMiddleware

The question arises, why is this so? The template automatically generates all files upon initial startup. It is aware of the CSS classes at this point. Any update that triggers a re-rendering of the templates will provide a unique class (composed of filename + css name) to replace or remove existing css classes.

Wouldn't it be more logical to eliminate NewCSSMiddleware and simply introduce a CSS input and output directive?

• Input for defining global styles that may be required
• Output for the CSS rendering from the template

[a-h]

I'm sorry, I don't understand what you've written. Can you try to explain please? Perhaps some examples would help?

On point 1, since templ is just creating HTML, you can include styles with <link rel="stylesheet" href="mystyle.css"> or you can add <style></style> tags, or you can add inline CSS <button style="backgroud-color: red;">. OK.

On point 2, I'm not sure what you mean by including CSS classes, and that they're transformed.

On the third point... I think you're referring to this from the docs, and that you'd like this to happen automatically?

c1 := className()
handler := NewCSSMiddleware(httpRoutes, c1)
http.ListenAndServe(":8000", handler)

I'm not sure how you think "the template" ... "is aware of the CSS classes at this point". I don't know what you think a template is, or how it would be aware of CSS classes. I think you think that since templ generates all CSS components in a package, there could be some sort of "render all the CSS" feature.

Well, maybe, except CSS can be changed dynamically at runtime as per https://github.com/a-h/templ/pull/484/files - a long planned feature.

On your point about "simply introduce a CSS input and output directive" - I don't know what you mean by "a CSS input and output directive".

I'll move this to a discussion, since this isn't a clear issue. You might also want to consider the issue title "Lack of proper CSS handling".

[Perusae]

Sorry, tired and brain Zzzzz.

"the template" = Templ ...

Point 1 ... 3 = Summary of existing features, however, all are missing a unified CSS style output.

Feature 3 requires developers to specify the CSS class for each CSS class, which makes it seem redundant, especially for larger projects.

Our project has over 70 templ files, each containing between 5 to 30 CSS tags, converting these to CSS classes for a more streamlined "single file html/css" experience (think tailwind without the need for tailwind) becomes a daunting task, when NewCSSMiddleware need manual providing the templ css class.

While we understand that we can directly use style elements, as programmers, we know that the process can be significantly simplified by utilizing the CSS class feature, and having templ generating a single style file.

Templ has access to the CSS class information during generation, so it would be logical to generate a single CSS output. If this functionality exists, it isn't clearly documented?

We hope this explanation provides more clarity.

[jimafisk]

I'm confused by NewCSSMiddleware as well, do I have to manually register every class individually that I want to consolidate into an external stylesheet? It would be nice to be able to globally export all css <style> elements in my project to /styles/templ.css, but I'm not sure if that's possible?

Should you define the middleware differently for CSS Elements vs CSS Components? Would love to see more examples if possible. Thank you!