fix: using CSS classes twice caused a duplicate variable to be generated

generator/generator.go

@@ -601,7 +601,8 @@ func (g *generator) writeElementCSS(indentLevel int, n templ.Element) (err error
 			}
 			// Create a class name for the style.
 			// var templCSSClassess templ.CSSClasses =
-			if _, err = g.w.WriteIndent(indentLevel, "var templCSSClassess templ.CSSClasses = "); err != nil {
+			classesName := g.createVariableName()
+			if _, err = g.w.WriteIndent(indentLevel, "var "+classesName+" templ.CSSClasses = "); err != nil {
 				return err
 			}
 			// p.Name()
@@ -614,15 +615,15 @@ func (g *generator) writeElementCSS(indentLevel int, n templ.Element) (err error
 			}
 			// Render the CSS before the element if required.
 			// err = templ.RenderCSS(ctx, w, templCSSClassess)
-			if _, err = g.w.WriteIndent(indentLevel, "err = templ.RenderCSS(ctx, w, templCSSClassess)\n"); err != nil {
+			if _, err = g.w.WriteIndent(indentLevel, "err = templ.RenderCSS(ctx, w, "+classesName+")\n"); err != nil {
 				return err
 			}
 			if err = g.writeErrorHandler(indentLevel); err != nil {
 				return err
 			}
 			// Rewrite the ExpressionAttribute to point at the new variable.
 			attr.Expression = templ.Expression{
-				Value: "templCSSClassess.String()",
+				Value: classesName + ".String()",
 			}
 			n.Attributes[i] = attr
 		}

generator/test-css-usage/render_test.go

@@ -8,11 +8,15 @@ import (
 	"github.com/google/go-cmp/cmp"
 )
 
-const expected = `<style type="text/css">.className_f179{background-color:#ffffff;color:#ff0000;}</style><button class="className_f179 other" type="button">A</button><button class="className_f179 other" type="button">B</button>`
+const expected = `<style type="text/css">.className_f179{background-color:#ffffff;color:#ff0000;}</style>` +
+	`<button class="className_f179 other" type="button">A</button>` +
+	`<button class="className_f179 other" type="button">B</button>` +
+	`<style type="text/css">.green_58d2{color:#00ff00;}</style>` +
+	`<button class="green_58d2" type="button">Green</button>`
 
 func TestHTML(t *testing.T) {
 	w := new(strings.Builder)
-	err := TwoButtons().Render(context.Background(), w)
+	err := ThreeButtons().Render(context.Background(), w)
 	if err != nil {
 		t.Errorf("failed to render: %v", err)
 	}

generator/test-css-usage/template.templ

@@ -1,5 +1,9 @@
 {% package testcssusage %}
 
+{% css green() %}
+    color: #00ff00;
+{% endcss %}
+
 {% css className() %}
 	background-color: #ffffff;
 	color: {%= red %};
@@ -9,7 +13,8 @@
 	<button class={%= templ.Classes(className(), templ.Class("other")) %} type="button">{%= text %}</button>
 {% endtempl %}
 
-{% templ TwoButtons() %}
+{% templ ThreeButtons() %}
 	{%! Button("A") %}
 	{%! Button("B") %}
+	<button class={%= templ.Classes(green()) %} type="button">{%= "Green" %}</button>
 {% endtempl %}