@lovrozagar/flare 0.1.0

package/src/plugins/service-worker.ts

@@ -0,0 +1,225 @@
+import { createHash } from "node:crypto";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import type { ViteManifest } from "../module-graph/index.ts";
+import { generateSwSource } from "../service-worker/template.ts";
+import type { VitePlugin } from "./types.ts";
+
+/* ── Config ──────────────────────────────────────────────────────── */
+
+export interface ServiceWorkerConfig {
+	offlineFallback?: string;
+	runtimeCacheMax?: number;
+	scope?: string;
+	skipWaiting?: boolean;
+}
+
+interface ResolvedServiceWorkerConfig {
+	offlineFallback?: string;
+	runtimeCacheMax: number;
+	scope: string;
+	skipWaiting: boolean;
+}
+
+const SW_DEFAULTS: ResolvedServiceWorkerConfig = {
+	runtimeCacheMax: 32,
+	scope: "/",
+	skipWaiting: true,
+};
+
+export function normalizeSwConfig(
+	input: ServiceWorkerConfig | boolean | undefined,
+): ResolvedServiceWorkerConfig | undefined {
+	if (input === false || input === undefined) return undefined;
+	if (input === true) return { ...SW_DEFAULTS };
+	return { ...SW_DEFAULTS, ...input };
+}
+
+/* ── Manifest utilities ──────────────────────────────────────────── */
+
+export function extractPrecacheUrls(manifest: ViteManifest): string[] {
+	const urls = new Set<string>();
+
+	for (const entry of Object.values(manifest)) {
+		if (entry.file) {
+			urls.add(`/${entry.file}`);
+		}
+		if (entry.css) {
+			for (const css of entry.css) {
+				urls.add(`/${css}`);
+			}
+		}
+	}
+
+	return [...urls];
+}
+
+export function computeBuildId(urls: string[]): string {
+	const sorted = [...urls].sort();
+	const hash = createHash("sha256").update(sorted.join("\n")).digest("hex");
+	return hash.slice(0, 12);
+}
+
+/* ── Dev SW ──────────────────────────────────────────────────────── */
+
+function generateDevSw(offlineFallback?: string): string {
+	if (!offlineFallback) {
+		return `self.addEventListener("install", function () { self.skipWaiting() })
+self.addEventListener("activate", function (event) { event.waitUntil(self.clients.claim()) })
+`;
+	}
+
+	return `var OFFLINE_PAGE = ${JSON.stringify(offlineFallback)}
+var CACHE = "flare-dev-offline"
+
+self.addEventListener("install", function (event) {
+	event.waitUntil(
+		caches.open(CACHE).then(function (cache) {
+			return fetch(OFFLINE_PAGE).then(function (res) {
+				if (res.ok) return cache.put(OFFLINE_PAGE, res)
+			}).catch(function () {})
+		}).then(function () { self.skipWaiting() })
+	)
+})
+
+self.addEventListener("activate", function (event) {
+	event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener("fetch", function (event) {
+	if (event.request.mode !== "navigate") return
+	event.respondWith(
+		fetch(event.request).catch(function () {
+			return caches.match(OFFLINE_PAGE)
+		})
+	)
+})
+`;
+}
+
+interface NodeReq {
+	url?: string;
+}
+
+interface NodeRes {
+	end: (data?: unknown) => void;
+	writeHead: (status: number, headers: Record<string, string>) => void;
+}
+
+interface ViteDevServer {
+	middlewares: {
+		use: (fn: (req: NodeReq, res: NodeRes, next: () => void) => void) => void;
+	};
+}
+
+export function createServiceWorkerPlugin(
+	swConfig: ResolvedServiceWorkerConfig,
+	assetsBase: string = "/assets",
+): VitePlugin {
+	return {
+		closeBundle(this: { environment?: { config?: { root?: string }; name?: string } }): void {
+			const envName = this.environment?.name;
+			/* Multi-env: SSR closes last, manifest already written. Single-env: no "ssr" env, fire on "client". */
+			if (envName !== "ssr" && envName !== "client") return;
+
+			const root = this.environment?.config?.root ?? process.cwd();
+			const manifestPath = join(root, "dist/client/.vite/manifest.json");
+
+			if (!existsSync(manifestPath)) return;
+
+			const raw = readFileSync(manifestPath, "utf-8");
+			const manifest = JSON.parse(raw) as ViteManifest;
+			const urls = extractPrecacheUrls(manifest);
+			const buildId = computeBuildId(urls);
+
+			const swSource = generateSwSource(urls, buildId, {
+				assetsBase,
+				offlineFallback: swConfig.offlineFallback ?? null,
+				runtimeCacheMax: swConfig.runtimeCacheMax,
+				skipWaiting: swConfig.skipWaiting,
+			});
+
+			writeFileSync(join(root, "dist/client/sw.js"), swSource, "utf-8");
+			process.stderr.write(`[flare:service-worker] Generated sw.js (${urls.length} assets, build ${buildId})\n`);
+		},
+
+		configurePreviewServer(server: unknown) {
+			const preview = server as {
+				config?: { root?: string };
+				middlewares: ViteDevServer["middlewares"];
+			};
+			const root = preview.config?.root ?? process.cwd();
+			const swPath = join(root, "dist/client/sw.js");
+
+			preview.middlewares.use((req, res, next) => {
+				if (req.url === "/sw.js" && existsSync(swPath)) {
+					const content = readFileSync(swPath, "utf-8");
+					res.writeHead(200, {
+						"cache-control": "no-cache",
+						"content-type": "application/javascript",
+					});
+					res.end(content);
+					return;
+				}
+				next();
+			});
+			return undefined;
+		},
+
+		configureServer(server: unknown) {
+			const vite = server as ViteDevServer;
+			const devSwSource = generateDevSw(swConfig.offlineFallback);
+			vite.middlewares.use((req, res, next) => {
+				if (req.url === "/sw.js") {
+					res.writeHead(200, {
+						"cache-control": "no-cache",
+						"content-type": "application/javascript",
+					});
+					res.end(devSwSource);
+					return;
+				}
+				next();
+			});
+			return undefined;
+		},
+
+		load(id: string): { code: string; moduleType: string } | null {
+			if (id === "\0virtual:flare-sw-config") {
+				return {
+					code: `export default ${JSON.stringify({
+						enabled: true,
+						path: "/sw.js",
+						scope: swConfig.scope,
+					})}`,
+					moduleType: "js",
+				};
+			}
+			return null;
+		},
+
+		name: "flare:service-worker",
+
+		resolveId(id: string): string | null {
+			if (id === "virtual:flare-sw-config") return "\0virtual:flare-sw-config";
+			return null;
+		},
+	};
+}
+
+export function createServiceWorkerDisabledPlugin(): VitePlugin {
+	return {
+		load(id: string): { code: string; moduleType: string } | null {
+			if (id === "\0virtual:flare-sw-config") {
+				return { code: "export default { enabled: false }", moduleType: "js" };
+			}
+			return null;
+		},
+
+		name: "flare:service-worker",
+
+		resolveId(id: string): string | null {
+			if (id === "virtual:flare-sw-config") return "\0virtual:flare-sw-config";
+			return null;
+		},
+	};
+}

