@pyreon/styler 0.19.0 → 0.21.0

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import * as _$_pyreon_core0 from "@pyreon/core";
 import { ComponentFn, VNode, VNodeChild } from "@pyreon/core";
 
 //#region src/ThemeProvider.d.ts
@@ -16,7 +15,7 @@ type Theme = DefaultTheme & Record<string, unknown>;
  * - String-equality memoization (same CSS class = no DOM update)
  * - Untracked resolve (no exponential cascade)
  */
-declare const ThemeContext: _$_pyreon_core0.ReactiveContext<Theme>;
+declare const ThemeContext: import("@pyreon/core").ReactiveContext<Theme>;
 /**
  * Read the current theme. Returns the theme value (calls the accessor).
  * Inside a reactive scope (computed/effect), this tracks theme changes.
@@ -216,6 +215,33 @@ declare class StyleSheet {
   insertGlobal(cssText: string): void;
   /** Returns collected CSS for SSR as a complete `<style>` tag string. */
   getStyleTag(): string;
+  /**
+   * Returns the collected SSR rules as a raw array (one entry per
+   * top-level rule, already `@layer`-wrapped + class-prefixed exactly as
+   * `insert()` produced them). Used by the compile-time rocketstyle
+   * collapse resolver: it renders a component under SSR, reads the rules
+   * here, and the build emits an idempotent `injectRules()` call so the
+   * collapsed `_tpl()` site is self-sufficient (no prior runtime mount
+   * needed to populate the sheet). A copy — callers must not mutate the
+   * internal buffer.
+   */
+  getStyleRules(): readonly string[];
+  private injectedBundles;
+  /**
+   * Inject pre-resolved CSS rule text (from `getStyleRules()` captured at
+   * build time by the rocketstyle-collapse resolver) directly into the
+   * live sheet. Unlike `insert()` this does NOT re-hash — the class names
+   * are already baked into `rules` and into the collapsed `_tpl()` HTML;
+   * re-hashing would produce a different class and break the contract.
+   * Idempotent by `key` (the resolver's FNV hash of the bundle).
+   */
+  injectRules(rules: readonly string[], key: string): void;
+  /**
+   * Test-only: live `cssRules.length` (0 in SSR). Mirrors runtime-dom's
+   * `_tplCacheSize()` test-only-accessor convention; lets injectRules /
+   * eviction tests assert without reaching into the private sheet.
+   */
+  ruleCountForTest(): number;
   /** Returns collected CSS rules as a raw string (useful for streaming SSR). */
   getStyles(): string;
   /** Check if any buffered SSR rules use @layer wrapping. */

package/lib/index.js

