@barocss/server 0.8.1 → 0.9.0

package/README.md

@@ -1,5 +1,7 @@
 # @barocss/server
 
+> **Rendering untrusted class strings (AI output, CMS, users)?** See the [security guide](../../apps/barocss-docs/docs/guide/security.md).
+
 [![npm version](https://img.shields.io/npm/v/@barocss/server.svg)](https://www.npmjs.com/package/@barocss/server)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
@@ -95,8 +97,8 @@ const config = {
   theme: { extend: {                        // your own theme: literal values, not var(--build-vars)
     colors: { brand: '#2563eb' },
     spacing: { gutter: '1.5rem' },          // named spacing: p-gutter
-    borderRadius: { lg: '0.75rem' },        // override existing keys; new radius/font names go in utilities
-    fontFamily: { sans: ['Inter', 'sans-serif'] },
+    borderRadius: { lg: '0.75rem', card: '1.25rem' }, // override rounded-lg; new keys work too: rounded-card
+    fontFamily: { sans: ['Inter', 'sans-serif'], display: ['Fraunces', 'serif'] }, // font-display
   } },
   utilities: { 'max-w-app': { 'max-width': '48rem', 'margin-inline': 'auto' } }, // static @utility rules; `@utility name-*` unsupported
 };

package/dist/index.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@barocss/kit"),g="data-barocss-ssr",C={amp:"&",lt:"<",gt:">",quot:'"',apos:"'",nbsp:" ",colon:":",sol:"/",lsqb:"[",rsqb:"]",num:"#",percnt:"%",lpar:"(",rpar:")",comma:",",period:".",excl:"!",tab:"	",newline:`
-`};function S(c){return c.includes("&")?c.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi,(s,t)=>{if(t[0]==="#"){const e=t[1]==="x"||t[1]==="X"?parseInt(t.slice(2),16):parseInt(t.slice(1),10);return e>0&&e<=1114111?String.fromCodePoint(e):s}return C[t.toLowerCase()]??s}):c}const u=/<[a-zA-Z][^\s/>]*/g,p=/\s+([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?|\s*\//y,d=/\s*>/y;function y(c){const s=c.toLowerCase(),t=/<!--|<(script|style)\b/g;let e="",i=0,r;for(;r=t.exec(s);){e+=c.slice(i,r.index)+" ";let n;if(r[1]){const o=s.indexOf("</"+r[1],r.index+r[0].length);n=o<0?-1:s.indexOf(">",o),n>=0&&(n+=1)}else{const o=s.indexOf("-->",r.index+4);n=o<0?-1:o+3}if(n<0)return e;i=t.lastIndex=n}return e+c.slice(i)}function w(c){const s=y(c),t=new Set;for(u.lastIndex=0;u.exec(s);){let e=u.lastIndex,i;const r=[];for(p.lastIndex=e;(i=p.exec(s))&&i[0];p.lastIndex=e)e=p.lastIndex,i[1]?.toLowerCase()==="class"&&r.push(i[2]??i[3]??i[4]??"");if(d.lastIndex=e,!d.test(s)){u.lastIndex=e;continue}u.lastIndex=d.lastIndex;for(const n of r)for(const o of S(n).split(/\s+/))o&&t.add(o)}return[...t]}function k(c){return c.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g,(s,t,e)=>t?String.fromCodePoint(parseInt(t,16)):e)}function T(c){const s=[];let t=0,e=0;for(let i=0;i<c.length;i++){const r=c[i];r==="\\"?i++:r==="("||r==="["?t++:r===")"||r==="]"?t--:r===","&&t===0&&(s.push(c.slice(e,i)),e=i+1)}return s.push(c.slice(e)),s}const I=/^\s*(?::(?:where|is)\(\s*)?\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/,v=/(^|[\s,(]):(root|host)\b/;function A(c){const s={classes:new Set,vars:new Set,properties:new Set,keyframes:new Set,layerStatement:!1},t=[];let e="";const i=r=>{if(t.some(n=>v.test(n)))for(const n of r.matchAll(/(?:^|;)\s*(--[\w-]+)\s*:/g))s.vars.add(n[1])};for(let r=0;r<c.length;r++){const n=c[r];if(n==="/"&&c[r+1]==="*"){const o=c.indexOf("*/",r+2);r=o<0?c.length:o+1;continue}if(n==='"'||n==="'"){let o=r+1;for(;o<c.length&&c[o]!==n;)o+=c[o]==="\\"?2:1;e+=c.slice(r,o+1),r=o;continue}if(n==="\\"){e+=c.slice(r,r+2),r++;continue}if(n==="{"){const o=e.lastIndexOf(";");o>=0&&i(e.slice(0,o+1));const a=e.slice(o+1).trim();e="",t.push(a);const l=/^@([\w-]+)\s*([\s\S]*)$/.exec(a);if(l){const f=l[1].toLowerCase();f==="property"?s.properties.add(l[2].trim()):f.endsWith("keyframes")&&s.keyframes.add(l[2].trim().replace(/^["']|["']$/g,""))}else if(!a.startsWith("&"))for(const f of T(a)){const x=I.exec(f);x&&s.classes.add(k(x[1]))}continue}if(n==="}"){i(e),e="",t.pop();continue}if(n===";"&&t.length===0){/^\s*@layer\b/.test(e)&&(s.layerStatement=!0),e="";continue}e+=n}return s}function R(c,s={}){const t=s.nonce?` nonce="${s.nonce.replace(/[&"<>]/g,e=>`&#${e.charCodeAt(0)};`)}"`:"";return`<style ${g}${t}>${c.replace(/<\/(style)/gi,"<\\/$1")}</style>`}const m=c=>[...c.matchAll(/var\((--[\w-]+)/g)].map(s=>s[1]);class E{constructor(s={},t={}){this.classCache=new Map,this.themeDefs=null,this.skipCache=new Map,this.cacheSize=Math.max(0,t.cacheSize??1e4),this.setConfig(s)}setConfig(s){this.context=h.createContext(s),this.classCache.clear(),this.themeDefs=null}parseClass(s){return h.parseClassToAst(s,this.context)}generateCss(s){return this.sheet(s.split(/\s+/).filter(Boolean))}generateCssForHtml(s,t={}){const e=typeof s=="string"?w(s):[...new Set(s.flatMap(n=>n.split(/\s+/)).filter(Boolean))],i=t.skip;if(i===void 0)return this.sheet(e);if(typeof i=="string"){const n=this.skipDefs(i);return this.sheet(e.filter(o=>!n.classes.has(o)),n)}const r=i instanceof Set?i:new Set(i);return this.sheet(e.filter(n=>!r.has(n)))}skipDefs(s){let t=this.skipCache.get(s);return t||(this.skipCache.size>=4&&this.skipCache.delete(this.skipCache.keys().next().value),this.skipCache.set(s,t=A(s))),t}sheet(s,t){const e=s.map(a=>this.entryFor(a));let i=this.uniqueRoots(e.flatMap(a=>a.roots));t&&(i=i.filter(({css:a,dedupeKey:l})=>{if(l.startsWith("--"))return!t.properties.has(l);const f=/^\s*@(?:-[\w]+-)?keyframes\s+([^\s{]+)/.exec(a)?.[1];return!f||!t.keyframes.has(f)}));const r=this.sortRules(e.filter(a=>a.css)),n=[...i.flatMap(a=>a.refs),...r.flatMap(a=>a.refs)],o=this.themeVarsBlock(n,t?.vars);return[...o?[o]:[],...i.map(a=>a.css),...r.map(a=>a.css)].join(`
-`)}entryFor(s){const t=this.classCache.get(s);if(t)return this.classCache.delete(s),this.classCache.set(s,t),t;const e={css:"",key:null,refs:[],roots:[]};for(const{css:i,rootCssList:r}of h.generateCssRules(s,this.context)){i&&(e.css=i);for(const n of r){if(!n)continue;const o=/^\s*@property\s+(--[\w-]+)/.exec(n)?.[1]??n;e.roots.push({css:n,dedupeKey:o,refs:m(n)})}}return e.css&&(e.key=h.ruleSortKey(e.css),e.refs=m(e.css)),this.cacheSize>0&&(this.classCache.size>=this.cacheSize&&this.classCache.delete(this.classCache.keys().next().value),this.classCache.set(s,e)),e}generateCssForClasses(s){return s.map(t=>({className:t,css:this.generateCss(t)}))}uniqueRoots(s){const t=new Set;return s.filter(({dedupeKey:e})=>!t.has(e)&&!!t.add(e))}sortRules(s){return s.map((t,e)=>({entry:t,i:e})).sort((t,e)=>h.compareKeys(t.entry.key,e.entry.key)||t.i-e.i).map(({entry:t})=>t)}themeVarsBlock(s,t){const e=s;if(e.length===0)return"";let i=this.themeDefs;if(!i){i=this.themeDefs=new Map;for(const n of this.context.themeToCssVars().matchAll(/^\s*(--[\w-]+):\s*(.+);$/gm))i.set(n[1],n[2])}const r=new Map;for(;e.length;){const n=e.pop(),o=i.get(n);o===void 0||r.has(n)||t?.has(n)||(r.set(n,o),e.push(...m(o)))}return r.size===0?"":`:root,:host {
-`+[...r].map(([n,o])=>`  ${n}: ${o};`).join(`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@barocss/kit");var t=`data-barocss-ssr`,n={amp:`&`,lt:`<`,gt:`>`,quot:`"`,apos:`'`,nbsp:`\xA0`,colon:`:`,sol:`/`,lsqb:`[`,rsqb:`]`,num:`#`,percnt:`%`,lpar:`(`,rpar:`)`,comma:`,`,period:`.`,excl:`!`,tab:`	`,newline:`
+`};function r(e){return e.includes(`&`)?e.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi,(e,t)=>{if(t[0]===`#`){let n=t[1]===`x`||t[1]===`X`?parseInt(t.slice(2),16):parseInt(t.slice(1),10);return n>0&&n<=1114111?String.fromCodePoint(n):e}return n[t.toLowerCase()]??e}):e}var i=/<[a-zA-Z][^\s/>]*/g,a=/\s+([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?|\s*\//y,o=/\s*>/y;function s(e){let t=e.toLowerCase(),n=/<!--|<(script|style)\b/g,r=``,i=0,a;for(;a=n.exec(t);){r+=e.slice(i,a.index)+` `;let o;if(a[1]){let e=t.indexOf(`</`+a[1],a.index+a[0].length);o=e<0?-1:t.indexOf(`>`,e),o>=0&&(o+=1)}else{let e=t.indexOf(`-->`,a.index+4);o=e<0?-1:e+3}if(o<0)return r;i=n.lastIndex=o}return r+e.slice(i)}function c(e){let t=s(e),n=new Set;for(i.lastIndex=0;i.exec(t);){let e=i.lastIndex,s,c=[];for(a.lastIndex=e;(s=a.exec(t))&&s[0];a.lastIndex=e)e=a.lastIndex,s[1]?.toLowerCase()===`class`&&c.push(s[2]??s[3]??s[4]??``);if(o.lastIndex=e,!o.test(t)){i.lastIndex=e;continue}i.lastIndex=o.lastIndex;for(let e of c)for(let t of r(e).split(/\s+/))t&&n.add(t)}return[...n]}function l(e){return e.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g,(e,t,n)=>t?String.fromCodePoint(parseInt(t,16)):n)}function u(e){let t=[],n=0,r=0;for(let i=0;i<e.length;i++){let a=e[i];a===`\\`?i++:a===`(`||a===`[`?n++:a===`)`||a===`]`?n--:a===`,`&&n===0&&(t.push(e.slice(r,i)),r=i+1)}return t.push(e.slice(r)),t}var d=/^\s*(?::(?:where|is)\(\s*)?\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/,f=/(^|[\s,(]):(root|host)\b/;function p(e){let t={classes:new Set,vars:new Set,properties:new Set,keyframes:new Set,layerStatement:!1},n=[],r=``,i=e=>{if(n.some(e=>f.test(e)))for(let n of e.matchAll(/(?:^|;)\s*(--[\w-]+)\s*:/g))t.vars.add(n[1])};for(let a=0;a<e.length;a++){let o=e[a];if(o===`/`&&e[a+1]===`*`){let t=e.indexOf(`*/`,a+2);a=t<0?e.length:t+1;continue}if(o===`"`||o===`'`){let t=a+1;for(;t<e.length&&e[t]!==o;)t+=e[t]===`\\`?2:1;r+=e.slice(a,t+1),a=t;continue}if(o===`\\`){r+=e.slice(a,a+2),a++;continue}if(o===`{`){let e=r.lastIndexOf(`;`);e>=0&&i(r.slice(0,e+1));let a=r.slice(e+1).trim();r=``,n.push(a);let o=/^@([\w-]+)\s*([\s\S]*)$/.exec(a);if(o){let e=o[1].toLowerCase();e===`property`?t.properties.add(o[2].trim()):e.endsWith(`keyframes`)&&t.keyframes.add(o[2].trim().replace(/^["']|["']$/g,``))}else if(!a.startsWith(`&`))for(let e of u(a)){let n=d.exec(e);n&&t.classes.add(l(n[1]))}continue}if(o===`}`){i(r),r=``,n.pop();continue}if(o===`;`&&n.length===0){/^\s*@layer\b/.test(r)&&(t.layerStatement=!0),r=``;continue}r+=o}return t}function m(e,n={}){return`<style ${t}${n.nonce?` nonce="${n.nonce.replace(/[&"<>]/g,e=>`&#${e.charCodeAt(0)};`)}"`:``}>${e.replace(/<\/(style)/gi,`<\\/$1`)}</style>`}var h=e=>[...e.matchAll(/var\((--[\w-]+)/g)].map(e=>e[1]),g=class{constructor(e={},t={}){this.classCache=new Map,this.themeDefs=null,this.skipCache=new Map,this.cacheSize=Math.max(0,t.cacheSize??1e4),this.setConfig(e)}setConfig(t){this.context=(0,e.createContext)(t),this.classCache.clear(),this.themeDefs=null}parseClass(t){return(0,e.parseClassToAst)(t,this.context)}generateCss(e){return this.sheet(e.split(/\s+/).filter(Boolean))}generateCssForHtml(e,t={}){let n=typeof e==`string`?c(e):[...new Set(e.flatMap(e=>e.split(/\s+/)).filter(Boolean))],r=t.skip;if(r===void 0)return this.sheet(n);if(typeof r==`string`){let e=this.skipDefs(r);return this.sheet(n.filter(t=>!e.classes.has(t)),e)}let i=r instanceof Set?r:new Set(r);return this.sheet(n.filter(e=>!i.has(e)))}skipDefs(e){let t=this.skipCache.get(e);return t||(this.skipCache.size>=4&&this.skipCache.delete(this.skipCache.keys().next().value),this.skipCache.set(e,t=p(e))),t}sheet(e,t){let n=e.map(e=>this.entryFor(e)),r=this.uniqueRoots(n.flatMap(e=>e.roots));t&&(r=r.filter(({css:e,dedupeKey:n})=>{if(n.startsWith(`--`))return!t.properties.has(n);let r=/^\s*@(?:-[\w]+-)?keyframes\s+([^\s{]+)/.exec(e)?.[1];return!r||!t.keyframes.has(r)}));let i=this.sortRules(n.filter(e=>e.css)),a=[...r.flatMap(e=>e.refs),...i.flatMap(e=>e.refs)],o=this.themeVarsBlock(a,t?.vars);return[...o?[o]:[],...r.map(e=>e.css),...i.map(e=>e.css)].join(`
+`)}entryFor(t){let n=this.classCache.get(t);if(n)return this.classCache.delete(t),this.classCache.set(t,n),n;let r={css:``,key:null,refs:[],roots:[]},i=[];try{i=(0,e.generateCssRules)(t,this.context)}catch(n){(0,e.isDebug)()&&console.warn(`[barocss/server] class generation failed:`,t,n)}for(let{css:e,rootCssList:t}of i){e&&(r.css=e);for(let e of t){if(!e)continue;let t=/^\s*@property\s+(--[\w-]+)/.exec(e)?.[1]??e;r.roots.push({css:e,dedupeKey:t,refs:h(e)})}}return r.css&&(r.key=(0,e.ruleSortKey)(r.css),r.refs=h(r.css)),this.cacheSize>0&&(this.classCache.size>=this.cacheSize&&this.classCache.delete(this.classCache.keys().next().value),this.classCache.set(t,r)),r}generateCssForClasses(e){return e.map(e=>({className:e,css:this.generateCss(e)}))}uniqueRoots(e){let t=new Set;return e.filter(({dedupeKey:e})=>!t.has(e)&&!!t.add(e))}sortRules(t){return t.map((e,t)=>({entry:e,i:t})).sort((t,n)=>(0,e.compareKeys)(t.entry.key,n.entry.key)||t.i-n.i).map(({entry:e})=>e)}themeVarsBlock(e,t){let n=e;if(n.length===0)return``;let r=this.themeDefs;if(!r){r=this.themeDefs=new Map;for(let e of this.context.themeToCssVars().matchAll(/^\s*(--[\w-]+):\s*(.+);$/gm))r.set(e[1],e[2])}let i=new Map;for(;n.length;){let e=n.pop(),a=r.get(e);a===void 0||i.has(e)||t?.has(e)||(i.set(e,a),n.push(...h(a)))}return i.size===0?``:`:root,:host {
+`+[...i].map(([e,t])=>`  ${e}: ${t};`).join(`
 `)+`
-}`}}exports.SSR_STYLE_ATTRIBUTE=g;exports.ServerRuntime=E;exports.ssrStyleTag=R;
+}`}};exports.SSR_STYLE_ATTRIBUTE=t,exports.ServerRuntime=g,exports.ssrStyleTag=m;

