From 0d13efca49770505cf4c7b5f5476df55502d5008 Mon Sep 17 00:00:00 2001
From: joerdav <joe.davidson.21111@gmail.com>
Date: Thu, 1 Feb 2024 14:07:10 +0000
Subject: [PATCH 1/2] feat: support css args

---
 .version                                      |  2 +-
 cmd/templ/generatecmd/testwatch/watch_test.go |  2 +-
 cmd/templ/migratecmd/main.go                  |  2 +-
 generator/generator.go                        | 10 +--
 generator/test-css-usage/expected.html        | 13 +++
 generator/test-css-usage/template.templ       | 14 ++++
 generator/test-css-usage/template_templ.go    | 75 ++++++++++++++++-
 parser/v2/cssparser.go                        | 71 ++++------------
 parser/v2/cssparser_test.go                   | 82 +++++++++++++++----
 parser/v2/goexpression/parse.go               |  7 +-
 parser/v2/goparser.go                         | 21 +++--
 parser/v2/templateparser.go                   |  2 +-
 parser/v2/types.go                            |  5 +-
 13 files changed, 213 insertions(+), 93 deletions(-)

diff --git a/.version b/.version
index 7c39898db..1969284cb 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-0.2.552
\ No newline at end of file
+0.2.557
\ No newline at end of file
diff --git a/cmd/templ/generatecmd/testwatch/watch_test.go b/cmd/templ/generatecmd/testwatch/watch_test.go
index a202ac617..79f11584f 100644
--- a/cmd/templ/generatecmd/testwatch/watch_test.go
+++ b/cmd/templ/generatecmd/testwatch/watch_test.go
@@ -334,7 +334,7 @@ func waitForUrl(url string) (err error) {
 	var tries int
 	for {
 		time.Sleep(time.Second)
-		if tries > 5 {
+		if tries > 20 {
 			return err
 		}
 		tries++
diff --git a/cmd/templ/migratecmd/main.go b/cmd/templ/migratecmd/main.go
index fd3bd686c..bf6e9fbb3 100644
--- a/cmd/templ/migratecmd/main.go
+++ b/cmd/templ/migratecmd/main.go
@@ -134,7 +134,7 @@ func migrateV1TemplateFileNodeToV2TemplateFileNode(in v1.TemplateFileNode) (out
 		}, nil
 	case v1.CSSTemplate:
 		var t v2.CSSTemplate
-		t.Name.Value = n.Name.Value
+		t.Expression.Value = n.Name.Value
 		t.Properties = make([]v2.CSSProperty, len(n.Properties))
 		for i, p := range n.Properties {
 			t.Properties[i], err = migrateV1CSSPropertyToV2CSSProperty(p)
diff --git a/generator/generator.go b/generator/generator.go
index fd05d3f31..8573ed20b 100644
--- a/generator/generator.go
+++ b/generator/generator.go
@@ -229,12 +229,12 @@ func (g *generator) writeCSS(n parser.CSSTemplate) error {
 	if _, err = g.w.Write("func "); err != nil {
 		return err
 	}
-	if r, err = g.w.Write(n.Name.Value); err != nil {
+	if r, err = g.w.Write(n.Expression.Value); err != nil {
 		return err
 	}
-	g.sourceMap.Add(n.Name, r)
-	// () templ.CSSClass {
-	if _, err = g.w.Write("() templ.CSSClass {\n"); err != nil {
+	g.sourceMap.Add(n.Expression, r)
+	// templ.CSSClass {
+	if _, err = g.w.Write(" templ.CSSClass {\n"); err != nil {
 		return err
 	}
 	{
@@ -266,7 +266,7 @@ func (g *generator) writeCSS(n parser.CSSTemplate) error {
 				return fmt.Errorf("unknown CSS property type: %v", reflect.TypeOf(p))
 			}
 		}
-		if _, err = g.w.WriteIndent(indentLevel, fmt.Sprintf("templ_7745c5c3_CSSID := templ.CSSID(`%s`, templ_7745c5c3_CSSBuilder.String())\n", n.Name.Value)); err != nil {
+		if _, err = g.w.WriteIndent(indentLevel, fmt.Sprintf("templ_7745c5c3_CSSID := templ.CSSID(`%s`, templ_7745c5c3_CSSBuilder.String())\n", n.Name)); err != nil {
 			return err
 		}
 		// return templ.CSS {
diff --git a/generator/test-css-usage/expected.html b/generator/test-css-usage/expected.html
index db8ab3b81..a9f08b00a 100644
--- a/generator/test-css-usage/expected.html
+++ b/generator/test-css-usage/expected.html
@@ -15,3 +15,16 @@
 <div class="a&#34; onClick=&#34;alert(&#39;hello&#39;)&#34;">
 	Class names are HTML escaped.
 </div>
+<style type="text/css">
+ .loading_a3cc{width:50%;}
+</style>
+<div class="loading_a3cc">
+ CSS components can be used with arguments.
+</div>
+<style type="text/css">
+ .loading_9ccc{width:100%;}
+</style>
+<div class="loading_9ccc">
+ CSS components can be used with arguments.
+</div>
+
diff --git a/generator/test-css-usage/template.templ b/generator/test-css-usage/template.templ
index 262f27473..3068d6b30 100644
--- a/generator/test-css-usage/template.templ
+++ b/generator/test-css-usage/template.templ
@@ -1,5 +1,7 @@
 package testcssusage
 
+import "fmt"
+
 // Constant class.
 templ StyleTagsAreSupported() {
 	<style>
@@ -59,6 +61,17 @@ templ ClassNamesAreHTMLEscaped() {
 	<div class={ "a\" onClick=\"alert('hello')\"" }>Class names are HTML escaped.</div>
 }
 
+// CSS components can be used with arguments.
+
+css loading(percent int) {
+	width: { fmt.Sprintf("%d%%", percent) };
+}
+
+templ CSSComponentsCanBeUsedWithArguments() {
+	<div class={ loading(50) }>CSS components can be used with arguments.</div>
+	<div class={ loading(100) }>CSS components can be used with arguments.</div>
+}
+
 // Combine all tests.
 templ TestComponent() {
 	@StyleTagsAreSupported()
@@ -68,4 +81,5 @@ templ TestComponent() {
 	@KVCanBeUsedToConditionallySetClasses()
 	@PsuedoAttributesAndComplexClassNamesAreSupported()
 	@ClassNamesAreHTMLEscaped()
+	@CSSComponentsCanBeUsedWithArguments()
 }
diff --git a/generator/test-css-usage/template_templ.go b/generator/test-css-usage/template_templ.go
index c72c3d823..f429dd9f5 100644
--- a/generator/test-css-usage/template_templ.go
+++ b/generator/test-css-usage/template_templ.go
@@ -10,6 +10,8 @@ import "io"
 import "bytes"
 import "strings"
 
+import "fmt"
+
 // Constant class.
 func StyleTagsAreSupported() templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
@@ -314,8 +316,18 @@ func ClassNamesAreHTMLEscaped() templ.Component {
 	})
 }
 
-// Combine all tests.
-func TestComponent() templ.Component {
+// CSS components can be used with arguments.
+func loading(percent int) templ.CSSClass {
+	var templ_7745c5c3_CSSBuilder strings.Builder
+	templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`width`, fmt.Sprintf("%d%%", percent))))
+	templ_7745c5c3_CSSID := templ.CSSID(`loading`, templ_7745c5c3_CSSBuilder.String())
+	return templ.ComponentCSSClass{
+		ID:    templ_7745c5c3_CSSID,
+		Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`),
+	}
+}
+
+func CSSComponentsCanBeUsedWithArguments() templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -328,6 +340,61 @@ func TestComponent() templ.Component {
 			templ_7745c5c3_Var15 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var16 = []any{loading(50)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var16...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var16).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">CSS components can be used with arguments.</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 = []any{loading(100)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var17...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var17).String()))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">CSS components can be used with arguments.</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+// Combine all tests.
+func TestComponent() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var18 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var18 == nil {
+			templ_7745c5c3_Var18 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
 		templ_7745c5c3_Err = StyleTagsAreSupported().Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -356,6 +423,10 @@ func TestComponent() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = CSSComponentsCanBeUsedWithArguments().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}
diff --git a/parser/v2/cssparser.go b/parser/v2/cssparser.go
index 023d57efc..4e20494f9 100644
--- a/parser/v2/cssparser.go
+++ b/parser/v2/cssparser.go
@@ -1,9 +1,6 @@
 package parser
 
 import (
-	"strings"
-	"unicode"
-
 	"github.com/a-h/parse"
 )
 
@@ -21,6 +18,7 @@ var cssParser = parse.Func(func(pi *parse.Input) (r CSSTemplate, ok bool, err er
 		return
 	}
 	r.Name = exp.Name
+	r.Expression = exp.Expression
 
 	for {
 		var cssProperty CSSProperty
@@ -64,66 +62,29 @@ var cssParser = parse.Func(func(pi *parse.Input) (r CSSTemplate, ok bool, err er
 
 // css Func() {
 type cssExpression struct {
-	Name Expression
+	Expression Expression
+	Name       string
 }
 
-var cssExpressionStartParser = parse.String("css ")
-
-var cssExpressionNameParser = parse.Func(func(in *parse.Input) (name string, ok bool, err error) {
-	var c string
-	if c, ok = in.Peek(1); !ok || !unicode.IsLetter(rune(c[0])) {
-		return
-	}
-	prefix, _, _ := parse.Letter.Parse(in)
-	suffix, _, _ := parse.AtMost(1000, parse.Any(parse.Letter, parse.ZeroToNine)).Parse(in)
-	return prefix + strings.Join(suffix, ""), true, nil
-})
-
 var cssExpressionParser = parse.Func(func(pi *parse.Input) (r cssExpression, ok bool, err error) {
-	// Check the prefix first.
-	if _, ok, err = cssExpressionStartParser.Parse(pi); err != nil || !ok {
-		return
-	}
-
-	// Once we have the prefix, we must have a name and parameters.
-	// Read the name of the function.
-	from := pi.Position()
-	// If there's no match, the name wasn't correctly terminated.
-	var name string
-	if name, ok, err = cssExpressionNameParser.Parse(pi); err != nil || !ok {
-		err = parse.Error("css expression: invalid name", pi.Position())
-		return
-	}
-	r.Name = NewExpression(name, from, pi.Position())
-
-	// Eat the open bracket.
-	if _, ok, err = openBracket.Parse(pi); err != nil || !ok {
-		err = parse.Error("css expression: parameters missing open bracket", pi.Position())
-		return
-	}
+	start := pi.Index()
 
-	// Check there's no parameters.
-	from = pi.Position()
-	if _, ok, err = parse.StringUntil(closeBracket).Parse(pi); err != nil {
-		return
-	}
-	// If there's no match, the name wasn't correctly terminated.
-	if !ok {
-		return r, ok, parse.Error("css expression: parameters missing close bracket", pi.Position())
-	}
-	if pi.Index()-int(from.Index) > 0 {
-		return r, ok, parse.Error("css expression: found unexpected parameters", pi.Position())
+	if !peekPrefix(pi, "css ") {
+		return r, false, nil
 	}
 
-	// Eat ") {".
-	if _, ok, err = expressionFuncEnd.Parse(pi); err != nil || !ok {
-		err = parse.Error("css expression: unterminated (missing ') {')", pi.Position())
-		return
+	// Once we have the prefix, everything to the brace is Go.
+	// e.g.
+	// css (x []string) Test() {
+	// becomes:
+	// func (x []string) Test() templ.CSSComponent {
+	if r.Name, r.Expression, err = parseCSSFuncDecl(pi); err != nil {
+		return r, false, err
 	}
 
-	// Expect a newline.
-	if _, ok, err = parse.NewLine.Parse(pi); err != nil || !ok {
-		err = parse.Error("css expression: missing terminating newline", pi.Position())
+	// Eat " {\n".
+	if _, ok, err = parse.All(openBraceWithOptionalPadding, parse.NewLine).Parse(pi); err != nil || !ok {
+		err = parse.Error("css expression: parameters missing open bracket", pi.PositionAt(start))
 		return
 	}
 
diff --git a/parser/v2/cssparser_test.go b/parser/v2/cssparser_test.go
index 0f9fd210c..851608ff3 100644
--- a/parser/v2/cssparser_test.go
+++ b/parser/v2/cssparser_test.go
@@ -132,8 +132,9 @@ func TestCSSParser(t *testing.T) {
 			input: `css Name() {
 }`,
 			expected: CSSTemplate{
-				Name: Expression{
-					Value: "Name",
+				Name: "Name",
+				Expression: Expression{
+					Value: "Name()",
 					Range: Range{
 						From: Position{
 							Index: 4,
@@ -141,9 +142,9 @@ func TestCSSParser(t *testing.T) {
 							Col:   4,
 						},
 						To: Position{
-							Index: 8,
+							Index: 10,
 							Line:  0,
-							Col:   8,
+							Col:   10,
 						},
 					},
 				},
@@ -155,8 +156,9 @@ func TestCSSParser(t *testing.T) {
 			input: `css Name() {
 }`,
 			expected: CSSTemplate{
-				Name: Expression{
-					Value: "Name",
+				Name: "Name",
+				Expression: Expression{
+					Value: "Name()",
 					Range: Range{
 						From: Position{
 							Index: 4,
@@ -164,9 +166,9 @@ func TestCSSParser(t *testing.T) {
 							Col:   4,
 						},
 						To: Position{
-							Index: 8,
+							Index: 10,
 							Line:  0,
-							Col:   8,
+							Col:   10,
 						},
 					},
 				},
@@ -179,8 +181,9 @@ func TestCSSParser(t *testing.T) {
 background-color: #ffffff;
 }`,
 			expected: CSSTemplate{
-				Name: Expression{
-					Value: "Name",
+				Name: "Name",
+				Expression: Expression{
+					Value: "Name()",
 					Range: Range{
 						From: Position{
 							Index: 4,
@@ -188,9 +191,9 @@ background-color: #ffffff;
 							Col:   4,
 						},
 						To: Position{
-							Index: 8,
+							Index: 10,
 							Line:  0,
-							Col:   8,
+							Col:   10,
 						},
 					},
 				},
@@ -208,8 +211,9 @@ background-color: #ffffff;
 background-color: { constants.BackgroundColor };
 }`,
 			expected: CSSTemplate{
-				Name: Expression{
-					Value: "Name",
+				Name: "Name",
+				Expression: Expression{
+					Value: "Name()",
 					Range: Range{
 						From: Position{
 							Index: 4,
@@ -217,9 +221,9 @@ background-color: { constants.BackgroundColor };
 							Col:   4,
 						},
 						To: Position{
-							Index: 8,
+							Index: 10,
 							Line:  0,
-							Col:   8,
+							Col:   10,
 						},
 					},
 				},
@@ -247,6 +251,52 @@ background-color: { constants.BackgroundColor };
 				},
 			},
 		},
+		{
+			name: "css: single expression with parameter",
+			input: `css Name(prop string) {
+background-color: { prop };
+}`,
+			expected: CSSTemplate{
+				Name: "Name",
+				Expression: Expression{
+					Value: "Name(prop string)",
+					Range: Range{
+						From: Position{
+							Index: 4,
+							Line:  0,
+							Col:   4,
+						},
+						To: Position{
+							Index: 21,
+							Line:  0,
+							Col:   21,
+						},
+					},
+				},
+				Properties: []CSSProperty{
+					ExpressionCSSProperty{
+						Name: "background-color",
+						Value: StringExpression{
+							Expression: Expression{
+								Value: "prop",
+								Range: Range{
+									From: Position{
+										Index: 44,
+										Line:  1,
+										Col:   20,
+									},
+									To: Position{
+										Index: 48,
+										Line:  1,
+										Col:   24,
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		},
 	}
 	for _, tt := range tests {
 		tt := tt
diff --git a/parser/v2/goexpression/parse.go b/parser/v2/goexpression/parse.go
index 55dd6832e..e490ce2a0 100644
--- a/parser/v2/goexpression/parse.go
+++ b/parser/v2/goexpression/parse.go
@@ -159,13 +159,13 @@ func SliceArgs(content string) (expr string, err error) {
 }
 
 // Func returns the Go code up to the opening brace of the function body.
-func Func(content string) (expr string, err error) {
+func Func(content string) (name, expr string, err error) {
 	prefix := "package main\n"
 	src := prefix + content
 
 	node, parseErr := parser.ParseFile(token.NewFileSet(), "", src, parser.AllErrors)
 	if node == nil {
-		return expr, parseErr
+		return name, expr, parseErr
 	}
 
 	ast.Inspect(node, func(n ast.Node) bool {
@@ -177,10 +177,11 @@ func Func(content string) (expr string, err error) {
 		start := int(fn.Pos()) + len("func")
 		end := fn.Type.Params.End() - 1
 		expr = src[start:end]
+		name = fn.Name.Name
 		return false
 	})
 
-	return expr, err
+	return name, expr, err
 }
 
 func latestEnd(start int, nodes ...ast.Node) (end int) {
diff --git a/parser/v2/goparser.go b/parser/v2/goparser.go
index b565c30fb..24412999a 100644
--- a/parser/v2/goparser.go
+++ b/parser/v2/goparser.go
@@ -8,17 +8,26 @@ import (
 	"github.com/a-h/templ/parser/v2/goexpression"
 )
 
-func parseGoFuncDecl(pi *parse.Input) (r Expression, err error) {
+func parseGoFuncDecl(prefix string, pi *parse.Input) (name string, expression Expression, err error) {
+	prefix = prefix + " "
 	from := pi.Index()
 	src, _ := pi.Peek(-1)
-	src = strings.TrimPrefix(src, "templ ")
-	expr, err := goexpression.Func("func " + src)
+	src = strings.TrimPrefix(src, prefix)
+	name, expr, err := goexpression.Func("func " + src)
 	if err != nil {
-		return r, parse.Error(fmt.Sprintf("invalid template declaration: %v", err.Error()), pi.Position())
+		return name, expression, parse.Error(fmt.Sprintf("invalid %s declaration: %v", prefix, err.Error()), pi.Position())
 	}
-	pi.Take(len("templ ") + len(expr))
+	pi.Take(len(prefix) + len(expr))
 	to := pi.Position()
-	return NewExpression(expr, pi.PositionAt(from+len("templ ")), to), nil
+	return name, NewExpression(expr, pi.PositionAt(from+len(prefix)), to), nil
+}
+
+func parseTemplFuncDecl(pi *parse.Input) (name string, expression Expression, err error) {
+	return parseGoFuncDecl("templ", pi)
+}
+
+func parseCSSFuncDecl(pi *parse.Input) (name string, expression Expression, err error) {
+	return parseGoFuncDecl("css", pi)
 }
 
 func parseGoSliceArgs(pi *parse.Input) (r Expression, err error) {
diff --git a/parser/v2/templateparser.go b/parser/v2/templateparser.go
index 4d2e726c0..8a85c6b59 100644
--- a/parser/v2/templateparser.go
+++ b/parser/v2/templateparser.go
@@ -28,7 +28,7 @@ var templateExpressionParser = parse.Func(func(pi *parse.Input) (r templateExpre
 	// templ (x []string) Test() {
 	// becomes:
 	// func (x []string) Test() templ.Component {
-	if r.Expression, err = parseGoFuncDecl(pi); err != nil {
+	if _, r.Expression, err = parseTemplFuncDecl(pi); err != nil {
 		return r, false, err
 	}
 
diff --git a/parser/v2/types.go b/parser/v2/types.go
index 504729806..83839d4c3 100644
--- a/parser/v2/types.go
+++ b/parser/v2/types.go
@@ -247,13 +247,14 @@ func (ws Whitespace) Write(w io.Writer, indent int) error {
 //	  background-image: url('./somewhere.png');
 //	}
 type CSSTemplate struct {
-	Name       Expression
+	Name       string
+	Expression Expression
 	Properties []CSSProperty
 }
 
 func (css CSSTemplate) IsTemplateFileNode() bool { return true }
 func (css CSSTemplate) Write(w io.Writer, indent int) error {
-	if err := writeIndent(w, indent, "css ", css.Name.Value, "() {\n"); err != nil {
+	if err := writeIndent(w, indent, "css ", css.Expression.Value, " {\n"); err != nil {
 		return err
 	}
 	for _, p := range css.Properties {

From 04e6a5848bed653efa7c637cff6907ecae4392af Mon Sep 17 00:00:00 2001
From: joerdav <joe.davidson.21111@gmail.com>
Date: Thu, 1 Feb 2024 14:18:43 +0000
Subject: [PATCH 2/2] feat: document css args

---
 .../10-css-style-management.md                | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/docs/docs/03-syntax-and-usage/10-css-style-management.md b/docs/docs/03-syntax-and-usage/10-css-style-management.md
index 83c39ac95..0811a5441 100644
--- a/docs/docs/03-syntax-and-usage/10-css-style-management.md
+++ b/docs/docs/03-syntax-and-usage/10-css-style-management.md
@@ -170,6 +170,34 @@ The CSS class is given a unique name the first time it is used, and only rendere
 The class name is autogenerated, don't rely on it being consistent.
 :::
 
+### CSS component arguments
+
+CSS components can also require function arguments.
+
+```templ title="component.templ"
+package main
+
+css loading(percent int) {
+	width: { fmt.Sprintf("%d%%", percent) };
+}
+
+templ index() {
+    <div class={ loading(50) }></div>
+    <div class={ loading(100) }></div>
+}
+```
+
+```html title="Output"
+<style type="text/css">
+ .loading_a3cc{width:50%;}
+</style>
+<div class="loading_a3cc"></div>
+<style type="text/css">
+ .loading_9ccc{width:100%;}
+</style>
+<div class="loading_9ccc"></div>
+```
+
 ### CSS Middleware
 
 The use of CSS templates means that `<style>` elements containing the CSS are rendered on each HTTP request.