@@ -9,6 +9,8 @@ const _countSink$2 = globalThis;
 * deferred until a styled component renders (or until explicitly resolved).
 */
 var CSSResult = class {
+	strings;
+	values;
 	constructor(strings, values) {
 		this.strings = strings;
 		this.values = values;
@@ -712,6 +714,50 @@ var StyleSheet = class {
 		if (this.ssrBuffer.length === 0) return `<style ${ATTR}=""></style>`;
 		return `<style ${ATTR}="">${((this.hasLayeredRules() ? "@layer elements, rocketstyle;" : this.layer ? `@layer ${this.layer};` : "") + this.ssrBuffer.join("")).replace(/<\/style/gi, "<\\/style")}</style>`;
 	}
+	/**
+	* Returns the collected SSR rules as a raw array (one entry per
+	* top-level rule, already `@layer`-wrapped + class-prefixed exactly as
+	* `insert()` produced them). Used by the compile-time rocketstyle
+	* collapse resolver: it renders a component under SSR, reads the rules
+	* here, and the build emits an idempotent `injectRules()` call so the
+	* collapsed `_tpl()` site is self-sufficient (no prior runtime mount
+	* needed to populate the sheet). A copy — callers must not mutate the
+	* internal buffer.
+	*/
+	getStyleRules() {
+		return this.ssrBuffer.slice();
+	}
+	injectedBundles = /* @__PURE__ */ new Set();
+	/**
+	* Inject pre-resolved CSS rule text (from `getStyleRules()` captured at
+	* build time by the rocketstyle-collapse resolver) directly into the
+	* live sheet. Unlike `insert()` this does NOT re-hash — the class names
+	* are already baked into `rules` and into the collapsed `_tpl()` HTML;
+	* re-hashing would produce a different class and break the contract.
+	* Idempotent by `key` (the resolver's FNV hash of the bundle).
+	*/
+	injectRules(rules, key) {
+		if (this.injectedBundles.has(key)) return;
+		this.injectedBundles.add(key);
+		if (this.isSSR) {
+			for (const rule of rules) this.ssrBuffer.push(rule);
+			return;
+		}
+		if (!this.sheet) return;
+		for (const rule of rules) try {
+			this.sheet.insertRule(rule, this.sheet.cssRules.length);
+		} catch (_e) {
+			if (__DEV__) console.warn("[styler] injectRules: failed to insert collapsed rule:", rule, _e);
+		}
+	}
+	/**
+	* Test-only: live `cssRules.length` (0 in SSR). Mirrors runtime-dom's
+	* `_tplCacheSize()` test-only-accessor convention; lets injectRules /
+	* eviction tests assert without reaching into the private sheet.
+	*/
+	ruleCountForTest() {
+		return this.sheet?.cssRules.length ?? 0;
+	}
 	/** Returns collected CSS rules as a raw string (useful for streaming SSR). */
 	getStyles() {
 		if (this.ssrBuffer.length === 0) return "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Lightweight CSS-in-JS engine for Pyreon",
   "license": "MIT",
   "repository": {
@@ -43,8 +43,8 @@
   },
   "devDependencies": {
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/test-utils": "^0.13.6",
-    "@pyreon/typescript": "^0.19.0",
+    "@pyreon/test-utils": "^0.13.8",
+    "@pyreon/typescript": "^0.21.0",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.3.0"
   },
@@ -52,7 +52,7 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.19.0",
-    "@pyreon/reactivity": "^0.19.0"
+    "@pyreon/core": "^0.21.0",
+    "@pyreon/reactivity": "^0.21.0"
   }
 }

package/src/__tests__/inject-rules.browser.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { createSheet } from '../sheet'
+
+// Layer 1 of the P0 rocketstyle-collapse slice: the styler injects
+// pre-resolved rule text (captured at build time by the collapse
+// resolver) into the LIVE sheet, idempotently, WITHOUT re-hashing — the
+// class names are already baked into the rules AND into the collapsed
+// _tpl() HTML, so a re-hash would break the contract.
+
+describe('StyleSheet.injectRules (real browser)', () => {
+  it('inserts pre-resolved rules into the live sheet verbatim (no re-hash)', () => {
+    const s = createSheet()
+    const before = s.ruleCountForTest()
+    s.injectRules(['.pyr-abc123{color:rgb(1,2,3)}'], 'k1')
+    expect(s.ruleCountForTest()).toBe(before + 1)
+    // Class name is preserved exactly — proves no re-hash happened.
+    const probe = document.createElement('div')
+    probe.className = 'pyr-abc123'
+    document.body.appendChild(probe)
+    expect(getComputedStyle(probe).color).toBe('rgb(1, 2, 3)')
+    probe.remove()
+  })
+
+  it('is idempotent by key — re-injecting the same bundle adds nothing', () => {
+    const s = createSheet()
+    s.injectRules(['.pyr-dup{color:red}', '.pyr-dup2{color:blue}'], 'dup')
+    const afterFirst = s.ruleCountForTest()
+    s.injectRules(['.pyr-dup{color:red}', '.pyr-dup2{color:blue}'], 'dup')
+    s.injectRules(['.pyr-dup{color:red}', '.pyr-dup2{color:blue}'], 'dup')
+    expect(s.ruleCountForTest()).toBe(afterFirst)
+  })
+
+  it('distinct keys inject independently', () => {
+    const s = createSheet()
+    const before = s.ruleCountForTest()
+    s.injectRules(['.pyr-x{margin:1px}'], 'kx')
+    s.injectRules(['.pyr-y{margin:2px}'], 'ky')
+    expect(s.ruleCountForTest()).toBe(before + 2)
+  })
+})

package/src/__tests__/static-styler-resolve-cost.test.ts

@@ -0,0 +1,160 @@
+/**
+ * Measurement gate: per-mount cost of a fully-static `styled()` component.
+ *
+ * BACKGROUND. "Proposed compiler win #2 — static styler extraction" theorised
+ * that a fully-static styled component (`styled('div')`\`color: red\``, no
+ * function interpolations) wastes a per-mount `styler.resolve`, and that a
+ * bounded runtime memo slice could be carved out of the (multi-week,
+ * roadmap-scale) compile-time extraction effort. This gate MEASURES that
+ * premise with the real `styler.resolve` / `styler.staticVNode.hit` /
+ * `styler.sheet.insert*` perf counters and DISPROVES it for the runtime
+ * layer: the static path is already optimal.
+ *
+ * WHAT THE COUNTERS PROVE (the contrast IS the proof — self-discriminating,
+ * no fake fix to revert; same shape as the static-text baking gate):
+ *
+ *   Fully-static `styled('div')`\`color: red\`` (values.length === 0):
+ *     - `createStyledComponent` takes `raw = strings[0]` — `resolve()` is
+ *       NEVER called → `styler.resolve` === 0 for the lifetime.
+ *     - `sheet.insert` fires EXACTLY ONCE at component-creation time
+ *       (definition, not mount) → `styler.sheet.insert` === 1.
+ *     - Every mount with no extra props returns the pre-built
+ *       `cachedEmptyVNode` → `styler.staticVNode.hit` === N, with ZERO
+ *       additional resolve / sheet work per mount.
+ *
+ *   Contrast — function-interpolated `styled('div')`\`color: ${p => p.c}\``
+ *   with NO `$rocketstyle` / `$element` identity (the only shape that DOES
+ *   re-resolve per call): `styler.resolve` === N. This is CORRECT, not waste
+ *   — the CSS genuinely depends on per-call props; and real-app shapes
+ *   (rocketstyle dimensions, Element `$element` interning) already hit
+ *   `classCache` / `elClassCache` so they collapse to ~0 (proven elsewhere:
+ *   PR #344 dimension memo, the `$element` interning gate). So #2's runtime
+ *   layer needs no fix; the remaining #2 surface is purely compile-time /
+ *   bundle (don't ship the styled wrapper + sheet.insert for provably-static
+ *   CSS at all) — that is the roadmap item, deliberately NOT half-built here.
+ *
+ * Bisect note: there is intentionally no fix to revert. The discriminating
+ * assertion is `static.resolve === 0 && dynamic.resolve === N` in the SAME
+ * run — if the static path ever regressed to per-mount resolve, the static
+ * block's `toBe(0)` fails while the dynamic block still passes, pinpointing
+ * the regression to the static fast path specifically.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { sheet } from '../sheet'
+import { styled } from '../styled'
+
+type Sink = { __pyreon_count__?: (name: string, n?: number) => void }
+const g = globalThis as Sink
+
+let counts: Map<string, number>
+
+const get = (name: string): number => counts.get(name) ?? 0
+
+beforeEach(() => {
+  counts = new Map()
+  g.__pyreon_count__ = (name: string, n = 1) => {
+    counts.set(name, (counts.get(name) ?? 0) + n)
+  }
+})
+
+afterEach(() => {
+  delete g.__pyreon_count__
+  // clearAll (not reset) — fires onSheetClear so styled.tsx's
+  // staticComponentCache / _hotCache reset between cases; otherwise the
+  // single-entry hot cache leaks a prior case's component.
+  sheet.clearAll()
+})
+
+const N = 100
+
+describe('static styled() per-mount cost (measurement gate)', () => {
+  it('a fully-static component resolves ZERO times and inserts ONCE, regardless of mount count', () => {
+    // Distinct source-location template literal → its own
+    // TemplateStringsArray identity (independent of every other case).
+    const Comp = styled('div')`
+      color: red;
+      padding: 4px;
+    `
+
+    // The sheet.insert at *definition* time already happened above. Snapshot
+    // AFTER definition so the per-mount measurement is isolated from the
+    // one-time creation cost.
+    const insertsAtDefinition = get('styler.sheet.insert')
+    expect(insertsAtDefinition).toBe(1) // exactly one — at creation, not mount
+    expect(get('styler.resolve')).toBe(0) // values.length===0 → raw=strings[0], no resolve()
+
+    for (let i = 0; i < N; i++) Comp({})
+
+    // THE PROOF: N mounts added ZERO resolves and ZERO new sheet inserts.
+    expect(get('styler.resolve')).toBe(0)
+    expect(get('styler.sheet.insert')).toBe(1) // still just the creation insert
+    expect(get('styler.sheet.insert.hit')).toBe(0) // never re-inserted
+    // Every mount took the pre-built cachedEmptyVNode fast path.
+    expect(get('styler.staticVNode.hit')).toBe(N)
+  })
+
+  it('two distinct static components: 2 inserts total, 0 resolves, N/2 hits each', () => {
+    const A = styled('div')`
+      color: blue;
+    `
+    const B = styled('span')`
+      color: green;
+    `
+    expect(get('styler.sheet.insert')).toBe(2) // one per definition
+    expect(get('styler.resolve')).toBe(0)
+
+    for (let i = 0; i < N / 2; i++) {
+      A({})
+      B({})
+    }
+
+    expect(get('styler.resolve')).toBe(0)
+    expect(get('styler.sheet.insert')).toBe(2)
+    expect(get('styler.staticVNode.hit')).toBe(N) // N/2 + N/2
+  })
+
+  it('CONTRAST — a function-interpolated styled with no rocketstyle/$element identity DOES resolve per call (correct, not waste)', () => {
+    const Dyn = styled('div')<{ c: string }>`
+      color: ${(p) => p.c};
+    `
+    // No object $rocketstyle / $rocketstate / $element on rawProps → neither
+    // classCache nor elClassCache can fire; doResolve() runs every call.
+    // Same prop value each call → cssText identical → sheet dedups (hit).
+    for (let i = 0; i < N; i++) Dyn({ c: 'red' })
+
+    expect(get('styler.resolve')).toBe(N) // genuinely per-call (CSS depends on props)
+    expect(get('styler.staticVNode.hit')).toBe(0) // never the static fast path
+    // `styler.sheet.insert` counts every insert() CALL (one per mount here);
+    // `.hit` is the dedup subset — identical cssText each call, so all but
+    // the first hit the insertCache and inject NO new DOM rule. The dynamic
+    // path still pays the resolve() + the insert() call-overhead per mount;
+    // only the actual rule injection is deduped. That call-overhead is the
+    // residual the rocketstyle/$element identity caches (classCache /
+    // elClassCache) eliminate in real-app shapes — proven elsewhere.
+    expect(get('styler.sheet.insert')).toBe(N) // one insert() call per mount
+    expect(get('styler.sheet.insert.hit')).toBe(N - 1) // first builds cache, rest dedup
+  })
+
+  it('SELF-DISCRIMINATING — static.resolve===0 AND dynamic.resolve===N in one run', () => {
+    const Static = styled('div')`
+      margin: 8px;
+    `
+    counts = new Map() // isolate from the definition insert
+    for (let i = 0; i < N; i++) Static({})
+    const staticResolve = get('styler.resolve')
+
+    const Dyn = styled('div')<{ c: string }>`
+      color: ${(p) => p.c};
+    `
+    counts = new Map()
+    for (let i = 0; i < N; i++) Dyn({ c: 'blue' })
+    const dynResolve = get('styler.resolve')
+
+    // The discriminator: if the static fast path ever regressed to
+    // per-mount resolve, this is the assertion that pinpoints it — the
+    // static side moves off 0 while the dynamic side stays at N.
+    expect(staticResolve).toBe(0)
+    expect(dynResolve).toBe(N)
+    expect(dynResolve - staticResolve).toBe(N)
+  })
+})

package/src/sheet.ts

@@ -439,6 +439,64 @@ export class StyleSheet {
     return `<style ${ATTR}="">${css}</style>`
   }
 
+  /**
+   * Returns the collected SSR rules as a raw array (one entry per
+   * top-level rule, already `@layer`-wrapped + class-prefixed exactly as
+   * `insert()` produced them). Used by the compile-time rocketstyle
+   * collapse resolver: it renders a component under SSR, reads the rules
+   * here, and the build emits an idempotent `injectRules()` call so the
+   * collapsed `_tpl()` site is self-sufficient (no prior runtime mount
+   * needed to populate the sheet). A copy — callers must not mutate the
+   * internal buffer.
+   */
+  getStyleRules(): readonly string[] {
+    return this.ssrBuffer.slice()
+  }
+
+  // Idempotency guard for injectRules — keyed by the FNV hash the
+  // collapse resolver computes over the rule set. A second injection of
+  // the same resolved bundle (e.g. the module re-evaluated under HMR, or
+  // two collapsed call sites resolving to the same dimension combo) is a
+  // no-op instead of duplicate live `cssRules`.
+  private injectedBundles = new Set<string>()
+
+  /**
+   * Inject pre-resolved CSS rule text (from `getStyleRules()` captured at
+   * build time by the rocketstyle-collapse resolver) directly into the
+   * live sheet. Unlike `insert()` this does NOT re-hash — the class names
+   * are already baked into `rules` and into the collapsed `_tpl()` HTML;
+   * re-hashing would produce a different class and break the contract.
+   * Idempotent by `key` (the resolver's FNV hash of the bundle).
+   */
+  injectRules(rules: readonly string[], key: string): void {
+    if (this.injectedBundles.has(key)) return
+    this.injectedBundles.add(key)
+    if (this.isSSR) {
+      for (const rule of rules) this.ssrBuffer.push(rule)
+      return
+    }
+    if (!this.sheet) return
+    for (const rule of rules) {
+      try {
+        this.sheet.insertRule(rule, this.sheet.cssRules.length)
+      } catch (_e) {
+        if (__DEV__) {
+          // oxlint-disable-next-line no-console
+          console.warn('[styler] injectRules: failed to insert collapsed rule:', rule, _e)
+        }
+      }
+    }
+  }
+
+  /**
+   * Test-only: live `cssRules.length` (0 in SSR). Mirrors runtime-dom's
+   * `_tplCacheSize()` test-only-accessor convention; lets injectRules /
+   * eviction tests assert without reaching into the private sheet.
+   */
+  ruleCountForTest(): number {
+    return this.sheet?.cssRules.length ?? 0
+  }
+
   /** Returns collected CSS rules as a raw string (useful for streaming SSR). */
   getStyles(): string {
     if (this.ssrBuffer.length === 0) return ''