Advanced CSS within Templates & Use of SCSS

[ainsleyclark]

Context

First of all, thanks for this package. It's fantastic.

I (and I think most people) love the idea of encapsulating styles, scripts and templates into one file, the whole codebase becomes easier to reason about and generally easier to follow.

CSS

Migrating over from something like SvelteKit to templ at the moment, may be difficult when it comes to styling & scripting.

Correct me if I'm wrong, but it seems as if some core CSS functionality is missing at the moment:

• Media Queries - Media Queries in CSS components #273
• Pseudo Selectors - Discussion on CSS Best Practices #504

Because of this, I don't use the inbuilt css method but have a file sitting next to the layout/partial/component, like so:

- components
|  - button.templ
|  - button_templ.go
|  - button.scss

Is there anything on the roadmap for Media Queries & Pseudo Selectors to be enabled?

SCSS

It would be fantastic if we could compile SCSS directly in the component, something like this:

css card() [lang="scss"] {
     position: relative;
     background-color: $white;

    &-title {
         font-size: 24px;
    }
}

I know Hugo does some nice SCSS building/transpiring so wondering if this could be brought into Templ.