package/dist/index.d.cts

@@ -0,0 +1,70 @@
+import { Config } from '@barocss/kit';
+export { ssrStyleTag, SSR_STYLE_ATTRIBUTE } from './ssr.cjs';
+/** #268: what `generateCssForHtml` leaves out: build CSS text, or class names. */
+export interface GenerateCssForHtmlOptions {
+    /**
+     * Build CSS text (the stylesheet the page already links) or a set of class names. With CSS, the
+     * classes leading its selectors are skipped, and so are the theme vars its `:root`/`:host` blocks
+     * declare, its `@property` and `@keyframes` names. With class names only classes are skipped.
+     */
+    skip?: string | Iterable<string>;
+}
+export interface ServerRuntimeOptions {
+    /** Max classes kept in the per-class generation cache (LRU). Default 10000; 0 disables caching. */
+    cacheSize?: number;
+}
+export declare class ServerRuntime {
+    private context;
+    private readonly cacheSize;
+    /** class -> generated entry; Map insertion order doubles as LRU order (#272). */
+    private classCache;
+    /** Theme var definitions parsed once from themeToCssVars() (#272). */
+    private themeDefs;
+    /** #268: parsed skip CSS by text. */
+    private skipCache;
+    constructor(config?: Config, options?: ServerRuntimeOptions);
+    /** Replace the config (theme included). Drops every cached result derived from the previous one. */
+    setConfig(config: Config): void;
+    /**
+     * Parse a class name and return its AST
+     */
+    parseClass(className: string): import('@barocss/kit').AstNode[];
+    /**
+     * Generate CSS for a class name (or whitespace-separated class names) as one complete sheet (#267):
+     * one `:root,:host` block defining every theme var the output references, each root/@property block
+     * once, then the class rules in Tailwind variant order (base < sm < md < lg ...).
+     */
+    generateCss(className: string): string;
+    /**
+     * #268: the complete sheet (#267 order) for the classes one server response uses, minus what the
+     * page's build CSS already provides. `htmlOrClasses` is HTML (classes are read from `class`
+     * attributes; `<script>`/`<style>` contents and comments ignored) or a class list. Stateless per
+     * call: it returns this request's delta, never classes emitted for earlier requests. Wrap the result
+     * with `ssrStyleTag()` so `@barocss/browser` adopts it.
+     */
+    generateCssForHtml(htmlOrClasses: string | string[], opts?: GenerateCssForHtmlOptions): string;
+    /** Parsed build CSS, memoised by text (a server passes the same build CSS on every request). */
+    private skipDefs;
+    private sheet;
+    /** Generate (or reuse) one class's rules. Same per-class output generateCssRules gives for a class list. */
+    private entryFor;
+    /**
+     * CSS per class, in input order. Each entry is self-contained (its own `:root,:host` vars block,
+     * @property blocks and variant-sorted rules), so entries repeat shared blocks and are not ordered
+     * against each other. For one complete sheet use `generateCss(classes.join(' '))`.
+     */
+    generateCssForClasses(classes: string[]): {
+        className: string;
+        css: string;
+    }[];
+    /** Dedupe root-level blocks by content, and @property blocks by property name. */
+    private uniqueRoots;
+    /** Stable sort by the #254 variant key shared with @barocss/browser. */
+    private sortRules;
+    /**
+     * #228 generalised (#267): define every var(--x) the output references that the theme defines
+     * (radius, text, spacing, shadow, font, colour ...), including vars those definitions reference.
+     * themeToCssVars() already omits self-referencing entries (#260).
+     */
+    private themeVarsBlock;
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Config } from '@barocss/kit';
-export { ssrStyleTag, SSR_STYLE_ATTRIBUTE } from './ssr';
+export { ssrStyleTag, SSR_STYLE_ATTRIBUTE } from './ssr.js';
 /** #268: what `generateCssForHtml` leaves out: build CSS text, or class names. */
 export interface GenerateCssForHtmlOptions {
     /**

package/dist/index.es.js

@@ -1,255 +1,238 @@
-import { createContext as x, parseClassToAst as C, generateCssRules as g, ruleSortKey as w, compareKeys as y } from "@barocss/kit";
-const S = "data-barocss-ssr", k = {
-  amp: "&",
-  lt: "<",
-  gt: ">",
-  quot: '"',
-  apos: "'",
-  nbsp: " ",
-  colon: ":",
-  sol: "/",
-  lsqb: "[",
-  rsqb: "]",
-  num: "#",
-  percnt: "%",
-  lpar: "(",
-  rpar: ")",
-  comma: ",",
-  period: ".",
-  excl: "!",
-  tab: "	",
-  newline: `
-`
+import { compareKeys as e, createContext as t, generateCssRules as n, isDebug as r, parseClassToAst as i, ruleSortKey as a } from "@barocss/kit";
+//#region src/ssr.ts
+var o = "data-barocss-ssr", s = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'",
+	nbsp: "\xA0",
+	colon: ":",
+	sol: "/",
+	lsqb: "[",
+	rsqb: "]",
+	num: "#",
+	percnt: "%",
+	lpar: "(",
+	rpar: ")",
+	comma: ",",
+	period: ".",
+	excl: "!",
+	tab: "	",
+	newline: "\n"
 };
-function I(c) {
-  return c.includes("&") ? c.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (s, t) => {
-    if (t[0] === "#") {
-      const e = t[1] === "x" || t[1] === "X" ? parseInt(t.slice(2), 16) : parseInt(t.slice(1), 10);
-      return e > 0 && e <= 1114111 ? String.fromCodePoint(e) : s;
-    }
-    return k[t.toLowerCase()] ?? s;
-  }) : c;
+function c(e) {
+	return e.includes("&") ? e.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (e, t) => {
+		if (t[0] === "#") {
+			let n = t[1] === "x" || t[1] === "X" ? parseInt(t.slice(2), 16) : parseInt(t.slice(1), 10);
+			return n > 0 && n <= 1114111 ? String.fromCodePoint(n) : e;
+		}
+		return s[t.toLowerCase()] ?? e;
+	}) : e;
 }
-const h = /<[a-zA-Z][^\s/>]*/g, p = /\s+([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?|\s*\//y, u = /\s*>/y;
-function T(c) {
-  const s = c.toLowerCase(), t = /<!--|<(script|style)\b/g;
-  let e = "", i = 0, o;
-  for (; o = t.exec(s); ) {
-    e += c.slice(i, o.index) + " ";
-    let n;
-    if (o[1]) {
-      const r = s.indexOf("</" + o[1], o.index + o[0].length);
-      n = r < 0 ? -1 : s.indexOf(">", r), n >= 0 && (n += 1);
-    } else {
-      const r = s.indexOf("-->", o.index + 4);
-      n = r < 0 ? -1 : r + 3;
-    }
-    if (n < 0) return e;
-    i = t.lastIndex = n;
-  }
-  return e + c.slice(i);
+var l = /<[a-zA-Z][^\s/>]*/g, u = /\s+([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?|\s*\//y, d = /\s*>/y;
+function f(e) {
+	let t = e.toLowerCase(), n = /<!--|<(script|style)\b/g, r = "", i = 0, a;
+	for (; a = n.exec(t);) {
+		r += e.slice(i, a.index) + " ";
+		let o;
+		if (a[1]) {
+			let e = t.indexOf("</" + a[1], a.index + a[0].length);
+			o = e < 0 ? -1 : t.indexOf(">", e), o >= 0 && (o += 1);
+		} else {
+			let e = t.indexOf("-->", a.index + 4);
+			o = e < 0 ? -1 : e + 3;
+		}
+		if (o < 0) return r;
+		i = n.lastIndex = o;
+	}
+	return r + e.slice(i);
 }
-function A(c) {
-  const s = T(c), t = /* @__PURE__ */ new Set();
-  for (h.lastIndex = 0; h.exec(s); ) {
-    let e = h.lastIndex, i;
-    const o = [];
-    for (p.lastIndex = e; (i = p.exec(s)) && i[0]; p.lastIndex = e)
-      e = p.lastIndex, i[1]?.toLowerCase() === "class" && o.push(i[2] ?? i[3] ?? i[4] ?? "");
-    if (u.lastIndex = e, !u.test(s)) {
-      h.lastIndex = e;
-      continue;
-    }
-    h.lastIndex = u.lastIndex;
-    for (const n of o) for (const r of I(n).split(/\s+/)) r && t.add(r);
-  }
-  return [...t];
+function p(e) {
+	let t = f(e), n = /* @__PURE__ */ new Set();
+	for (l.lastIndex = 0; l.exec(t);) {
+		let e = l.lastIndex, r, i = [];
+		for (u.lastIndex = e; (r = u.exec(t)) && r[0]; u.lastIndex = e) e = u.lastIndex, r[1]?.toLowerCase() === "class" && i.push(r[2] ?? r[3] ?? r[4] ?? "");
+		if (d.lastIndex = e, !d.test(t)) {
+			l.lastIndex = e;
+			continue;
+		}
+		l.lastIndex = d.lastIndex;
+		for (let e of i) for (let t of c(e).split(/\s+/)) t && n.add(t);
+	}
+	return [...n];
 }
-function v(c) {
-  return c.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g, (s, t, e) => t ? String.fromCodePoint(parseInt(t, 16)) : e);
+function m(e) {
+	return e.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g, (e, t, n) => t ? String.fromCodePoint(parseInt(t, 16)) : n);
 }
-function R(c) {
-  const s = [];
-  let t = 0, e = 0;
-  for (let i = 0; i < c.length; i++) {
-    const o = c[i];
-    o === "\\" ? i++ : o === "(" || o === "[" ? t++ : o === ")" || o === "]" ? t-- : o === "," && t === 0 && (s.push(c.slice(e, i)), e = i + 1);
-  }
-  return s.push(c.slice(e)), s;
+function h(e) {
+	let t = [], n = 0, r = 0;
+	for (let i = 0; i < e.length; i++) {
+		let a = e[i];
+		a === "\\" ? i++ : a === "(" || a === "[" ? n++ : a === ")" || a === "]" ? n-- : a === "," && n === 0 && (t.push(e.slice(r, i)), r = i + 1);
+	}
+	return t.push(e.slice(r)), t;
 }
-const D = /^\s*(?::(?:where|is)\(\s*)?\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/, E = /(^|[\s,(]):(root|host)\b/;
-function $(c) {
-  const s = { classes: /* @__PURE__ */ new Set(), vars: /* @__PURE__ */ new Set(), properties: /* @__PURE__ */ new Set(), keyframes: /* @__PURE__ */ new Set(), layerStatement: !1 }, t = [];
-  let e = "";
-  const i = (o) => {
-    if (t.some((n) => E.test(n)))
-      for (const n of o.matchAll(/(?:^|;)\s*(--[\w-]+)\s*:/g)) s.vars.add(n[1]);
-  };
-  for (let o = 0; o < c.length; o++) {
-    const n = c[o];
-    if (n === "/" && c[o + 1] === "*") {
-      const r = c.indexOf("*/", o + 2);
-      o = r < 0 ? c.length : r + 1;
-      continue;
-    }
-    if (n === '"' || n === "'") {
-      let r = o + 1;
-      for (; r < c.length && c[r] !== n; ) r += c[r] === "\\" ? 2 : 1;
-      e += c.slice(o, r + 1), o = r;
-      continue;
-    }
-    if (n === "\\") {
-      e += c.slice(o, o + 2), o++;
-      continue;
-    }
-    if (n === "{") {
-      const r = e.lastIndexOf(";");
-      r >= 0 && i(e.slice(0, r + 1));
-      const a = e.slice(r + 1).trim();
-      e = "", t.push(a);
-      const l = /^@([\w-]+)\s*([\s\S]*)$/.exec(a);
-      if (l) {
-        const f = l[1].toLowerCase();
-        f === "property" ? s.properties.add(l[2].trim()) : f.endsWith("keyframes") && s.keyframes.add(l[2].trim().replace(/^["']|["']$/g, ""));
-      } else if (!a.startsWith("&"))
-        for (const f of R(a)) {
-          const m = D.exec(f);
-          m && s.classes.add(v(m[1]));
-        }
-      continue;
-    }
-    if (n === "}") {
-      i(e), e = "", t.pop();
-      continue;
-    }
-    if (n === ";" && t.length === 0) {
-      /^\s*@layer\b/.test(e) && (s.layerStatement = !0), e = "";
-      continue;
-    }
-    e += n;
-  }
-  return s;
+var g = /^\s*(?::(?:where|is)\(\s*)?\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/, _ = /(^|[\s,(]):(root|host)\b/;
+function v(e) {
+	let t = {
+		classes: /* @__PURE__ */ new Set(),
+		vars: /* @__PURE__ */ new Set(),
+		properties: /* @__PURE__ */ new Set(),
+		keyframes: /* @__PURE__ */ new Set(),
+		layerStatement: !1
+	}, n = [], r = "", i = (e) => {
+		if (n.some((e) => _.test(e))) for (let n of e.matchAll(/(?:^|;)\s*(--[\w-]+)\s*:/g)) t.vars.add(n[1]);
+	};
+	for (let a = 0; a < e.length; a++) {
+		let o = e[a];
+		if (o === "/" && e[a + 1] === "*") {
+			let t = e.indexOf("*/", a + 2);
+			a = t < 0 ? e.length : t + 1;
+			continue;
+		}
+		if (o === "\"" || o === "'") {
+			let t = a + 1;
+			for (; t < e.length && e[t] !== o;) t += e[t] === "\\" ? 2 : 1;
+			r += e.slice(a, t + 1), a = t;
+			continue;
+		}
+		if (o === "\\") {
+			r += e.slice(a, a + 2), a++;
+			continue;
+		}
+		if (o === "{") {
+			let e = r.lastIndexOf(";");
+			e >= 0 && i(r.slice(0, e + 1));
+			let a = r.slice(e + 1).trim();
+			r = "", n.push(a);
+			let o = /^@([\w-]+)\s*([\s\S]*)$/.exec(a);
+			if (o) {
+				let e = o[1].toLowerCase();
+				e === "property" ? t.properties.add(o[2].trim()) : e.endsWith("keyframes") && t.keyframes.add(o[2].trim().replace(/^["']|["']$/g, ""));
+			} else if (!a.startsWith("&")) for (let e of h(a)) {
+				let n = g.exec(e);
+				n && t.classes.add(m(n[1]));
+			}
+			continue;
+		}
+		if (o === "}") {
+			i(r), r = "", n.pop();
+			continue;
+		}
+		if (o === ";" && n.length === 0) {
+			/^\s*@layer\b/.test(r) && (t.layerStatement = !0), r = "";
+			continue;
+		}
+		r += o;
+	}
+	return t;
 }
-function M(c, s = {}) {
-  const t = s.nonce ? ` nonce="${s.nonce.replace(/[&"<>]/g, (e) => `&#${e.charCodeAt(0)};`)}"` : "";
-  return `<style ${S}${t}>${c.replace(/<\/(style)/gi, "<\\/$1")}</style>`;
+function y(e, t = {}) {
+	return `<style ${o}${t.nonce ? ` nonce="${t.nonce.replace(/[&"<>]/g, (e) => `&#${e.charCodeAt(0)};`)}"` : ""}>${e.replace(/<\/(style)/gi, "<\\/$1")}</style>`;
 }
-const d = (c) => [...c.matchAll(/var\((--[\w-]+)/g)].map((s) => s[1]);
-class z {
-  constructor(s = {}, t = {}) {
-    this.classCache = /* @__PURE__ */ new Map(), this.themeDefs = null, this.skipCache = /* @__PURE__ */ new Map(), this.cacheSize = Math.max(0, t.cacheSize ?? 1e4), this.setConfig(s);
-  }
-  /** Replace the config (theme included). Drops every cached result derived from the previous one. */
-  setConfig(s) {
-    this.context = x(s), this.classCache.clear(), this.themeDefs = null;
-  }
-  /**
-   * Parse a class name and return its AST
-   */
-  parseClass(s) {
-    return C(s, this.context);
-  }
-  /**
-   * Generate CSS for a class name (or whitespace-separated class names) as one complete sheet (#267):
-   * one `:root,:host` block defining every theme var the output references, each root/@property block
-   * once, then the class rules in Tailwind variant order (base < sm < md < lg ...).
-   */
-  generateCss(s) {
-    return this.sheet(s.split(/\s+/).filter(Boolean));
-  }
-  /**
-   * #268: the complete sheet (#267 order) for the classes one server response uses, minus what the
-   * page's build CSS already provides. `htmlOrClasses` is HTML (classes are read from `class`
-   * attributes; `<script>`/`<style>` contents and comments ignored) or a class list. Stateless per
-   * call: it returns this request's delta, never classes emitted for earlier requests. Wrap the result
-   * with `ssrStyleTag()` so `@barocss/browser` adopts it.
-   */
-  generateCssForHtml(s, t = {}) {
-    const e = typeof s == "string" ? A(s) : [...new Set(s.flatMap((n) => n.split(/\s+/)).filter(Boolean))], i = t.skip;
-    if (i === void 0) return this.sheet(e);
-    if (typeof i == "string") {
-      const n = this.skipDefs(i);
-      return this.sheet(e.filter((r) => !n.classes.has(r)), n);
-    }
-    const o = i instanceof Set ? i : new Set(i);
-    return this.sheet(e.filter((n) => !o.has(n)));
-  }
-  /** Parsed build CSS, memoised by text (a server passes the same build CSS on every request). */
-  skipDefs(s) {
-    let t = this.skipCache.get(s);
-    return t || (this.skipCache.size >= 4 && this.skipCache.delete(this.skipCache.keys().next().value), this.skipCache.set(s, t = $(s))), t;
-  }
-  sheet(s, t) {
-    const e = s.map((a) => this.entryFor(a));
-    let i = this.uniqueRoots(e.flatMap((a) => a.roots));
-    t && (i = i.filter(({ css: a, dedupeKey: l }) => {
-      if (l.startsWith("--")) return !t.properties.has(l);
-      const f = /^\s*@(?:-[\w]+-)?keyframes\s+([^\s{]+)/.exec(a)?.[1];
-      return !f || !t.keyframes.has(f);
-    }));
-    const o = this.sortRules(e.filter((a) => a.css)), n = [...i.flatMap((a) => a.refs), ...o.flatMap((a) => a.refs)], r = this.themeVarsBlock(n, t?.vars);
-    return [...r ? [r] : [], ...i.map((a) => a.css), ...o.map((a) => a.css)].join(`
-`);
-  }
-  /** Generate (or reuse) one class's rules. Same per-class output generateCssRules gives for a class list. */
-  entryFor(s) {
-    const t = this.classCache.get(s);
-    if (t)
-      return this.classCache.delete(s), this.classCache.set(s, t), t;
-    const e = { css: "", key: null, refs: [], roots: [] };
-    for (const { css: i, rootCssList: o } of g(s, this.context)) {
-      i && (e.css = i);
-      for (const n of o) {
-        if (!n) continue;
-        const r = /^\s*@property\s+(--[\w-]+)/.exec(n)?.[1] ?? n;
-        e.roots.push({ css: n, dedupeKey: r, refs: d(n) });
-      }
-    }
-    return e.css && (e.key = w(e.css), e.refs = d(e.css)), this.cacheSize > 0 && (this.classCache.size >= this.cacheSize && this.classCache.delete(this.classCache.keys().next().value), this.classCache.set(s, e)), e;
-  }
-  /**
-   * CSS per class, in input order. Each entry is self-contained (its own `:root,:host` vars block,
-   * @property blocks and variant-sorted rules), so entries repeat shared blocks and are not ordered
-   * against each other. For one complete sheet use `generateCss(classes.join(' '))`.
-   */
-  generateCssForClasses(s) {
-    return s.map((t) => ({ className: t, css: this.generateCss(t) }));
-  }
-  /** Dedupe root-level blocks by content, and @property blocks by property name. */
-  uniqueRoots(s) {
-    const t = /* @__PURE__ */ new Set();
-    return s.filter(({ dedupeKey: e }) => !t.has(e) && !!t.add(e));
-  }
-  /** Stable sort by the #254 variant key shared with @barocss/browser. */
-  sortRules(s) {
-    return s.map((t, e) => ({ entry: t, i: e })).sort((t, e) => y(t.entry.key, e.entry.key) || t.i - e.i).map(({ entry: t }) => t);
-  }
-  /**
-   * #228 generalised (#267): define every var(--x) the output references that the theme defines
-   * (radius, text, spacing, shadow, font, colour ...), including vars those definitions reference.
-   * themeToCssVars() already omits self-referencing entries (#260).
-   */
-  themeVarsBlock(s, t) {
-    const e = s;
-    if (e.length === 0) return "";
-    let i = this.themeDefs;
-    if (!i) {
-      i = this.themeDefs = /* @__PURE__ */ new Map();
-      for (const n of this.context.themeToCssVars().matchAll(/^\s*(--[\w-]+):\s*(.+);$/gm)) i.set(n[1], n[2]);
-    }
-    const o = /* @__PURE__ */ new Map();
-    for (; e.length; ) {
-      const n = e.pop(), r = i.get(n);
-      r === void 0 || o.has(n) || t?.has(n) || (o.set(n, r), e.push(...d(r)));
-    }
-    return o.size === 0 ? "" : `:root,:host {
-` + [...o].map(([n, r]) => `  ${n}: ${r};`).join(`
-`) + `
-}`;
-  }
-}
-export {
-  S as SSR_STYLE_ATTRIBUTE,
-  z as ServerRuntime,
-  M as ssrStyleTag
+//#endregion
+//#region src/index.ts
+var b = (e) => [...e.matchAll(/var\((--[\w-]+)/g)].map((e) => e[1]), x = class {
+	constructor(e = {}, t = {}) {
+		this.classCache = /* @__PURE__ */ new Map(), this.themeDefs = null, this.skipCache = /* @__PURE__ */ new Map(), this.cacheSize = Math.max(0, t.cacheSize ?? 1e4), this.setConfig(e);
+	}
+	setConfig(e) {
+		this.context = t(e), this.classCache.clear(), this.themeDefs = null;
+	}
+	parseClass(e) {
+		return i(e, this.context);
+	}
+	generateCss(e) {
+		return this.sheet(e.split(/\s+/).filter(Boolean));
+	}
+	generateCssForHtml(e, t = {}) {
+		let n = typeof e == "string" ? p(e) : [...new Set(e.flatMap((e) => e.split(/\s+/)).filter(Boolean))], r = t.skip;
+		if (r === void 0) return this.sheet(n);
+		if (typeof r == "string") {
+			let e = this.skipDefs(r);
+			return this.sheet(n.filter((t) => !e.classes.has(t)), e);
+		}
+		let i = r instanceof Set ? r : new Set(r);
+		return this.sheet(n.filter((e) => !i.has(e)));
+	}
+	skipDefs(e) {
+		let t = this.skipCache.get(e);
+		return t || (this.skipCache.size >= 4 && this.skipCache.delete(this.skipCache.keys().next().value), this.skipCache.set(e, t = v(e))), t;
+	}
+	sheet(e, t) {
+		let n = e.map((e) => this.entryFor(e)), r = this.uniqueRoots(n.flatMap((e) => e.roots));
+		t && (r = r.filter(({ css: e, dedupeKey: n }) => {
+			if (n.startsWith("--")) return !t.properties.has(n);
+			let r = /^\s*@(?:-[\w]+-)?keyframes\s+([^\s{]+)/.exec(e)?.[1];
+			return !r || !t.keyframes.has(r);
+		}));
+		let i = this.sortRules(n.filter((e) => e.css)), a = [...r.flatMap((e) => e.refs), ...i.flatMap((e) => e.refs)], o = this.themeVarsBlock(a, t?.vars);
+		return [
+			...o ? [o] : [],
+			...r.map((e) => e.css),
+			...i.map((e) => e.css)
+		].join("\n");
+	}
+	entryFor(e) {
+		let t = this.classCache.get(e);
+		if (t) return this.classCache.delete(e), this.classCache.set(e, t), t;
+		let i = {
+			css: "",
+			key: null,
+			refs: [],
+			roots: []
+		}, o = [];
+		try {
+			o = n(e, this.context);
+		} catch (t) {
+			r() && console.warn("[barocss/server] class generation failed:", e, t);
+		}
+		for (let { css: e, rootCssList: t } of o) {
+			e && (i.css = e);
+			for (let e of t) {
+				if (!e) continue;
+				let t = /^\s*@property\s+(--[\w-]+)/.exec(e)?.[1] ?? e;
+				i.roots.push({
+					css: e,
+					dedupeKey: t,
+					refs: b(e)
+				});
+			}
+		}
+		return i.css && (i.key = a(i.css), i.refs = b(i.css)), this.cacheSize > 0 && (this.classCache.size >= this.cacheSize && this.classCache.delete(this.classCache.keys().next().value), this.classCache.set(e, i)), i;
+	}
+	generateCssForClasses(e) {
+		return e.map((e) => ({
+			className: e,
+			css: this.generateCss(e)
+		}));
+	}
+	uniqueRoots(e) {
+		let t = /* @__PURE__ */ new Set();
+		return e.filter(({ dedupeKey: e }) => !t.has(e) && !!t.add(e));
+	}
+	sortRules(t) {
+		return t.map((e, t) => ({
+			entry: e,
+			i: t
+		})).sort((t, n) => e(t.entry.key, n.entry.key) || t.i - n.i).map(({ entry: e }) => e);
+	}
+	themeVarsBlock(e, t) {
+		let n = e;
+		if (n.length === 0) return "";
+		let r = this.themeDefs;
+		if (!r) {
+			r = this.themeDefs = /* @__PURE__ */ new Map();
+			for (let e of this.context.themeToCssVars().matchAll(/^\s*(--[\w-]+):\s*(.+);$/gm)) r.set(e[1], e[2]);
+		}
+		let i = /* @__PURE__ */ new Map();
+		for (; n.length;) {
+			let e = n.pop(), a = r.get(e);
+			a === void 0 || i.has(e) || t?.has(e) || (i.set(e, a), n.push(...b(a)));
+		}
+		return i.size === 0 ? "" : ":root,:host {\n" + [...i].map(([e, t]) => `  ${e}: ${t};`).join("\n") + "\n}";
+	}
 };
+//#endregion
+export { o as SSR_STYLE_ATTRIBUTE, x as ServerRuntime, y as ssrStyleTag };

package/dist/ssr.d.cts

@@ -0,0 +1,38 @@
+/**
+ * #268: SSR helpers: class extraction from HTML, parsing a build stylesheet into what it already
+ * defines (classes, theme vars, @property, @keyframes, @layer order), and the marked <style> tag the
+ * browser runtime recognises. Text only: no DOM, no CSS parser dependency.
+ */
+/** Attribute that marks the server sheet. `@barocss/browser` adopts the rules of `<style data-barocss-ssr>`. */
+export declare const SSR_STYLE_ATTRIBUTE = "data-barocss-ssr";
+/** Decode the HTML character references an attribute value may contain. */
+export declare function decodeHtmlEntities(s: string): string;
+/**
+ * Class names from every `class` attribute in `html`, first-seen order, deduplicated. Handles double,
+ * single and unquoted values, any whitespace and character references; ignores comments and the
+ * contents of `<script>` and `<style>`.
+ */
+export declare function extractClasses(html: string): string[];
+/** What a build stylesheet already defines. */
+export interface CssDefinitions {
+    /** Classes that lead a selector (the #210 rule: `.p-4`, `.md\:p-4` in @media, `.hover\:x:hover`). */
+    classes: Set<string>;
+    /** Custom properties declared in `:root` / `:host` blocks. */
+    vars: Set<string>;
+    /** `@property` names. */
+    properties: Set<string>;
+    /** `@keyframes` names. */
+    keyframes: Set<string>;
+    /** Whether the sheet has a top-level `@layer a, b;` order statement. */
+    layerStatement: boolean;
+}
+/**
+ * Parse CSS text (e.g. Tailwind or BaroCSS build output) into the names it defines. A small brace
+ * scanner that honours comments, strings and escapes; nested rules and @layer/@media/@supports groups
+ * are walked. Same leading-class rule as the browser's #210 `skipExisting`.
+ */
+export declare function parseCssDefinitions(css: string): CssDefinitions;
+/** `<style data-barocss-ssr>` around `css`; a `</style` inside the CSS is neutralised. */
+export declare function ssrStyleTag(css: string, options?: {
+    nonce?: string;
+}): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barocss/server",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/barocss/barocss.git",
@@ -11,9 +11,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.es.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     }
   },
   "files": [
@@ -26,10 +31,10 @@
   },
   "dependencies": {
     "jsdom": "^26.1.0",
-    "@barocss/kit": "0.8.1"
+    "@barocss/kit": "0.9.0"
   },
   "devDependencies": {
-    "vite": "^7.1.3",
+    "vite": "^8.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^5.0.2"
   },