diff --git a/generator/generator.go b/generator/generator.go index 6104ef451..2e6ad349d 100644 --- a/generator/generator.go +++ b/generator/generator.go @@ -10,7 +10,6 @@ import ( "runtime/debug" "strings" - "github.com/a-h/templ" "github.com/a-h/templ/parser/v2" ) @@ -188,8 +187,8 @@ func (g *generator) writeCSS(n parser.CSSTemplate) error { for i := 0; i < len(n.Properties); i++ { switch p := n.Properties[i].(type) { case parser.ConstantCSSProperty: - // Carry out sanitization at compile time for constants. - if _, err = g.w.WriteIndent(indentLevel, fmt.Sprintf("templCSSBuilder.WriteString(`%s`)\n", templ.SanitizeCSS(p.Name, p.Value))); err != nil { + // Constant CSS property values are not sanitized. + if _, err = g.w.WriteIndent(indentLevel, "templCSSBuilder.WriteString("+createGoString(p.String(true))+")\n"); err != nil { return err } case parser.ExpressionCSSProperty: diff --git a/generator/test-css-expression/render_test.go b/generator/test-css-expression/render_test.go index 221a5371e..0214889e1 100644 --- a/generator/test-css-expression/render_test.go +++ b/generator/test-css-expression/render_test.go @@ -8,8 +8,8 @@ import ( ) var expected = templ.ComponentCSSClass{ - ID: "className_f179", - Class: templ.SafeCSS(`.className_f179{background-color:#ffffff;color:#ff0000;}`), + ID: "className_34fc", + Class: templ.SafeCSS(`.className_34fc{background-color:#ffffff;max-height:calc(100vh - 170px);color:#ff0000;}`), } func TestCSSExpression(t *testing.T) { diff --git a/generator/test-css-expression/template.templ b/generator/test-css-expression/template.templ index eadc889fe..5a6374fa4 100644 --- a/generator/test-css-expression/template.templ +++ b/generator/test-css-expression/template.templ @@ -2,6 +2,7 @@ package testcssexpression css className() { background-color: #ffffff; + max-height: calc(100vh - 170px); color: { red }; } diff --git a/generator/test-css-expression/template_templ.go b/generator/test-css-expression/template_templ.go index 221eedb8b..132c1abe1 100644 --- a/generator/test-css-expression/template_templ.go +++ b/generator/test-css-expression/template_templ.go @@ -10,6 +10,7 @@ import "strings" func className() templ.CSSClass { var templCSSBuilder strings.Builder templCSSBuilder.WriteString(`background-color:#ffffff;`) + templCSSBuilder.WriteString(`max-height:calc(100vh - 170px);`) templCSSBuilder.WriteString(string(templ.SanitizeCSS(`color`, red))) templCSSID := templ.CSSID(`className`, templCSSBuilder.String()) return templ.ComponentCSSClass{ diff --git a/parser/v2/types.go b/parser/v2/types.go index 2a91268bb..7f6bcff5d 100644 --- a/parser/v2/types.go +++ b/parser/v2/types.go @@ -219,11 +219,26 @@ type ConstantCSSProperty struct { func (c ConstantCSSProperty) IsCSSProperty() bool { return true } func (c ConstantCSSProperty) Write(w io.Writer, indent int) error { - if err := writeIndent(w, indent, c.Name+": "+c.Value+";\n"); err != nil { + if err := writeIndent(w, indent, c.String(false)); err != nil { return err } return nil } +func (c ConstantCSSProperty) String(minified bool) string { + var sb strings.Builder + sb.WriteString(c.Name) + if minified { + sb.WriteString(":") + } else { + sb.WriteString(": ") + } + sb.WriteString(c.Value) + sb.WriteString(";") + if !minified { + sb.WriteString("\n") + } + return sb.String() +} // background-color: { constants.BackgroundColor }; type ExpressionCSSProperty struct {