package/src/plugins/solid-jsx.d.ts

@@ -0,0 +1,12 @@
+import "solid-js";
+
+declare module "solid-js" {
+	namespace JSX {
+		interface HTMLAttributes<T> {
+			css?: string;
+		}
+		interface CoreSVGAttributes<T> {
+			css?: string;
+		}
+	}
+}

package/src/plugins/sx-ast/atomic.ts

@@ -0,0 +1,166 @@
+import type { Expression } from "oxc-parser";
+import type { SxIR } from "./evaluator.ts";
+
+export interface AtomicResult {
+	classes: string[];
+	cssRules: Map<string, string>;
+	vars: Array<{ exprNode: Expression; index: number }>;
+}
+
+/** FNV-1a 32-bit hash over the input string. */
+function fnv1a32(s: string): number {
+	let h = 0x811c9dc5;
+	for (let i = 0; i < s.length; i++) {
+		h = Math.imul(h ^ s.charCodeAt(i), 0x01000193);
+	}
+	return h >>> 0;
+}
+
+function hash8(s: string): string {
+	return fnv1a32(s).toString(36).padStart(8, "0").slice(-8);
+}
+
+function hash4(s: string): string {
+	return hash8(s).slice(0, 4);
+}
+
+/*
+ * Class name triple: selector\0property\0value.
+ * Null-byte separators prevent `color:red` ↔ `col:or:red` collisions.
+ */
+function tripleKey(selector: string, prop: string, value: string): string {
+	return `${selector}\0${prop}\0${value}`;
+}
+
+function className(selector: string, prop: string, value: string, mode: "dev" | "prod"): string {
+	const key = tripleKey(selector, prop, value);
+	if (mode === "prod") {
+		return `a1-${hash8(key)}`;
+	}
+	/* dev: sx-<prop>-<value>-<hash4> — sanitize value for use in class name */
+	const safeProp = prop.replace(/[^a-zA-Z0-9-]/g, "-");
+	const safeVal = value.replace(/[^a-zA-Z0-9-]/g, "-").slice(0, 20);
+	return `sx-${safeProp}-${safeVal}-${hash4(key)}`;
+}
+
+function toKebab(prop: string): string {
+	/* Vendor prefixes: WebkitFoo → -webkit-foo, MozFoo → -moz-foo */
+	return prop.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`);
+}
+
+function expandSelector(parentSelector: string, sel: string): string {
+	/* Replace & with parent, or prepend if no & */
+	if (sel.includes("&")) return sel.replace(/&/g, parentSelector);
+	return `${parentSelector}${sel}`;
+}
+
+/*
+ * Wraps any pseudo-class/pseudo-element and attribute modifier portions of a
+ * selector in `:where()` so that specificity stays at (0,1,0) — matching
+ * the base-rule class selector. Without this, `.cls:hover` (0,2,0) would
+ * permanently beat `.cls2` (0,1,0) on the same element, even when not hovered.
+ * Within an @layer the last rule with equal specificity wins, so source order
+ * (base first, modifiers last) correctly governs override priority.
+ */
+function wrapModifiersInWhere(sel: string): string {
+	/* sel is already fully expanded, e.g. `.a1-xxx:hover:focus-visible` or
+	 * `.a1-xxx[data-size="lg"]`. Split off the leading class selector, then
+	 * wrap the remainder. If there's no remainder (bare class), return as-is. */
+	/* Walk from char 1 to find the first pseudo/attr modifier after the class */
+	let splitAt = sel.length;
+	for (let i = 1; i < sel.length; i++) {
+		const c = sel[i];
+		if (c === ":" || c === "[") {
+			splitAt = i;
+			break;
+		}
+	}
+	if (splitAt === sel.length) return sel;
+	const base = sel.slice(0, splitAt);
+	const modifier = sel.slice(splitAt);
+	return `${base}:where(${modifier})`;
+}
+
+interface EmitCtx {
+	classes: string[];
+	cssRules: Map<string, string>;
+	mode: "dev" | "prod";
+	varCounter: { n: number };
+	vars: Array<{ exprNode: Expression; index: number }>;
+}
+
+function emitDeclarations(ctx: EmitCtx, cssSelector: string, base: SxIR["base"], atWrap?: string): void {
+	for (const [prop, cv] of Object.entries(base)) {
+		let value: string;
+		if (cv.kind === "dynamic") {
+			const idx = ctx.varCounter.n++;
+			ctx.vars.push({ exprNode: cv.exprNode, index: idx });
+			value = `var(--_${idx})`;
+		} else {
+			value = cv.text;
+		}
+
+		const cssProp = toKebab(prop);
+		const cls = className(cssSelector, cssProp, value, ctx.mode);
+		ctx.classes.push(cls);
+
+		if (ctx.cssRules.has(cls)) continue;
+
+		/*
+		 * Base: `.cls { prop: value }`.
+		 * Modified (pseudo/attr): wrap modifiers in `:where()` so all rules share
+		 * (0,1,0) specificity — source order within @layer governs overrides.
+		 */
+		let rule: string;
+		if (cssSelector === "") {
+			rule = `.${cls} { ${cssProp}: ${value} }`;
+		} else {
+			const resolved = wrapModifiersInWhere(expandSelector(`.${cls}`, cssSelector));
+			rule = `${resolved} { ${cssProp}: ${value} }`;
+		}
+
+		if (atWrap) {
+			rule = `${atWrap} { ${rule} }`;
+		}
+
+		ctx.cssRules.set(cls, rule);
+	}
+}
+
+function emitIR(ctx: EmitCtx, ir: SxIR, parentSelector = "", atWrap?: string): void {
+	/* Base declarations */
+	emitDeclarations(ctx, parentSelector, ir.base, atWrap);
+
+	/* Nested selectors */
+	for (const { body, sel } of ir.selectors) {
+		const resolved = parentSelector === "" ? sel : expandSelector(parentSelector, sel);
+		emitIR(ctx, body, resolved, atWrap);
+	}
+
+	/* At-rules */
+	for (const { at, body } of ir.atRules) {
+		emitIR(ctx, body, parentSelector, at);
+	}
+
+	/* Variants: data-attr selector */
+	for (const [varName, varValues] of Object.entries(ir.variants)) {
+		for (const [varValue, bodyIR] of Object.entries(varValues)) {
+			const varSel = `[data-${varName}="${varValue}"]`;
+			const combined = parentSelector === "" ? `&${varSel}` : `${parentSelector}${varSel}`;
+			emitIR(ctx, bodyIR, combined, atWrap);
+		}
+	}
+}
+
+/** Convert an SxIR to atomic class names + CSS rules. */
+export function emitAtomic(ir: SxIR, mode: "dev" | "prod"): AtomicResult {
+	const ctx: EmitCtx = {
+		classes: [],
+		cssRules: new Map(),
+		mode,
+		varCounter: { n: 0 },
+		vars: [],
+	};
+	emitIR(ctx, ir);
+	return { classes: ctx.classes, cssRules: ctx.cssRules, vars: ctx.vars };
+}

package/src/plugins/sx-ast/evaluator.ts

@@ -0,0 +1,235 @@
+import type { Expression, Node, ObjectExpression } from "oxc-parser";
+
+export type CssValue = { kind: "static"; text: string } | { kind: "dynamic"; exprNode: Expression };
+
+export interface SxIR {
+	base: Record<string, CssValue>;
+	selectors: Array<{ sel: string; body: SxIR }>;
+	atRules: Array<{ at: string; body: SxIR }>;
+	variants: Record<string, Record<string, SxIR>>;
+}
+
+export interface EvalDiagnostic {
+	kind: "warning" | "error";
+	message: string;
+	node: Node;
+}
+
+export interface EvalResult {
+	ir: SxIR | null;
+	diagnostics: EvalDiagnostic[];
+}
+
+/*
+ * React DOMProperty unitless list + csstype cross-reference.
+ * Properties here get no `px` suffix when their value is a plain number.
+ */
+const UNITLESS = new Set([
+	"animationIterationCount",
+	"aspectRatio",
+	"borderImageOutset",
+	"borderImageSlice",
+	"borderImageWidth",
+	"columnCount",
+	"columns",
+	"flex",
+	"flexGrow",
+	"flexShrink",
+	"fontWeight",
+	"gridColumn",
+	"gridColumnEnd",
+	"gridColumnStart",
+	"gridRow",
+	"gridRowEnd",
+	"gridRowStart",
+	"lineClamp",
+	"lineHeight",
+	"opacity",
+	"order",
+	"orphans",
+	"tabSize",
+	"widows",
+	"zIndex",
+	"zoom",
+	"fillOpacity",
+	"floodOpacity",
+	"stopOpacity",
+	"strokeDasharray",
+	"strokeDashoffset",
+	"strokeMiterlimit",
+	"strokeOpacity",
+	"strokeWidth",
+]);
+
+function makeEmptyIR(): SxIR {
+	return { atRules: [], base: {}, selectors: [], variants: {} };
+}
+
+function normNumeric(prop: string, raw: number): string {
+	if (UNITLESS.has(prop)) return String(raw);
+	return `${raw}px`;
+}
+
+/** Evaluate the value expression of a single CSS property. */
+function evalValue(prop: string, expr: Expression): CssValue {
+	if (expr.type === "Literal") {
+		const lit = expr as { type: "Literal"; value: unknown };
+		if (typeof lit.value === "string") return { kind: "static", text: lit.value };
+		if (typeof lit.value === "number") return { kind: "static", text: normNumeric(prop, lit.value) };
+		if (typeof lit.value === "boolean") return { kind: "static", text: String(lit.value) };
+	}
+	if (expr.type === "UnaryExpression") {
+		const unary = expr as { type: "UnaryExpression"; operator: string; argument: Expression };
+		if (unary.operator === "-" && unary.argument.type === "Literal") {
+			const argLit = unary.argument as { value: unknown };
+			if (typeof argLit.value === "number") {
+				return { kind: "static", text: normNumeric(prop, -argLit.value) };
+			}
+		}
+	}
+	if (expr.type === "TemplateLiteral") {
+		const tl = expr as {
+			type: "TemplateLiteral";
+			expressions: Expression[];
+			quasis: Array<{ value: { cooked: string } }>;
+		};
+		if (tl.expressions.length === 0) {
+			return { kind: "static", text: tl.quasis[0].value.cooked };
+		}
+		return { exprNode: expr, kind: "dynamic" };
+	}
+	/* Identifier, MemberExpression, CallExpression, etc. → dynamic */
+	return { exprNode: expr, kind: "dynamic" };
+}
+
+/** Resolve a key node to a string, or null if unresolvable (computed/dynamic). */
+function resolveKey(prop: { computed: boolean; key: Node }): string | null {
+	if (prop.computed) return null;
+	const key = prop.key as { type: string; name?: string; value?: unknown };
+	if (key.type === "Identifier" && typeof key.name === "string") return key.name;
+	if (key.type === "Literal" && typeof key.value === "string") return key.value;
+	return null;
+}
+
+/** Merge properties from a literal ObjectExpression into an existing IR (for spread inlining). */
+function mergeObjectIntoIR(objExpr: ObjectExpression, ir: SxIR, diagnostics: EvalDiagnostic[]): boolean {
+	for (const propOrSpread of objExpr.properties) {
+		if (propOrSpread.type === "SpreadElement") {
+			const spread = propOrSpread as { type: "SpreadElement"; argument: Expression };
+			/* Only inline if argument is itself an ObjectExpression */
+			if (spread.argument.type === "ObjectExpression") {
+				const ok = mergeObjectIntoIR(spread.argument as ObjectExpression, ir, diagnostics);
+				if (!ok) return false;
+			} else {
+				diagnostics.push({
+					kind: "error",
+					message: `partially dynamic sx object: ${(spread.argument as { name?: string }).name ?? "expression"} cannot be resolved at build time`,
+					node: propOrSpread as unknown as Node,
+				});
+				return false;
+			}
+			continue;
+		}
+
+		const prop = propOrSpread as {
+			type: "Property";
+			computed: boolean;
+			key: Node;
+			value: Expression;
+		};
+
+		if (prop.computed) {
+			diagnostics.push({
+				kind: "warning",
+				message: "computed key in sx object cannot be statically resolved — skipped",
+				node: prop.key,
+			});
+			continue;
+		}
+
+		const keyStr = resolveKey(prop);
+		if (keyStr === null) {
+			diagnostics.push({
+				kind: "warning",
+				message: "unresolvable key in sx object — skipped",
+				node: prop.key,
+			});
+			continue;
+		}
+
+		if (keyStr === "variants") {
+			/* variants: { propName: { value: SxIR } } */
+			if (prop.value.type !== "ObjectExpression") continue;
+			const variantsObj = prop.value as ObjectExpression;
+			for (const varProp of variantsObj.properties) {
+				if (varProp.type !== "Property") continue;
+				const vp = varProp as { type: "Property"; computed: boolean; key: Node; value: Expression };
+				const varName = resolveKey(vp);
+				if (!varName) continue;
+				if (vp.value.type !== "ObjectExpression") continue;
+				const valuesObj = vp.value as ObjectExpression;
+				ir.variants[varName] = ir.variants[varName] ?? {};
+				for (const valProp of valuesObj.properties) {
+					if (valProp.type !== "Property") continue;
+					const vvp = valProp as { type: "Property"; computed: boolean; key: Node; value: Expression };
+					const valName = resolveKey(vvp);
+					if (!valName) continue;
+					if (vvp.value.type !== "ObjectExpression") continue;
+					const bodyIR = makeEmptyIR();
+					mergeObjectIntoIR(vvp.value as ObjectExpression, bodyIR, diagnostics);
+					ir.variants[varName][valName] = bodyIR;
+				}
+			}
+			continue;
+		}
+
+		if (keyStr.startsWith("&")) {
+			/* nested selector */
+			if (prop.value.type !== "ObjectExpression") continue;
+			const bodyIR = makeEmptyIR();
+			mergeObjectIntoIR(prop.value as ObjectExpression, bodyIR, diagnostics);
+			ir.selectors.push({ body: bodyIR, sel: keyStr });
+			continue;
+		}
+
+		if (keyStr.startsWith("@")) {
+			/* at-rule */
+			if (prop.value.type !== "ObjectExpression") continue;
+			const bodyIR = makeEmptyIR();
+			mergeObjectIntoIR(prop.value as ObjectExpression, bodyIR, diagnostics);
+			ir.atRules.push({ at: keyStr, body: bodyIR });
+			continue;
+		}
+
+		/* plain CSS property */
+		ir.base[keyStr] = evalValue(keyStr, prop.value);
+	}
+	return true;
+}
+
+/** Evaluate a JSX `sx={{...}}` ObjectExpression to an intermediate representation. */
+export function evaluateSxObject(node: ObjectExpression): EvalResult {
+	const diagnostics: EvalDiagnostic[] = [];
+	const ir = makeEmptyIR();
+
+	/* First pass: check for top-level spreads that are non-literal */
+	for (const propOrSpread of node.properties) {
+		if (propOrSpread.type === "SpreadElement") {
+			const spread = propOrSpread as { type: "SpreadElement"; argument: Expression };
+			if (spread.argument.type !== "ObjectExpression") {
+				const name = (spread.argument as { name?: string }).name ?? "expression";
+				diagnostics.push({
+					kind: "error",
+					message: `partially dynamic sx object: ${name} cannot be resolved at build time`,
+					node: propOrSpread as unknown as Node,
+				});
+				return { diagnostics, ir: null };
+			}
+		}
+	}
+
+	const ok = mergeObjectIntoIR(node, ir, diagnostics);
+	if (!ok) return { diagnostics, ir: null };
+
+	return { diagnostics, ir };
+}