gofront 1.3.12 → 1.4.0

package/README.md

@@ -283,6 +283,12 @@ example/templ/
 `.templ` syntax at a glance:
 
 ```go
+css cardStyle() {
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
 templ TodoItem(t Todo) {
     <li class={ todoItemClass(t) } draggable="true" data-id={ t.id }>
         <input type="checkbox" checked?={ t.done }/>
@@ -294,7 +300,7 @@ templ TodoItem(t Todo) {
 }
 
 templ AppView() {
-    <div class="card">
+    <div class={ cardStyle() }>
         @Header(highCount(), syncMsg, syncCls)
         @TodoList(visibleTodos())
     </div>
@@ -302,6 +308,7 @@ templ AppView() {
 ```
 
 Key syntax features:
+- `css Name() { ... }` — scoped CSS declarations (templ.guide spec); compiles to a deterministic scoped class name (`gfc_<name>_<hash>`) and injects styles automatically into `<head>`
 - `{ expr }` — interpolate any Go expression (strings auto-cast, others use `String()`)
 - `attr={ expr }` — dynamic attribute value (expression)
 - `attr?={ expr }` — boolean attribute (present/absent based on truthiness)
@@ -369,8 +376,8 @@ parity with the other examples (priority mode, validation, localStorage persiste
 sync status, drag-and-drop reordering).
 
 The templ example additionally demonstrates: **`.templ` file compilation**, template
-components with parameters, `{ expr }` interpolation, `attr?={}` conditional boolean
-attributes, `@Component()` calls inside templates, `if / else if / else` chains,
+components with parameters, scoped `css` declarations (`css Name() { ... }`), `{ expr }` interpolation,
+`attr?={}` conditional boolean attributes, `@Component()` calls inside templates, `if / else if / else` chains,
 `switch` blocks, `for range` loops, and `@templ.Raw()` for trusted HTML injection —
 all inside template bodies.
 
@@ -620,7 +627,7 @@ signatures into GoFront's internal type representation.
 | Unused import detection | ✓ |
 | External `.d.ts` types | ✓ |
 | npm package type resolution | ✓ |
-| `.templ` files in packages | ✓ — mix `.go` and `.templ` files freely; templ components visible across the whole package |
+| `.templ` files in packages | ✓ — mix `.go` and `.templ` files freely; templ components and `css` declarations visible across the whole package |
 
 ---
 
