fix: normalize input types of CSS middleware (#152)

generator/test-css-middleware/expected.html

@@ -0,0 +1,3 @@
+<div class="red_050e">
+	Red text
+</div>

generator/test-css-middleware/render_test.go

@@ -0,0 +1,81 @@
+package testcssmiddleware
+
+import (
+	_ "embed"
+	"fmt"
+	"net/http/httptest"
+	"strings"
+	"sync"
+	"testing"
+
+	"github.com/a-h/htmlformat"
+	"github.com/a-h/templ"
+	"github.com/google/go-cmp/cmp"
+)
+
+//go:embed expected.html
+var expected string
+
+var expectedCSS = `.red_050e{color:red;}
+`
+
+func Test(t *testing.T) {
+	var errs []error
+	var wg sync.WaitGroup
+	wg.Add(3)
+
+	// Format the expected value.
+	go func() {
+		defer wg.Done()
+		e := new(strings.Builder)
+		err := htmlformat.Fragment(e, strings.NewReader(expected))
+		if err != nil {
+			errs = append(errs, fmt.Errorf("expected html formatting error: %w", err))
+		}
+		expected = e.String()
+	}()
+
+	component := render("Red text")
+	h := templ.Handler(component)
+	cssmw := templ.NewCSSMiddleware(h, red())
+
+	// Create the actual value.
+	var actual string
+	go func() {
+		defer wg.Done()
+
+		w := httptest.NewRecorder()
+		cssmw.ServeHTTP(w, httptest.NewRequest("GET", "/", nil))
+
+		a := new(strings.Builder)
+		err := htmlformat.Fragment(a, w.Body)
+		if err != nil {
+			errs = append(errs, fmt.Errorf("actual html formatting error: %w", err))
+		}
+		actual = a.String()
+	}()
+
+	var actualCSS string
+	go func() {
+		defer wg.Done()
+
+		w := httptest.NewRecorder()
+		cssmw.ServeHTTP(w, httptest.NewRequest("GET", "/styles/templ.css", nil))
+
+		a := new(strings.Builder)
+		err := htmlformat.Fragment(a, w.Body)
+		if err != nil {
+			errs = append(errs, fmt.Errorf("actual html formatting error: %w", err))
+		}
+		actualCSS = a.String()
+	}()
+
+	wg.Wait()
+
+	if diff := cmp.Diff(expected, actual); diff != "" {
+		t.Error(diff)
+	}
+	if diff := cmp.Diff(expectedCSS, actualCSS); diff != "" {
+		t.Error(diff)
+	}
+}

generator/test-css-middleware/template.templ

@@ -0,0 +1,10 @@
+package testcssmiddleware
+
+css red() {
+	color: red;
+}
+
+templ render(s string) {
+	<div class={ red }>{ s }</div>
+}
+

runtime.go

@@ -305,7 +305,7 @@ func CSSID(name string, css string) string {
 // CSS if the request path matches, or updates the HTTP context to ensure that any handlers that
 // use templ.Components skip rendering <style> elements for classes that are included in the global
 // stylesheet. By default, the stylesheet path is /styles/templ.css
-func NewCSSMiddleware(next http.Handler, classes ...ComponentCSSClass) CSSMiddleware {
+func NewCSSMiddleware(next http.Handler, classes ...CSSClass) CSSMiddleware {
 	return CSSMiddleware{
 		Path:       "/styles/templ.css",
 		CSSHandler: NewCSSHandler(classes...),
@@ -339,9 +339,17 @@ func (cssm CSSMiddleware) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 // NewCSSHandler creates a handler that serves a stylesheet containing the CSS of the
 // classes passed in. This is used by the CSSMiddleware to provide global stylesheets
 // for templ components.
-func NewCSSHandler(classes ...ComponentCSSClass) CSSHandler {
+func NewCSSHandler(classes ...CSSClass) CSSHandler {
+	ccssc := make([]ComponentCSSClass, 0, len(classes))
+	for _, c := range classes {
+		ccss, ok := c.(ComponentCSSClass)
+		if !ok {
+			continue
+		}
+		ccssc = append(ccssc, ccss)
+	}
 	return CSSHandler{
-		Classes: classes,
+		Classes: ccssc,
 	}
 }
 

runtime_test.go

@@ -16,7 +16,7 @@ import (
 func TestCSSHandler(t *testing.T) {
 	tests := []struct {
 		name             string
-		input            []templ.ComponentCSSClass
+		input            []templ.CSSClass
 		expectedMIMEType string
 		expectedBody     string
 	}{
@@ -28,15 +28,15 @@ func TestCSSHandler(t *testing.T) {
 		},
 		{
 			name:             "classes are rendered",
-			input:            []templ.ComponentCSSClass{{ID: "className", Class: templ.SafeCSS(".className{background-color:white;}")}},
+			input:            []templ.CSSClass{templ.ComponentCSSClass{ID: "className", Class: templ.SafeCSS(".className{background-color:white;}")}},
 			expectedMIMEType: "text/css",
 			expectedBody:     ".className{background-color:white;}",
 		},
 		{
 			name: "classes are rendered",
-			input: []templ.ComponentCSSClass{
-				{ID: "classA", Class: templ.SafeCSS(".classA{background-color:white;}")},
-				{ID: "classB", Class: templ.SafeCSS(".classB{background-color:green;}")},
+			input: []templ.CSSClass{
+				templ.ComponentCSSClass{ID: "classA", Class: templ.SafeCSS(".classA{background-color:white;}")},
+				templ.ComponentCSSClass{ID: "classB", Class: templ.SafeCSS(".classB{background-color:green;}")},
 			},
 			expectedMIMEType: "text/css",
 			expectedBody:     ".classA{background-color:white;}.classB{background-color:green;}",