Setting css custom properties

[tifye]

How do I go about setting css custom properties using values passed to the encompassing Templ component?

I want to do something like:

templ SolidColorSqaure(red, green, blue string) {
	<div
		class="w-16 aspect-square"
		style="--var-red: { red }; --var-green: { green }; --var-blue: { blue };"
	></div>
}

I've read the issue #173 but css components are only generated once.

Am I just tunnel visioning right now/missing something?

[vrischmann]

Looks like you can't use expressions in a style attribute.

based on the issue you linked you can do something like this:

in your templ file:

package main

templ SolidColorSqaure(red, green, blue string) {
	<div
		class={ "w-16 aspect-square", CustomColor(red,green,blue) }
	></div>
}

in your main file:

package main

import (
	"context"
	"fmt"
	"os"

	"github.com/a-h/templ"
)

func CustomColor(red, green, blue string) templ.ComponentCSSClass {
	id := fmt.Sprintf("color-%s-%s-%s", red, green, blue)

	return templ.ComponentCSSClass{
		ID: id,
		Class: templ.SafeCSS(fmt.Sprintf(`.%s {
			--var-red: %s,
			--var-green: %s,
			--var-blue: %s,
		}`, id, red, green, blue),
		),
	}
}

func main() {
	component := SolidColorSqaure("foo", "bar", "baz")
	component.Render(context.Background(), os.Stdout)
}

Not the prettiest but it works:

<style type="text/css">.color-foo-bar-baz {
			--var-red: foo,
			--var-green: bar,
			--var-blue: baz,
		}</style>
<div class="w-16 aspect-square color-foo-bar-baz"></div>