I built this while working on a web app where I was using Nested CSS inside <style> tags. It worked fine at first, but I later realized it only works in modern browsers and completely breaks on older ones.

I didn’t want to rewrite all the css by hand so instead, I discovered I could flatten the CSS by running it through something like the Sass CLI. The problem is that the CSS lives inside .templ files, so you can’t just pipe the whole file through Sass.

I ended up putting together this small utility that:

• Recursively discovers .templ files.
• Extracts <style> blocks and processes them with the sass CLI.
• Replaces the processed parts while preserving surrounding markup unchanged.

• Flatten nested CSS inside your Templ components while preserving surrounding markup unchanged.

• sass CLI must be installed and available on PATH.

go install github.com/patrickkdev/templ-sass-processor@latest

Basic: scan the current directory and replace <style> blocks with processed output in-place:

templ-sass-processor .

Input (component.templ)

...
<div class="card">
  <h3 class="title">Title</h3>
</div>

<style>
.card {
  padding: 1rem;
  background: white;
  .title {
    font-weight: 700;
    &:hover { color: #555; }
  }
}
</style>
...

Output (inline replacement)

...
<div class="card">
  <h3 class="title">Title</h3>
</div>

<style>
.card { padding: 1rem; background: white; }
.card .title { font-weight: 700; }
.card .title:hover { color: #555; }
</style>
...

PRs and issues welcome.