@@ -694,18 +701,18 @@ npm run test:e2e           # E2E tests (Playwright, headless Chromium)
 npm run test:all           # all of the above
 ```
 
-**Unit tests** (~1,396) cover language features, type errors, edge cases, DOM (jsdom),
+**Unit tests** (~1,400+) cover language features, type errors, edge cases, DOM (jsdom),
 external `.d.ts`, npm resolver, multi-file compilation, embedded structs, string
 formatting, map iteration order, integer overflow semantics, unused variable detection,
 unused import detection, semantic difference verification, stdlib shim packages, generics,
 the `testing` framework itself, and `.templ` file compilation (element rendering,
-interpolation, boolean attrs, component calls, `if/else/else-if` chains, `for range`,
-`switch/case/default`, `@templ.Raw()` raw HTML injection, SVG namespace handling, mixed
-`.go`+`.templ` packages).
+interpolation, boolean attrs, component calls, scoped `css` declarations with class hashing,
+`if/else/else-if` chains, `for range`, `switch/case/default`, `@templ.Raw()` raw HTML injection,
+SVG namespace handling, mixed `.go`+`.templ` packages).
 
-**E2E tests** (~104, Playwright) run all five example apps in a real browser and verify
+**E2E tests** (~105, Playwright) run all five example apps in a real browser and verify
 CRUD, filtering, priority mode, persistence (reload), drag-and-drop reordering, and sync
 status. Per-app suites check app-specific behaviour: scoped styles, stats bar, loading
-placeholder, `gom.If` conditional rendering, templ-specific features (`if/else`
-priority hint, `for` loop rendering, conditional bool attributes), and the WebGL2 cube
+placeholder, `gom.If` conditional rendering, templ-specific features (scoped `css` injection,
+`if/else` priority hint, `for` loop rendering, conditional bool attributes), and the WebGL2 cube
 rendering.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gofront",
-	"version": "1.3.12",
+	"version": "1.4.0",
 	"author": "Luuk van Venrooij",
 	"license": "MIT",
 	"repository": {

package/src/codegen/index.js

@@ -27,6 +27,7 @@ import {
 	HELPER_ERROR,
 	HELPER_ERROR_IS,
 	HELPER_IFACE_BOX,
+	HELPER_INJECT_STYLES,
 	HELPER_LEN,
 	HELPER_PATH_CLEAN,
 	HELPER_S,
@@ -97,6 +98,7 @@ export class CodeGen {
 		this.structNames = new Set();
 		this.structFields = new Map();
 		this.namedWrapperNames = new Set();
+		this.collectedCss = [];
 		this.jsImports = jsImports;
 		this.bundledPackages = bundledPackages;
 		this.namedReturnVars = null; // names of current function's named return vars
@@ -191,6 +193,10 @@ export class CodeGen {
 	}
 
 	_callInitAndMain(initNames, program, isTest = false) {
+		if (this.collectedCss.length > 0) {
+			const uniqueCss = [...new Set(this.collectedCss)];
+			this.line(`__injectStyles(${JSON.stringify(uniqueCss.join("\n\n"))});`);
+		}
 		for (const name of initNames) this.line(`${name}();`);
 		if (
 			!isTest &&
@@ -201,6 +207,14 @@ export class CodeGen {
 
 	generate(program, options = {}) {
 		const isTest = options.isTest ?? false;
+		// Ensure _pkgName is set on all decls (generateAll sets it for
+		// multi-file; for single-file compiles we derive it from the AST).
+		const pkgName = program.pkg?.name;
+		if (pkgName) {
+			for (const d of program.decls) {
+				if (!d._pkgName) d._pkgName = pkgName;
+			}
+		}
 		this._renameReservedIdents(program.decls);
 		const methods = this._collectDecls(program);
 		this._emitJsImports();
@@ -227,7 +241,7 @@ export class CodeGen {
 		return this.out.join("\n");
 	}
 
-	// Emits FuncDecl and TemplDecl nodes; returns renamed init function names.
+	// Emits FuncDecl, TemplDecl, and CssDecl nodes; returns renamed init function names.
 	_emitFuncDecls(program) {
 		let initCount = 0;
 		const initNames = [];
@@ -247,6 +261,10 @@ export class CodeGen {
 				this._currentSrcFileIdx = d._srcFileIdx ?? 0;
 				this.genTemplDecl(d);
 				this.blank();
+			} else if (d.kind === "CssDecl") {
+				this._currentSrcFileIdx = d._srcFileIdx ?? 0;
+				this.genCssDecl(d);
+				this.blank();
 			}
 		}
 		return initNames;
@@ -306,6 +324,7 @@ export class CodeGen {
 		MethodDecl: "_renameMethodDeclNode",
 		FuncLit: "_renameSignature",
 		TemplDecl: "_renameSignature",
+		CssDecl: "_renameSignature",
 		VarDecl: "_renameDeclSpecs",
 		ConstDecl: "_renameDeclSpecs",
 		TypeSwitchStmt: "_renameTypeSwitchNode",
@@ -381,6 +400,7 @@ export class CodeGen {
 	_prependHelpers(isTest = false) {
 		const needsTesting = isTest || this._usesTesting;
 		const HELPER_MAP = [
+			[this.collectedCss.length > 0, HELPER_INJECT_STYLES],
 			[this._usesLen, HELPER_LEN],
 			[this._usesAppend, HELPER_APPEND],
 			[this._usesSliceGuard, HELPER_S],
@@ -414,12 +434,17 @@ export class CodeGen {
 		for (let i = 0; i < programs.length; i++) {
 			for (const decl of programs[i].decls) {
 				decl._srcFileIdx = i;
+				decl._pkgName = programs[i].pkg?.name;
 			}
 		}
 		const merged = { decls: programs.flatMap((p) => p.decls) };
 		return this.generate(merged, options);
 	}
 
+	getCss() {
+		return [...new Set(this.collectedCss)].join("\n\n");
+	}
+
 	getMappings() {
 		return this._srcMappings;
 	}

package/src/codegen/runtime.js

@@ -312,3 +312,14 @@ var __GoFront_T = __GoFront_T || class {
   }
 };
 var __testing_T = __GoFront_T;`;
