@pyreon/styler 0.23.0 → 0.24.1

package/lib/index.d.ts

@@ -60,6 +60,27 @@ type Interpolation<P extends object = Record<string, unknown>> = string | number
 declare class CSSResult {
   readonly strings: TemplateStringsArray;
   readonly values: Interpolation[];
+  /**
+   * Memoized result of `isDynamic(this)`. Populated on first access from
+   * `shared.ts#isDynamic`. CSSResult instances are typically created once
+   * at module load (one per `css\`...\`` literal) and reused everywhere —
+   * a `styled()` component, a `useCSS` consumer, a nested interpolation,
+   * etc. Lazy-cache avoids rescanning whole sub-trees on every consumer.
+   * Ported from vitus-labs `c483cabc`.
+   */
+  _isDynamic: boolean | undefined;
+  /**
+   * Memoized resolved CSS string for STATIC CSSResults — populated by
+   * `resolveValue` the first time a known-static nested CSSResult is
+   * resolved. Safe because props don't affect output when there are no
+   * function interpolations. Skipped for dynamic CSSResults (the resolved
+   * string depends on props each call). Common pattern: a shared static
+   * snippet interpolated into many dynamic components — pre-cache, that
+   * snippet was re-resolved per-render of every consumer. Ported from
+   * vitus-labs `754cd203`; measured upstream: 2.6M→6.5M ops/s (+149%,
+   * ~2.5× speedup on the 8-repeated-resolve micro).
+   */
+  _staticResolved: string | undefined;
   constructor(strings: TemplateStringsArray, values: Interpolation[]);
   /** Resolve with empty props — useful for static templates, testing, and debugging. */
   toString(): string;
@@ -121,8 +142,7 @@ declare const createGlobalStyle: (strings: TemplateStringsArray, ...values: Inte
  */
 /** FNV-1a offset basis — starting state for streaming hash. */
 declare const HASH_INIT = 2166136261;
-/**
- * Feed a string segment into the running hash state.
+/** Feed a string segment into the running hash state.
  * Streaming: hashUpdate(hashUpdate(HASH_INIT, 'ab'), 'cd') === hash('abcd').
  */
 declare const hashUpdate: (init: number, str: string) => number;

package/lib/index.js

@@ -11,6 +11,27 @@ const _countSink$2 = globalThis;
 var CSSResult = class {
 	strings;
 	values;
+	/**
+	* Memoized result of `isDynamic(this)`. Populated on first access from
+	* `shared.ts#isDynamic`. CSSResult instances are typically created once
+	* at module load (one per `css\`...\`` literal) and reused everywhere —
+	* a `styled()` component, a `useCSS` consumer, a nested interpolation,
+	* etc. Lazy-cache avoids rescanning whole sub-trees on every consumer.
+	* Ported from vitus-labs `c483cabc`.
+	*/
+	_isDynamic = void 0;
+	/**
+	* Memoized resolved CSS string for STATIC CSSResults — populated by
+	* `resolveValue` the first time a known-static nested CSSResult is
+	* resolved. Safe because props don't affect output when there are no
+	* function interpolations. Skipped for dynamic CSSResults (the resolved
+	* string depends on props each call). Common pattern: a shared static
+	* snippet interpolated into many dynamic components — pre-cache, that
+	* snippet was re-resolved per-render of every consumer. Ported from
+	* vitus-labs `754cd203`; measured upstream: 2.6M→6.5M ops/s (+149%,
+	* ~2.5× speedup on the 8-repeated-resolve micro).
+	*/
+	_staticResolved = void 0;
 	constructor(strings, values) {
 		this.strings = strings;
 		this.values = values;
@@ -100,7 +121,13 @@ const normalizeCSS = (css) => {
 const resolveValue = (value, props) => {
 	if (value == null || value === false || value === true) return "";
 	if (typeof value === "function") return resolveValue(value(props), props);
-	if (value instanceof CSSResult) return resolve(value.strings, value.values, props);
+	if (value instanceof CSSResult) {
+		if (value._isDynamic === false) {
+			if (value._staticResolved === void 0) value._staticResolved = resolve(value.strings, value.values, {});
+			return value._staticResolved;
+		}
+		return resolve(value.strings, value.values, props);
+	}
 	if (Array.isArray(value)) {
 		let arrayResult = "";
 		for (let i = 0; i < value.length; i++) arrayResult += resolveValue(value[i], props);
@@ -129,7 +156,7 @@ const css = (strings, ...values) => new CSSResult(strings, values);
 * elements (which causes warnings). Props starting with `$` are
 * transient (styling-only) and are always filtered out.
 */
-const HTML_PROPS = new Set([
+const HTML_PROPS_LIST = [
 	"className",
 	"class",
 	"dangerouslySetInnerHTML",
@@ -311,7 +338,9 @@ const HTML_PROPS = new Set([
 	"value",
 	"width",
 	"wrap"
-]);
+];
+const HTML_PROPS = Object.create(null);
+for (const k of HTML_PROPS_LIST) HTML_PROPS[k] = true;
 /**
 * Filters props for HTML elements. Keeps valid HTML attrs, data-*, aria-*.
 * Rejects unknown props and $-prefixed transient props.
@@ -325,7 +354,7 @@ const filterProps = (props) => {
 			filtered[key] = props[key];
 			continue;
 		}
-		if (HTML_PROPS.has(key)) filtered[key] = props[key];
+		if (key in HTML_PROPS) filtered[key] = props[key];
 	}
 	return filtered;
 };
@@ -373,7 +402,7 @@ const buildProps = (rawProps, generatedCls, isDOM, customFilter) => {
 			copyDescriptor(key);
 			continue;
 		}
-		if (HTML_PROPS.has(key)) copyDescriptor(key);
+		if (key in HTML_PROPS) copyDescriptor(key);
 	}
 	return result;
 };
@@ -387,7 +416,13 @@ const buildProps = (rawProps, generatedCls, isDOM, customFilter) => {
 const isDynamic = (v) => {
 	if (typeof v === "function") return true;
 	if (Array.isArray(v)) return v.some(isDynamic);
-	if (v instanceof CSSResult) return v.values.some(isDynamic);
+	if (v instanceof CSSResult) {
+		const cached = v._isDynamic;
+		if (cached !== void 0) return cached;
+		const r = v.values.some(isDynamic);
+		v._isDynamic = r;
+		return r;
+	}
 	return false;
 };
 
@@ -402,16 +437,12 @@ const isDynamic = (v) => {
 /** FNV-1a offset basis — starting state for streaming hash. */
 const HASH_INIT = 2166136261;
 const FNV_PRIME = 16777619;
-/**
-* Feed a string segment into the running hash state.
+/** Feed a string segment into the running hash state.
 * Streaming: hashUpdate(hashUpdate(HASH_INIT, 'ab'), 'cd') === hash('abcd').
 */
 const hashUpdate = (init, str) => {
 	let h = init;
-	for (let i = 0; i < str.length; i++) {
-		h ^= str.charCodeAt(i);
-		h = Math.imul(h, FNV_PRIME);
-	}
+	for (let i = 0; i < str.length; i++) h = Math.imul(h ^ str.charCodeAt(i), FNV_PRIME);
 	return h;
 };
 /** Finalize a hash state into a base-36 class name suffix. */
@@ -565,13 +596,14 @@ var StyleSheet = class {
 		};
 		const atRules = [];
 		const baseParts = [];
+		const len = cssText.length;
 		let depth = 0;
 		let atStart = -1;
 		let lastBase = 0;
-		for (let i = 0; i < cssText.length; i++) {
-			const ch = cssText[i];
-			if (ch === "{") depth++;
-			else if (ch === "}") {
+		for (let i = 0; i < len; i++) {
+			const ch = cssText.charCodeAt(i);
+			if (ch === 123) depth++;
+			else if (ch === 125) {
 				depth--;
 				if (depth === 0 && atStart >= 0) {
 					const openBrace = cssText.indexOf("{", atStart);
@@ -581,7 +613,7 @@ var StyleSheet = class {
 					atStart = -1;
 					lastBase = i + 1;
 				}
-			} else if (depth === 0 && ch === "@" && atStart < 0) {
+			} else if (depth === 0 && ch === 64 && atStart < 0) {
 				const remaining = cssText.slice(i, i + 20);
 				if (/^@(?:media|supports|container)\b/.test(remaining)) {
 					const baseBefore = cssText.slice(lastBase, i).trim();
@@ -676,12 +708,13 @@ var StyleSheet = class {
 	*/
 	splitRules(cssText) {
 		const rules = [];
+		const len = cssText.length;
 		let depth = 0;
 		let start = 0;
-		for (let i = 0; i < cssText.length; i++) {
-			const ch = cssText[i];
-			if (ch === "{") depth++;
-			else if (ch === "}") {
+		for (let i = 0; i < len; i++) {
+			const ch = cssText.charCodeAt(i);
+			if (ch === 123) depth++;
+			else if (ch === 125) {
 				depth--;
 				if (depth === 0) {
 					const rule = cssText.slice(start, i + 1).trim();
@@ -897,7 +930,7 @@ nativeCompat(ThemeProvider);
 const createGlobalStyle = (strings, ...values) => {
 	if (!values.some(isDynamic)) {
 		const cssText = normalizeCSS(resolve(strings, values, {}));
-		if (cssText.trim()) sheet.insertGlobal(cssText);
+		if (cssText.length > 0) sheet.insertGlobal(cssText);
 		const StaticGlobal = () => null;
 		return StaticGlobal;
 	}
@@ -907,7 +940,7 @@ const createGlobalStyle = (strings, ...values) => {
 			...props,
 			theme
 		}));
-		if (cssText.trim()) sheet.insertGlobal(cssText);
+		if (cssText.length > 0) sheet.insertGlobal(cssText);
 		return null;
 	};
 	return DynamicGlobal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/styler",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "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.10",
-    "@pyreon/typescript": "^0.23.0",
+    "@pyreon/test-utils": "^0.13.11",
+    "@pyreon/typescript": "^0.24.1",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -52,7 +52,7 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.23.0",
-    "@pyreon/reactivity": "^0.23.0"
+    "@pyreon/core": "^0.24.1",
+    "@pyreon/reactivity": "^0.24.1"
   }
 }

package/src/__tests__/resolve.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest"
 import { css } from "../css"
 import { CSSResult, normalizeCSS, resolve, resolveValue } from "../resolve"
+import { isDynamic } from "../shared"
 
 // Helper to create a TemplateStringsArray
 const tsa = (strings: readonly string[]): TemplateStringsArray => {
@@ -247,3 +248,61 @@ describe("normalizeCSS", () => {
     })
   })
 })
+
+// Behavioural lock-in for the CSSResult._staticResolved cache (ported from
+// vitus-labs `754cd203` + lock-in `60fc25c1`). Common pattern: a shared
+// static snippet interpolated into many dynamic components. Without this
+// cache the snippet's resolve work was paid once per dynamic render of
+// every consumer; with it, the resolve fires once per snippet, total.
+describe("CSSResult._staticResolved cache", () => {
+  it("populates _staticResolved on first resolveValue of a known-static CSSResult", () => {
+    const inner = css`color: red;`
+    // Pre-classify as static via isDynamic (the same call shared.ts makes
+    // at styled-component creation time).
+    isDynamic(inner)
+    expect(inner._isDynamic).toBe(false)
+    expect(inner._staticResolved).toBe(undefined)
+
+    resolveValue(inner, {})
+    expect(inner._staticResolved).toBe("color: red;")
+  })
+
+  it("returns cached _staticResolved on subsequent resolveValue calls", () => {
+    const inner = css`padding: 12px;`
+    isDynamic(inner)
+    resolveValue(inner, {})
+    expect(inner._staticResolved).toBe("padding: 12px;")
+
+    // Mutate values to a sentinel that would change the resolved output if
+    // recomputed. The cache MUST return the prior result.
+    ;(inner as unknown as { values: unknown[] }).values = ["SENTINEL"]
+    expect(resolveValue(inner, {})).toBe("padding: 12px;")
+  })
+
+  it("does NOT cache dynamic CSSResults (props vary per call)", () => {
+    const dyn = css`color: ${(p: Record<string, unknown>) => p.c as string};`
+    isDynamic(dyn)
+    expect(dyn._isDynamic).toBe(true)
+
+    // Resolve twice with different props; cache should not be populated.
+    resolveValue(dyn, { c: "red" })
+    expect(dyn._staticResolved).toBe(undefined)
+    resolveValue(dyn, { c: "blue" })
+    expect(dyn._staticResolved).toBe(undefined)
+  })
+
+  it("skips cache when _isDynamic is undefined (not yet classified)", () => {
+    // Construct a CSSResult directly without going through isDynamic.
+    // resolveValue's cache check is `_isDynamic === false` (strict), so an
+    // unclassified CSSResult falls through to the regular resolve path
+    // — the regular path takes the SECOND branch (`return resolve(...)`)
+    // and does NOT populate the cache.
+    const tpl = Object.assign(["color: ", ";"], {
+      raw: ["color: ", ";"],
+    }) as unknown as TemplateStringsArray
+    const r = new CSSResult(tpl, ["red"])
+    expect(r._isDynamic).toBe(undefined)
+    expect(resolveValue(r, {})).toBe("color: red;")
+    expect(r._staticResolved).toBe(undefined) // cache stays unpopulated
+  })
+})

package/src/__tests__/shared.test.ts

@@ -88,4 +88,46 @@ describe('isDynamic', () => {
     )
     expect(isDynamic(result)).toBe(true)
   })
+
+  // Behavioural lock-in for the CSSResult._isDynamic memoization (ported
+  // from vitus-labs `c483cabc` + lock-in `60fc25c1`). Without these tests
+  // a future regression that removed the cache would only show up as a
+  // perf regression, never as a test failure.
+  describe('CSSResult _isDynamic memoization', () => {
+    it('populates _isDynamic on first call for dynamic templates', () => {
+      const r = css`color: ${() => 'red'};`
+      expect(r._isDynamic).toBe(undefined)
+      isDynamic(r)
+      expect(r._isDynamic).toBe(true)
+    })
+
+    it('populates _isDynamic on first call for static templates', () => {
+      const r = css`color: ${'red'};`
+      expect(r._isDynamic).toBe(undefined)
+      isDynamic(r)
+      expect(r._isDynamic).toBe(false)
+    })
+
+    it('returns cached result on subsequent calls without rescanning values', () => {
+      const r = css`color: ${() => 'red'};`
+      const first = isDynamic(r)
+      expect(first).toBe(true)
+      expect(r._isDynamic).toBe(true)
+
+      // Mutate values to a sentinel that would invert the answer if rescanned.
+      // The memoized path must NOT consult `values` again — it should return
+      // the cached `_isDynamic` directly.
+      ;(r as unknown as { values: unknown[] }).values = ['static-only']
+      expect(isDynamic(r)).toBe(true) // still uses cached value, not rescan
+    })
+
+    it('memoizes nested CSSResults independently', () => {
+      const inner = css`color: ${() => 'red'};`
+      const outer = css`${inner}`
+      isDynamic(outer)
+      // Recursing through outer populates inner too.
+      expect(inner._isDynamic).toBe(true)
+      expect(outer._isDynamic).toBe(true)
+    })
+  })
 })

package/src/forward.ts

@@ -4,8 +4,15 @@
  * transient (styling-only) and are always filtered out.
  */
 
-// Common HTML attributes, event handlers, and ARIA/data attributes
-const HTML_PROPS = new Set([
+// Common HTML attributes, event handlers, and ARIA/data attributes.
+//
+// Using a plain object with `key in HTML_PROPS` instead of `Set.has(key)`:
+// V8 inlines `in` checks via hidden-class lookups (the object has a fixed
+// shape at module load and never changes), which is meaningfully faster
+// than going through the Set protocol on hot prop-filter paths. Measured
+// upstream (vitus-labs `be471b19`): +19% on the 5-lookup mix benchmark
+// (4 hits + 1 miss).
+const HTML_PROPS_LIST = [
   // Core props
   'className',
   'class',
@@ -190,7 +197,13 @@ const HTML_PROPS = new Set([
   'value',
   'width',
   'wrap',
-])
+] as const
+
+// Build the lookup object once at module load. `null`-prototype keeps the
+// object's hidden class lean and means `in` checks don't accidentally pick
+// up `Object.prototype` keys.
+const HTML_PROPS: Record<string, true> = Object.create(null)
+for (const k of HTML_PROPS_LIST) HTML_PROPS[k] = true
 
 /**
  * Filters props for HTML elements. Keeps valid HTML attrs, data-*, aria-*.
@@ -212,8 +225,9 @@ export const filterProps = (props: Record<string, unknown>): Record<string, unkn
       continue
     }
 
-    // Keep known HTML props
-    if (HTML_PROPS.has(key)) {
+    // Keep known HTML props — `in` against the null-prototype lookup
+    // object beats `Set.has` on the hot DOM-filter path.
+    if (key in HTML_PROPS) {
       filtered[key] = props[key]
     }
   }
@@ -288,7 +302,7 @@ export const buildProps = (
       copyDescriptor(key)
       continue
     }
-    if (HTML_PROPS.has(key)) copyDescriptor(key)
+    if (key in HTML_PROPS) copyDescriptor(key)
   }
   return result
 }

package/src/globalStyle.ts

@@ -26,8 +26,11 @@ export const createGlobalStyle = (
   if (!hasDynamicValues) {
     const cssText = normalizeCSS(resolve(strings, values, {}))
 
-    // Inject into sheet immediately
-    if (cssText.trim()) sheet.insertGlobal(cssText)
+    // Inject into sheet immediately. `normalizeCSS` already strips
+    // leading/trailing whitespace, so a length check is equivalent to the
+    // prior `.trim()` (no O(n) whitespace scan, no string allocation).
+    // Ported from vitus-labs `be471b19`.
+    if (cssText.length > 0) sheet.insertGlobal(cssText)
 
     const StaticGlobal: ComponentFn = () => null
     return StaticGlobal
@@ -39,7 +42,9 @@ export const createGlobalStyle = (
     const allProps = { ...props, theme }
     const cssText = normalizeCSS(resolve(strings, values, allProps))
 
-    if (cssText.trim()) sheet.insertGlobal(cssText)
+    // Length check — `normalizeCSS` already trims. Ported from
+    // vitus-labs `be471b19`.
+    if (cssText.length > 0) sheet.insertGlobal(cssText)
 
     return null
   }

package/src/hash.ts

@@ -10,15 +10,13 @@ export const HASH_INIT = 2166136261
 
 const FNV_PRIME = 16777619
 
-/**
- * Feed a string segment into the running hash state.
+/** Feed a string segment into the running hash state.
  * Streaming: hashUpdate(hashUpdate(HASH_INIT, 'ab'), 'cd') === hash('abcd').
  */
 export const hashUpdate = (init: number, str: string): number => {
   let h = init
   for (let i = 0; i < str.length; i++) {
-    h ^= str.charCodeAt(i)
-    h = Math.imul(h, FNV_PRIME)
+    h = Math.imul(h ^ str.charCodeAt(i), FNV_PRIME)
   }
   return h
 }

package/src/resolve.ts

@@ -40,6 +40,29 @@ export type Interpolation<P extends object = Record<string, unknown>> =
  * deferred until a styled component renders (or until explicitly resolved).
  */
 export class CSSResult {
+  /**
+   * Memoized result of `isDynamic(this)`. Populated on first access from
+   * `shared.ts#isDynamic`. CSSResult instances are typically created once
+   * at module load (one per `css\`...\`` literal) and reused everywhere —
+   * a `styled()` component, a `useCSS` consumer, a nested interpolation,
+   * etc. Lazy-cache avoids rescanning whole sub-trees on every consumer.
+   * Ported from vitus-labs `c483cabc`.
+   */
+  _isDynamic: boolean | undefined = undefined
+
+  /**
+   * Memoized resolved CSS string for STATIC CSSResults — populated by
+   * `resolveValue` the first time a known-static nested CSSResult is
+   * resolved. Safe because props don't affect output when there are no
+   * function interpolations. Skipped for dynamic CSSResults (the resolved
+   * string depends on props each call). Common pattern: a shared static
+   * snippet interpolated into many dynamic components — pre-cache, that
+   * snippet was re-resolved per-render of every consumer. Ported from
+   * vitus-labs `754cd203`; measured upstream: 2.6M→6.5M ops/s (+149%,
+   * ~2.5× speedup on the 8-repeated-resolve micro).
+   */
+  _staticResolved: string | undefined = undefined
+
   constructor(
     readonly strings: TemplateStringsArray,
     readonly values: Interpolation[],
@@ -173,8 +196,21 @@ export const resolveValue = (value: Interpolation, props: Record<string, any>):
   // function interpolation → call with props/theme context, resolve result
   if (typeof value === 'function') return resolveValue(value(props) as Interpolation, props)
 
-  // nested CSSResult → recursively resolve
-  if (value instanceof CSSResult) return resolve(value.strings, value.values, props)
+  // nested CSSResult → recursively resolve, with static-result memoization.
+  // When `_isDynamic === false` (populated by shared.ts#isDynamic at styled
+  // component creation), the resolved string is independent of props and can
+  // be cached on the instance. Saves re-walking strings/values for every
+  // consumer of a shared static snippet. Ported from vitus-labs `754cd203`;
+  // measured upstream: ~2.5× speedup on 8-repeated-resolve micro.
+  if (value instanceof CSSResult) {
+    if (value._isDynamic === false) {
+      if (value._staticResolved === undefined) {
+        value._staticResolved = resolve(value.strings, value.values, {})
+      }
+      return value._staticResolved
+    }
+    return resolve(value.strings, value.values, props)
+  }
 
   // array of results (e.g. from makeItResponsive's breakpoints.map())
   if (Array.isArray(value)) {

package/src/shared.ts

@@ -7,6 +7,16 @@ import { CSSResult, type Interpolation } from './resolve'
 export const isDynamic = (v: Interpolation): boolean => {
   if (typeof v === 'function') return true
   if (Array.isArray(v)) return v.some(isDynamic)
-  if (v instanceof CSSResult) return v.values.some(isDynamic)
+  if (v instanceof CSSResult) {
+    // Memoize per-instance — CSSResults are created once at module level
+    // (one per `css\`...\`` literal) and reused across many `styled()` /
+    // `useCSS()` / nested-interpolation checks. Avoids rescanning whole
+    // sub-trees on every consumer. Ported from vitus-labs `c483cabc`.
+    const cached = v._isDynamic
+    if (cached !== undefined) return cached
+    const r = v.values.some(isDynamic)
+    v._isDynamic = r
+    return r
+  }
   return false
 }

package/src/sheet.ts

@@ -218,16 +218,21 @@ export class StyleSheet {
 
     const atRules: string[] = []
     const baseParts: string[] = []
+    const len = cssText.length
     let depth = 0
     let atStart = -1
     let lastBase = 0
 
-    for (let i = 0; i < cssText.length; i++) {
-      const ch = cssText[i]
+    // `charCodeAt(i)` returns a primitive int; `cssText[i]` allocates a
+    // fresh 1-char string in V8 per iteration. On long stylesheets with
+    // at-rule blocks the per-char allocation dominates. Ported from
+    // vitus-labs `c483cabc`.
+    for (let i = 0; i < len; i++) {
+      const ch = cssText.charCodeAt(i)
 
-      if (ch === '{') {
+      if (ch === 123 /* { */) {
         depth++
-      } else if (ch === '}') {
+      } else if (ch === 125 /* } */) {
         depth--
         if (depth === 0 && atStart >= 0) {
           // End of a tracked at-rule block — extract and wrap with selector
@@ -240,7 +245,7 @@ export class StyleSheet {
           atStart = -1
           lastBase = i + 1
         }
-      } else if (depth === 0 && ch === '@' && atStart < 0) {
+      } else if (depth === 0 && ch === 64 /* @ */ && atStart < 0) {
         // Check if this starts a splittable at-rule (not @keyframes, @font-face, etc.)
         const remaining = cssText.slice(i, i + 20)
         if (/^@(?:media|supports|container)\b/.test(remaining)) {
@@ -377,13 +382,16 @@ export class StyleSheet {
    */
   private splitRules(cssText: string): string[] {
     const rules: string[] = []
+    const len = cssText.length
     let depth = 0
     let start = 0
 
-    for (let i = 0; i < cssText.length; i++) {
-      const ch = cssText[i]
-      if (ch === '{') depth++
-      else if (ch === '}') {
+    // `charCodeAt(i)` returns a primitive int; `cssText[i]` allocates a
+    // fresh 1-char string per iteration. Ported from vitus-labs `c483cabc`.
+    for (let i = 0; i < len; i++) {
+      const ch = cssText.charCodeAt(i)
+      if (ch === 123 /* { */) depth++
+      else if (ch === 125 /* } */) {
         depth--
         if (depth === 0) {
           const rule = cssText.slice(start, i + 1).trim()