Merge pull request #62 from chasefleming/chasefleming/58

Add Style tag support and CSS

Author: chasefleming

README.md

@@ -118,7 +118,7 @@ In this example, if `isAdmin` is `true`, the `Admin Panel` link is rendered. Oth
 
 `elem` provides utility functions for creating HTML elements:
 
-- **Document Structure**: `Html`, `Head`, `Body`, `Title`, `Link`, `Meta`
+- **Document Structure**: `Html`, `Head`, `Body`, `Title`, `Link`, `Meta`, `Style`
 - **Text Content**: `H1`, `H2`, `H3`, `P`, `Blockquote`, `Pre`, `Code`, `I`, `Br`, `Hr`
 - **Sectioning & Semantic Layout**: `Article`, `Aside`, `Footer`, `Header`, `Main`, `Nav`, `Section`
 - **Form Elements**: `Form`, `Input`, `Textarea`, `Button`, `Select`, `Option`, `Label`, `Fieldset`, `Legend`, `Datalist`, `Meter`, `Output`, `Progress`

elements.go

@@ -164,6 +164,10 @@ func Script(attrs attrs.Props, children ...Node) *Element {
 	return NewElement("script", attrs, children...)
 }
 
+func Style(attrs attrs.Props, children ...Node) *Element {
+	return NewElement("style", attrs, children...)
+}
+
 // ========== Semantic Elements ==========
 
 // --- Semantic Sectioning Elements ---

elements_test.go

@@ -1,6 +1,7 @@
 package elem
 
 import (
+	"github.com/chasefleming/elem-go/styles"
 	"testing"
 
 	"github.com/chasefleming/elem-go/attrs"
@@ -245,6 +246,13 @@ func TestScript(t *testing.T) {
 	assert.Equal(t, expected, el.Render())
 }
 
+func TestStyle(t *testing.T) {
+	expected := `<style type="text/css">.test-class {color: #333;}</style>`
+	cssContent := `.test-class {color: #333;}`
+	el := Style(attrs.Props{attrs.Type: "text/css"}, styles.CSS(cssContent))
+	assert.Equal(t, expected, el.Render())
+}
+
 // ========== Semantic Elements ==========
 
 // --- Semantic Sectioning Elements ---

styles/styles.go

@@ -5,8 +5,10 @@ import (
 	"strings"
 )
 
+// Props is a map of CSS properties
 type Props map[string]string
 
+// ToInline converts the Props to an inline style string
 func (p Props) ToInline() string {
 	// Extract the keys and sort them for deterministic order
 	keys := make([]string, 0, len(p))
@@ -31,3 +33,21 @@ func (p Props) ToInline() string {
 
 	return styleStr
 }
+
+// CSSNode is a Node that renders to a CSS string
+type CSSNode string
+
+// RenderTo satisfies part of the Node interface by allowing CSSNode to be written to a strings.Builder
+func (cn CSSNode) RenderTo(builder *strings.Builder) {
+	builder.WriteString(string(cn))
+}
+
+// Render satisfies part of the Node interface by returning the CSS as a string
+func (cn CSSNode) Render() string {
+	return string(cn)
+}
+
+// CSS creates a new CSSNode from the given CSS content string
+func CSS(content string) CSSNode {
+	return CSSNode(content)
+}