+
+export const HELPER_INJECT_STYLES = `var __injectStyles = __injectStyles || function(css) {
+  if (typeof document === "undefined" || !document || !document.head || !css) return;
+  let s = document.getElementById("gofront-styles");
+  if (!s) {
+    s = document.createElement("style");
+    s.id = "gofront-styles";
+    document.head.appendChild(s);
+  }
+  s.textContent += "\\n" + css;
+};`;

package/src/codegen/templ.js

@@ -26,6 +26,35 @@ export const templGenMethods = {
 		this.line("}");
 	},
 
+	genCssDecl(decl) {
+		if (decl.params && decl.params.length > 0) {
+			throw new Error(
+				`css ${decl.name}: parameterized css declarations are not yet supported`,
+			);
+		}
+		const className = this.getCssClassName(decl);
+		const scopedCss = `.${className} {\n${decl.cssText.trim()}\n}`;
+		this.collectedCss.push(scopedCss);
+
+		this.line(`function ${decl.name}() {`);
+		this.indented(() => {
+			this.line(`return ${JSON.stringify(className)};`);
+		});
+		this.line("}");
+	},
+
+	getCssClassName(decl) {
+		if (decl._className) return decl._className;
+		let h = 2166136261 >>> 0;
+		const str = `${decl._pkgName || ""}_${decl.name}_${decl.cssText}`;
+		for (let i = 0; i < str.length; i++) {
+			h = Math.imul(h ^ str.charCodeAt(i), 16777619) >>> 0;
+		}
+		const hash = (h >>> 0).toString(36);
+		decl._className = `gfc_${decl.name}_${hash}`;
+		return decl._className;
+	},
+
 	// Emit mount statements for an array of TemplNodes into parent variable `p`.
 	_genTemplNodes(nodes, p) {
 		if (!nodes || nodes.length === 0) return;

package/src/compiler.js

@@ -310,7 +310,7 @@ export function compileSingleFile(inputPath, options = {}) {
 		attachSourceMap(merged, outputDir);
 	}
 
-	return { js: merged.js };
+	return { js: merged.js, css: cg.getCss() };
 }
 
 export function compileDir(dir, options = {}) {
@@ -398,9 +398,15 @@ export function compileFiles(files, options = {}) {
 		attachSourceMap(merged, outputDir);
 	}
 
+	const mainCss = codegen.getCss();
+	const allCss = [...preambles.map((p) => p.css).filter(Boolean), mainCss]
+		.filter(Boolean)
+		.join("\n\n");
+
 	return {
 		pkgName,
 		js: merged.js,
+		css: allCss,
 		programs,
 		exportedSymbols: checker.getExportedSymbols(),
 		exportedTypes: checker.getExportedTypes(),

package/src/resolver.js

@@ -65,7 +65,9 @@ export function resolveGwDir(importPath, fromFile) {
 	const fromDir = dirname(resolve(fromFile));
 	const dir = resolve(fromDir, importPath);
 	if (!existsSync(dir)) return null;
-	const gwFiles = readdirSync(dir).filter((f) => f.endsWith(".go"));
+	const gwFiles = readdirSync(dir).filter(
+		(f) => f.endsWith(".go") || f.endsWith(".templ"),
+	);
 	return gwFiles.length > 0 ? dir : null;
 }
 

package/src/templ-lexer.js

@@ -35,6 +35,8 @@ export const TT = {
 	TEMPL_CASE: "TEMPL_CASE", // case expr:
 	TEMPL_DEFAULT: "TEMPL_DEFAULT", // default:
 	TEMPL_END: "TEMPL_END", // closing } of if/for/switch/templ body
+	CSS_KW: "css",
+	CSS_BODY: "CSS_BODY",
 };
 
 // Describes a parsed HTML attribute
@@ -123,6 +125,13 @@ export class TemplLexer {
 				continue;
 			}
 
+			// Detect `css` keyword at identifier boundaries
+			if (this._matchKeyword("css")) {
+				this.tokens.push(new Token(TT.CSS_KW, "css", this.line, this.col));
+				this._lexCssDecl();
+				continue;
+			}
+
 			// Everything else: scan to end of top-level declaration using the
 			// raw Go lexer, accumulating tokens until the next `templ` keyword
 			// or EOF.
@@ -135,7 +144,7 @@ export class TemplLexer {
 
 	// ── Go chunk lexing ──────────────────────────────────────────
 
-	// Scan ahead to find the next `templ ` keyword at top level (not inside
+	// Scan ahead to find the next `templ ` or `css ` keyword at top level (not inside
 	// braces/parens/strings/comments). Collect all source text up to that
 	// point, lex it as normal Go, and append the tokens.
 	_lexGoChunk() {
@@ -143,8 +152,12 @@ export class TemplLexer {
 		let depth = 0; // brace depth
 
 		while (!this.eof()) {
-			// Check for `templ` keyword at top level (depth === 0)
-			if (depth === 0 && this._peekKeyword("templ")) break;
+			// Check for `templ` or `css` keyword at top level (depth === 0)
+			if (
+				depth === 0 &&
+				(this._peekKeyword("templ") || this._peekKeyword("css"))
+			)
+				break;
 
 			const ch = this.peek();
 
@@ -222,6 +235,97 @@ export class TemplLexer {
 		this._lexHtmlBody(1);
 	}
 
+	// ── CSS declaration lexing ───────────────────────────────────
+
+	_lexCssDecl() {
+		this.skipWhitespace();
+
+		// Name (identifier)
+		const nameStart = this.pos;
+		while (!this.eof() && /\w/.test(this.peek())) this.advance();
+		const name = this.src.slice(nameStart, this.pos);
+		if (!name) this.err("expected name after 'css'");
+		this.tokens.push(new Token(T.IDENT, name, this.line, this.col));
+
+		this.skipWhitespace();
+
+		// Parameter list (balanced parens)
+		if (this.peek() !== "(") this.err("expected '(' after css name");
+		const paramStart = this.pos;
+		this._skipBalanced("(", ")");
+		const paramSrc = this.src.slice(paramStart, this.pos);
+		for (const t of this._goTokens(paramSrc)) this.tokens.push(t);
+
+		this.skipWhitespace();
+
+		// Opening { of body
+		if (this.peek() !== "{") this.err("expected '{' after css params");
+		this.advance(); // consume {
+		this.tokens.push(new Token(T.LBRACE, "{", this.line, this.col));
+
+		this._lexCssBody();
+	}
+
+	_skipCssString(quote) {
+		this.advance(); // consume opening quote
+		while (!this.eof()) {
+			const ch = this.peek();
+			if (ch === "\\") {
+				this.advance();
+				if (!this.eof()) this.advance();
+				continue;
+			}
+			if (ch === quote) {
+				this.advance();
+				return;
+			}
+			if (ch === "\n") {
+				this.err("unterminated string in css block");
+			}
+			this.advance();
+		}
+		this.err("unterminated string in css block");
+	}
+
+	_lexCssBody() {
+		const start = this.pos;
+		let depth = 1;
+		while (!this.eof()) {
+			const ch = this.peek();
+			// Skip CSS comments /* ... */
+			if (ch === "/" && this.peek(1) === "*") {
+				this.advance();
+				this.advance();
+				this.skipBlockComment();
+				continue;
+			}
+			// Skip strings
+			if (ch === '"' || ch === "'") {
+				this._skipCssString(ch);
+				continue;
+			}
+			if (ch === "{") {
+				depth++;
+				this.advance();
+			} else if (ch === "}") {
+				depth--;
+				if (depth === 0) {
+					const cssText = this.src.slice(start, this.pos);
+					this.tokens.push(
+						new Token(TT.CSS_BODY, cssText, this.line, this.col),
+					);
+					this.advance(); // consume closing }
+					this.tokens.push(new Token(T.RBRACE, "}", this.line, this.col));
+					return;
+				}
+				this.advance();
+			} else {
+				this.advance();
+			}
+		}
+		this.err("unclosed css block");
+	}
+
 	// Lex the HTML body of a templ declaration.
 	// depth: current brace depth (starts at 1 for the opening { of templ)
 	_lexHtmlBody(depth) {

package/src/templ-parser.js

@@ -42,9 +42,38 @@ export class TemplParser extends Parser {
 
 	parseTopDecl() {
 		if (this.check(TT.TEMPL_KW)) return this.parseTemplDecl();
+		if (this.check(TT.CSS_KW)) return this.parseCssDecl();
 		return super.parseTopDecl();
 	}
 
+	// ── CssDecl ───────────────────────────────────────────────────
+
+	parseCssDecl() {
+		const _line = this.peek().line;
+		this.advance(); // consume CSS_KW
+
+		const name = this.expect(T.IDENT).value;
+
+		// Parse parameter list (standard Go params: LPAREN...RPAREN)
+		const params = this.parseParamList();
+
+		// Optional semicolon between ) and {
+		this.semi();
+
+		// Consume opening {
+		this.expect(T.LBRACE);
+
+		// Consume CSS_BODY
+		const bodyToken = this.expect(TT.CSS_BODY);
+		const cssText = bodyToken.value;
+
+		// Consume closing }
+		this.expect(T.RBRACE);
+		this.semi();
+
+		return { kind: "CssDecl", name, params, cssText, _line };
+	}
+
 	// ── TemplDecl ─────────────────────────────────────────────────
 
 	parseTemplDecl() {

package/src/typechecker/index.js

@@ -241,6 +241,7 @@ export class TypeChecker {
 				if (d.kind === "FuncDecl" || d.kind === "MethodDecl")
 					this.collectFunc(d);
 				else if (d.kind === "TemplDecl") this._collectTemplDecl(d);
+				else if (d.kind === "CssDecl") this._collectCssDecl(d);
 			}
 		}
 	}
@@ -267,7 +268,11 @@ export class TypeChecker {
 		for (const p of programs) {
 			this._setCurrentFile(p);
 			for (const d of p.decls) {
-				if (d.kind === "FuncDecl" || d.kind === "MethodDecl") {
+				if (
+					d.kind === "FuncDecl" ||
+					d.kind === "MethodDecl" ||
+					d.kind === "TemplDecl"
+				) {
 					this.checkTopDecl(d, this.globals);
 				}
 			}
@@ -457,11 +462,71 @@ export class TypeChecker {
 				this.checkConstDecl(decl, scope);
 				break;
 			case "TypeDecl":
+			case "CssDecl":
+				break;
 			case "TemplDecl":
-				break; // already collected / no body to check
+				this._markTemplNodesUsed(decl.body);
+				break;
+		}
+	}
+
+	_markTokensUsed(tokens) {
+		if (!tokens) return;
+		for (const t of tokens) {
+			if (t.type === "IDENT" || t.type?.name === "IDENT") {
+				this.globals.lookup(t.value);
+			}
+		}
+	}
+
+	_markTemplNodesUsed(nodes) {
+		if (!nodes) return;
+		for (const n of nodes) {
+			if (n.kind === "TemplElement") {
+				for (const a of n.attrs || []) {
+					if (a.tokens) this._markTokensUsed(a.tokens);
+				}
+				this._markTemplNodesUsed(n.children);
+			} else if (n.kind === "TemplExpr" || n.kind === "TemplComponent") {
+				this._markTokensUsed(n.tokens);
+			} else if (n.kind === "TemplIf") {
+				this._markTokensUsed(n.condTokens);
+				this._markTemplNodesUsed(n.then);
+				this._markTemplNodesUsed(n.else_);
+			} else if (n.kind === "TemplFor") {
+				this._markTokensUsed(n.stmtTokens);
+				this._markTemplNodesUsed(n.body);
+			} else if (n.kind === "TemplSwitch") {
+				this._markTokensUsed(n.exprTokens);
+				for (const c of n.cases || []) {
+					this._markTokensUsed(c.caseTokens);
+					this._markTemplNodesUsed(c.body);
+				}
+			}
 		}
 	}
 
+	_collectCssDecl(decl) {
+		const paramTypes = (decl.params || []).map((p) =>
+			this.resolveTypeNode(p.type, this.globals),
+		);
+		const stringType = this.types.get("string") ?? {
+			kind: "basic",
+			name: "string",
+		};
+		const funcType = {
+			kind: "func",
+			params: paramTypes,
+			returns: [stringType],
+			variadic: false,
+			async: false,
+		};
+		if (this.globals.symbols.has(decl.name) && decl.name !== "init") {
+			this.err(`${decl.name} redeclared in this block`, decl);
+		}
+		this.globals.define(decl.name, funcType);
+	}
+
 	_collectTemplDecl(decl) {
 		const paramTypes = decl.params.map((p) =>
 			this.resolveTypeNode(p.type, this.globals),