@bamboocss/generator 1.12.3 → 1.13.1

package/LICENSE.md

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2023 Segun Adebayo
+Copyright (c) 2026 Gajus Kuizinas
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 documentation files (the "Software"), to deal in the Software without restriction, including without limitation the

package/dist/index.cjs

@@ -22,6 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 //#endregion
 let _bamboocss_core = require("@bamboocss/core");
+let _bamboocss_logger = require("@bamboocss/logger");
 let _bamboocss_shared = require("@bamboocss/shared");
 let ts_pattern = require("ts-pattern");
 let outdent = require("outdent");
@@ -30,7 +31,6 @@ let javascript_stringify = require("javascript-stringify");
 let _bamboocss_is_valid_prop = require("@bamboocss/is-valid-prop");
 let pluralize = require("pluralize");
 pluralize = __toESM(pluralize);
-let _bamboocss_logger = require("@bamboocss/logger");
 let postcss = require("postcss");
 postcss = __toESM(postcss);
 //#region src/artifacts/js/conditions.ts
@@ -164,9 +164,15 @@ function generateCssFn(ctx) {
     }
 
     export declare const css: CssFunction;
+
+    /**
+     * Internal. Emitted for the source transform, which rewrites a single dynamic style
+     * leaf into a call to this. Not part of the authoring API.
+     */
+    export declare const cssLeaf: (prefix: string, prop: string, value: unknown) => string;
     `,
 		js: outdent.outdent`
-    ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
+    ${ctx.file.import("cloneStyles, createCss, createMergeCss, hypenateProperty, leafClass, memo, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const utilities = "${utility.entries().map(([prop, className]) => {
@@ -217,8 +223,19 @@ function generateCssFn(ctx) {
     }
 
     const cssFn = createCss(context)
-    export const css = (...styles) => cssFn(mergeCss(...styles))
-    css.raw = (...styles) => mergeCss(...styles)
+    export const css = /* @__PURE__ */ memo((...styles) => cssFn(mergeCss(...styles)))
+    // The merged result is cached and shared, so a caller mutating a nested
+    // condition object would otherwise poison it for everyone after them.
+    css.raw = (...styles) => cloneStyles(mergeCss(...styles))
+
+    // Emitted for the source transform, which rewrites a single dynamic style leaf into a
+    // call to this rather than leaving a \`css()\` behind. \`prefix\` is the class up to the
+    // value, resolved at build time; \`prop\` is only used for the shapes \`leafClass\`
+    // declines, which have to run the real thing.
+    export const cssLeaf = (prefix, prop, value) => {
+      const className = leafClass(prefix, value)
+      return className === undefined ? css({ [prop]: value }) : className
+    }
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -253,7 +270,7 @@ function generateStringLiteralCssFn(ctx) {
     export declare const css: CssFunction;
     `,
 		js: outdent.outdent`
-    ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
+    ${ctx.file.import("astish, cloneStyles, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
     ${ctx.file.import("finalizeConditions, sortConditions", "./conditions")}
 
     function transform(prop, value) {
@@ -283,7 +300,9 @@ function generateStringLiteralCssFn(ctx) {
 
     const fn = (style) => (isObject(style) ? style : astish(style[0]))
     export const css = (...styles) => cssFn(mergeProps(...styles.filter(Boolean).map(fn)))
-    css.raw = (...styles) => mergeProps(...styles.filter(Boolean).map(fn))
+    // Same independence guarantee as the object-syntax css.raw(), so the public
+    // API behaves identically across both syntaxes.
+    css.raw = (...styles) => cloneStyles(mergeProps(...styles.filter(Boolean).map(fn)))
     `
 	};
 }
@@ -292,7 +311,7 @@ function generateStringLiteralCssFn(ctx) {
 function generateCvaFn(ctx) {
 	return {
 		js: outdent.outdent`
-    ${ctx.file.import("compact, mergeProps, memo, splitProps, uniq", "../helpers")}
+    ${ctx.file.import("cloneStyles, compact, mergeProps, memo, splitProps, uniq", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
     const defaults = (conf) => ({
@@ -348,7 +367,7 @@ function generateCvaFn(ctx) {
         __cva__: true,
         variantMap,
         variantKeys,
-        raw: resolve,
+        raw: (...args) => cloneStyles(resolve(...args)),
         config,
         merge,
         splitVariantProps,
@@ -424,7 +443,7 @@ function generateCx() {
 var content$11 = "//#region src/astish.ts\nconst newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nconst ruleClean = /\\/\\*[^]*?\\*\\/|  +/g;\nconst ruleNewline = /\\n+/g;\nconst empty = \" \";\nconst astish = (val, tree = [{}]) => {\n	if (!val) return tree[0];\n	let block, left;\n	while (block = newRule.exec(val.replace(ruleClean, \"\"))) if (block[4]) tree.shift();\n	else if (block[3]) {\n		left = block[3].replace(ruleNewline, empty).trim();\n		if (!left.includes(\"&\") && !left.startsWith(\"@\")) left = \"& \" + left;\n		tree.unshift(tree[0][left] = tree[0][left] || {});\n	} else tree[0][block[1]] = block[2].replace(ruleNewline, empty).trim();\n	return tree[0];\n};\n//#endregion\nexport { astish };\n";
 //#endregion
 //#region src/artifacts/generated/helpers.mjs.json
-var content$10 = "//#region src/assert.ts\nfunction isObject(value) {\n	return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\nconst isObjectOrArray = (obj) => typeof obj === \"object\" && obj !== null;\n//#endregion\n//#region src/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\n//#endregion\n//#region src/condition.ts\nconst isBaseCondition = (v) => v === \"base\";\nfunction filterBaseConditions(c) {\n	return c.slice().filter((v) => !isBaseCondition(v));\n}\n//#endregion\n//#region src/hash.ts\nfunction toChar(code) {\n	return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n	let name = \"\";\n	let x;\n	for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toChar(x % 52) + name;\n	return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n	let i = x.length;\n	while (i) h = h * 33 ^ x.charCodeAt(--i);\n	return h;\n}\nfunction toHash(value) {\n	return toName(toPhash(5381, value) >>> 0);\n}\n//#endregion\n//#region src/important.ts\nconst importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n	return typeof value === \"string\" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n	return typeof value === \"string\" ? value.replace(importantRegex, \"\").trim() : value;\n}\nfunction withoutSpace(str) {\n	return typeof str === \"string\" ? str.replaceAll(\" \", \"_\") : str;\n}\n//#endregion\n//#region src/memo.ts\nconst memo = (fn) => {\n	const cache = /* @__PURE__ */ new Map();\n	const get = (...args) => {\n		const key = JSON.stringify(args);\n		if (cache.has(key)) return cache.get(key);\n		const result = fn(...args);\n		cache.set(key, result);\n		return result;\n	};\n	return get;\n};\n//#endregion\n//#region src/merge-props.ts\nconst MERGE_OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\nfunction mergeProps(...sources) {\n	return sources.reduce((prev, obj) => {\n		if (!obj) return prev;\n		Object.keys(obj).forEach((key) => {\n			if (MERGE_OMIT.has(key)) return;\n			const prevValue = prev[key];\n			const value = obj[key];\n			if (isObject(prevValue) && isObject(value)) prev[key] = mergeProps(prevValue, value);\n			else prev[key] = value;\n		});\n		return prev;\n	}, {});\n}\n//#endregion\n//#region src/walk-object.ts\nconst isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n	const { stop, getKey } = options;\n	function inner(value, path = []) {\n		if (isObjectOrArray(value)) {\n			const result = {};\n			for (const [prop, child] of Object.entries(value)) {\n				const key = getKey?.(prop, child) ?? prop;\n				const childPath = [...path, key];\n				if (stop?.(value, childPath)) return predicate(value, path);\n				const next = inner(child, childPath);\n				if (isNotNullish(next)) result[key] = next;\n			}\n			return result;\n		}\n		return predicate(value, path);\n	}\n	return inner(target);\n}\nfunction mapObject(obj, fn) {\n	if (Array.isArray(obj)) return obj.map((value) => fn(value));\n	if (!isObject(obj)) return fn(obj);\n	return walkObject(obj, (value) => fn(value));\n}\n//#endregion\n//#region src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n	return values.reduce((acc, current, index) => {\n		const key = breakpoints[index];\n		if (current != null) acc[key] = current;\n		return acc;\n	}, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\n	return walkObject(styles, (value) => {\n		return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n	}, {\n		stop: (value) => Array.isArray(value),\n		getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n	});\n}\n//#endregion\n//#region src/classname.ts\nconst fallbackCondition = {\n	shift: (v) => v,\n	finalize: (v) => v,\n	breakpoints: { keys: [] }\n};\nconst sanitize = (value) => typeof value === \"string\" ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\nconst ENTRY_SEP = \"]___[\";\nconst COND_SEP = \"<___>\";\nfunction createCss(context) {\n	const { utility, hash, grouped, conditions: conds = fallbackCondition } = context;\n	const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join(\"-\");\n	const hashFn = (conditions, className) => {\n		let result;\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			result = formatClassName(utility.toHash(baseArray, toHash));\n		} else result = [...conds.finalize(conditions), formatClassName(className)].join(\":\");\n		return result;\n	};\n	if (grouped) return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const hashes = [];\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const [prop, ...allConditions] = conds.shift(paths);\n			const conditions = filterBaseConditions(allConditions);\n			const parts = [`${prop}${ENTRY_SEP}value:${value}`];\n			if (conditions.length) parts.push(`cond:${conditions.join(COND_SEP)}`);\n			hashes.push(parts.join(ENTRY_SEP));\n		});\n		if (hashes.length === 0) return \"\";\n		hashes.sort();\n		const groupId = hashes.join(\"|\");\n		return formatClassName(utility.toHash([\"grouped\", groupId], toHash));\n	});\n	return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const classNames = /* @__PURE__ */ new Set();\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const important = isImportant(value);\n			const [prop, ...allConditions] = conds.shift(paths);\n			let className = hashFn(filterBaseConditions(allConditions), utility.transform(prop, withoutImportant(sanitize(value))).className);\n			if (important) className = `${className}!`;\n			classNames.add(className);\n		});\n		return Array.from(classNames).join(\" \");\n	});\n}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n	function resolve(styles) {\n		const allStyles = compactStyles(...styles);\n		if (allStyles.length === 1) return allStyles;\n		return allStyles.map((style) => normalizeStyleObject(style, context));\n	}\n	function mergeCss(...styles) {\n		return mergeProps(...resolve(styles));\n	}\n	function assignCss(...styles) {\n		return Object.assign({}, ...resolve(styles));\n	}\n	return {\n		mergeCss: memo(mergeCss),\n		assignCss\n	};\n}\n//#endregion\n//#region src/hypenate-property.ts\nconst wordRegex = /([A-Z])/g;\nconst msRegex = /^ms-/;\nconst hypenateProperty = memo((property) => {\n	if (property.startsWith(\"--\")) return property;\n	return property.replace(wordRegex, \"-$1\").replace(msRegex, \"-ms-\").toLowerCase();\n});\n//#endregion\n//#region src/is-css-function.ts\nconst fnRegExp = new RegExp(`^(${[\n	\"min\",\n	\"max\",\n	\"clamp\",\n	\"calc\"\n].join(\"|\")})\\\\(.*\\\\)`);\nconst isCssFunction = (v) => typeof v === \"string\" && fnRegExp.test(v);\n//#endregion\n//#region src/is-css-unit.ts\nconst lengthUnitsPattern = `(?:${\"cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%\".split(\",\").join(\"|\")})`;\nconst lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nconst isCssUnit = (v) => typeof v === \"string\" && lengthRegExp.test(v);\n//#endregion\n//#region src/is-css-var.ts\nconst isCssVar = (v) => typeof v === \"string\" && /^var\\(--.+\\)$/.test(v);\n//#endregion\n//#region src/pattern-fns.ts\nconst patternFns = {\n	map: mapObject,\n	isCssFunction,\n	isCssVar,\n	isCssUnit\n};\nconst getPatternStyles = (pattern, styles) => {\n	if (!pattern?.defaultValues) return styles;\n	const defaults = typeof pattern.defaultValues === \"function\" ? pattern.defaultValues(styles) : pattern.defaultValues;\n	return Object.assign({}, defaults, compact(styles));\n};\n//#endregion\n//#region src/slot.ts\nconst getSlotRecipes = (recipe = {}) => {\n	const init = (slot) => ({\n		className: [recipe.className, slot].filter(Boolean).join(\"__\"),\n		base: recipe.base?.[slot] ?? {},\n		variants: {},\n		defaultVariants: recipe.defaultVariants ?? {},\n		compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n	});\n	const recipeParts = (recipe.slots ?? []).map((slot) => [slot, init(slot)]);\n	for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) recipeParts.forEach(([slot, slotRecipe]) => {\n		slotRecipe.variants[variantsKey] ??= {};\n		slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n	});\n	return Object.fromEntries(recipeParts);\n};\nconst getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({\n	...compoundVariant,\n	css: compoundVariant.css[slotName]\n}));\n//#endregion\n//#region src/split-props.ts\nfunction splitProps(props, ...keys) {\n	const descriptors = Object.getOwnPropertyDescriptors(props);\n	const dKeys = Object.keys(descriptors);\n	const split = (k) => {\n		const clone = {};\n		for (let i = 0; i < k.length; i++) {\n			const key = k[i];\n			if (descriptors[key]) {\n				Object.defineProperty(clone, key, descriptors[key]);\n				delete descriptors[key];\n			}\n		}\n		return clone;\n	};\n	const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n	return keys.map(fn).concat(split(dKeys));\n}\n//#endregion\n//#region src/uniq.ts\nconst uniq = (...items) => {\n	const set = items.reduce((acc, currItems) => {\n		if (currItems) currItems.forEach((item) => acc.add(item));\n		return acc;\n	}, /* @__PURE__ */ new Set([]));\n	return Array.from(set);\n};\n//#endregion\nexport { compact, createCss, createMergeCss, filterBaseConditions, getPatternStyles, getSlotCompoundVariant, getSlotRecipes, hypenateProperty, isBaseCondition, isObject, mapObject, memo, mergeProps, patternFns, splitProps, toHash, uniq, walkObject, withoutSpace };\n";
+var content$10 = "//#region src/assert.ts\nfunction isObject(value) {\n	return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\nconst isObjectOrArray = (obj) => typeof obj === \"object\" && obj !== null;\n//#endregion\n//#region src/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\n//#endregion\n//#region src/condition.ts\nconst isBaseCondition = (v) => v === \"base\";\nfunction filterBaseConditions(c) {\n	return c.slice().filter((v) => !isBaseCondition(v));\n}\n//#endregion\n//#region src/hash.ts\nfunction toChar(code) {\n	return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n	let name = \"\";\n	let x;\n	for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toChar(x % 52) + name;\n	return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n	let i = x.length;\n	while (i) h = h * 33 ^ x.charCodeAt(--i);\n	return h;\n}\nfunction toHash(value) {\n	return toName(toPhash(5381, value) >>> 0);\n}\n//#endregion\n//#region src/important.ts\nconst importantRegex = /\\s*!(important)?/i;\n/**\n* Collapse every run of whitespace to a single space, which is what the class name is\n* built from. Exported because `leafClass` has to reproduce this exact pipeline, and a\n* second copy of it would be free to drift from the one `createCss` runs.\n*/\nfunction sanitize(value) {\n	return typeof value === \"string\" ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\n}\nfunction isImportant(value) {\n	return typeof value === \"string\" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n	return typeof value === \"string\" ? value.replace(importantRegex, \"\").trim() : value;\n}\nfunction withoutSpace(str) {\n	return typeof str === \"string\" ? str.replaceAll(\" \", \"_\") : str;\n}\n//#endregion\n//#region src/memo.ts\n/**\n* Bounded argument memo used by the generated runtime (`css`, patterns, `cva`, recipes).\n*\n* Two regimes, picked per call:\n*\n* - Arguments that are flat (objects of primitives) take a cheap structural hash\n*   and are confirmed with an exact comparison, so a hash collision can never\n*   serve the wrong result. This is the shape `css({ ... })` has.\n* - Anything nested falls back to `JSON.stringify`, which V8 does faster than a\n*   JS walk.\n*\n* The second point is the counter-intuitive one, and it has been measured rather\n* than assumed. Extending the structural hash to recurse — so nested styles could\n* take the fast path too — is *slower*, because it trades one native serialization\n* for two JS walks (hash, then the deep equality that confirms it). Over 10k\n* iterations per shape:\n*\n*     shape        stringify   recursive hash + deep equal\n*     flat            1.06ms   2.09ms\n*     _hover          1.00ms   2.16ms\n*     responsive      1.23ms   2.15ms\n*     realistic       2.32ms   5.84ms\n*     nested 3 deep   1.22ms   2.35ms\n*\n* So a nested `css()` call costing several times a flat one is not a defect here.\n* It is the floor for a value-keyed memo in JS, and the way to avoid it is to not\n* make the call — see the build-time fold in `@bamboocss/vite`.\n*\n* Both regimes key on *values*, never on object identity: mutating a style object\n* between calls changes its hash, so the next call misses and recomputes rather\n* than serving a stale class. Keying nested arguments on the identity of the inner\n* objects would skip serialization entirely, but it cannot detect a mutation, and\n* \"same object, different contents\" is exactly what a style object built per render\n* looks like.\n*\n* Both caches are bounded. An unbounded memo is a leak in any long-lived process\n* (SSR), where the set of distinct style objects grows without limit.\n*/\n/**\n* Distinct hashes held per memoized function before the cache rotates.\n*\n* This bounds *buckets*, not entries: a bucket keeps up to `MAX_BUCKET` colliding\n* argument lists, so the ceiling is `MAX_ENTRIES * MAX_BUCKET` live entries, and\n* twice that across both generations, since the previous one is retained until the\n* next rotation. Collisions are rare in practice, so the realistic figure is close\n* to `MAX_ENTRIES` — but the worst case is what matters when sizing a long-lived\n* process, so state it plainly.\n*\n* Rotation beats evicting the oldest key: single-key eviction is worst-case for a\n* working set that cycles, because it drops exactly the entry about to be needed.\n* Measured on a cycling set of 20k styles, one-at-a-time eviction cost ~719ns/op\n* against ~189ns unbounded, while rotation holds ~274ns. On realistic skewed\n* access rotation is at or below the unbounded cost.\n*/\nconst MAX_ENTRIES = 1e3;\n/** Entries kept per hash bucket, to bound the cost of a collision scan. */\nconst MAX_BUCKET = 8;\n/**\n* DJB2 over the arguments' own keys and primitive values.\n* Returns `null` for anything nested, which routes the call to the string key.\n*/\nconst flatHashOrNull = (args) => {\n	let h = 5381;\n	for (let a = 0; a < args.length; a++) {\n		const obj = args[a];\n		if (obj === null || typeof obj !== \"object\") {\n			const t = typeof obj;\n			if (t === \"string\") for (let i = 0; i < obj.length; i++) h = h * 33 ^ obj.charCodeAt(i);\n			else if (t === \"number\") h = h * 33 ^ (obj | 0);\n			else if (t === \"boolean\") h = h * 33 ^ (obj ? 991 : 997);\n			else h = h * 33 ^ 3;\n			continue;\n		}\n		if (Array.isArray(obj)) h = h * 33 ^ 7;\n		else {\n			const proto = Object.getPrototypeOf(obj);\n			if (proto !== Object.prototype && proto !== null) return null;\n		}\n		for (const k in obj) {\n			const v = obj[k];\n			const tv = typeof v;\n			if (v !== null && tv === \"object\") return null;\n			for (let i = 0; i < k.length; i++) h = h * 33 ^ k.charCodeAt(i);\n			if (tv === \"string\") for (let i = 0; i < v.length; i++) h = h * 33 ^ v.charCodeAt(i);\n			else if (tv === \"number\") h = h * 33 ^ (v | 0);\n			else if (tv === \"boolean\") h = h * 33 ^ (v ? 991 : 997);\n			else h = h * 33 ^ 2;\n		}\n	}\n	return h >>> 0;\n};\n/**\n* Value snapshot of the arguments, taken once at insert.\n*\n* The cache must not hold the caller's objects: a style object can capture a much\n* larger graph, and keeping it alive until the cache rotates changes GC behaviour\n* for code that never asked to be cached. Only the flat path reaches here, so a\n* shallow copy contains primitives only and retains nothing.\n*\n* Comparing against a copy also removes the last way a mutation could be missed.\n* Were the caller's own object stored, `oa === ob` would short-circuit the value\n* comparison, and a mutation that happened to preserve the hash would return the\n* stale entry. Against a copy that check can only ever be true for equal\n* primitives.\n*/\nconst snapshotArgs = (args) => {\n	const values = [];\n	const counts = [];\n	for (let i = 0; i < args.length; i++) {\n		const o = args[i];\n		if (o !== null && typeof o === \"object\") {\n			const copy = Array.isArray(o) ? [] : {};\n			let n = 0;\n			for (const k in o) {\n				copy[k] = o[k];\n				n++;\n			}\n			values.push(copy);\n			counts.push(n);\n		} else {\n			values.push(o);\n			counts.push(0);\n		}\n	}\n	return {\n		values,\n		counts\n	};\n};\n/**\n* Exact match, so a `flatHashOrNull` collision is resolved rather than trusted.\n* `bCounts` is the cached side's key count; comparing against it avoids the\n* `Object.keys()` allocation this would otherwise make on every cache hit.\n*/\nconst flatArgsEqual = (a, b, bCounts) => {\n	if (a.length !== b.length) return false;\n	for (let i = 0; i < a.length; i++) {\n		const oa = a[i];\n		const ob = b[i];\n		if (oa === ob) continue;\n		if (oa === null || ob === null || typeof oa !== \"object\" || typeof ob !== \"object\") return false;\n		if (Array.isArray(oa) !== Array.isArray(ob)) return false;\n		let n = 0;\n		for (const k in oa) {\n			if (oa[k] !== ob[k]) return false;\n			n++;\n		}\n		if (n !== bCounts[i]) return false;\n	}\n	return true;\n};\nconst memo = (fn) => {\n	let buckets = /* @__PURE__ */ new Map();\n	let priorBuckets = /* @__PURE__ */ new Map();\n	let strings = /* @__PURE__ */ new Map();\n	let priorStrings = /* @__PURE__ */ new Map();\n	/**\n	* One scalar argument, keyed directly.\n	*\n	* This is the shape of the hottest callers — `isCssProperty(prop)` runs per prop\n	* per render — and a plain map lookup beats hashing, bucket scanning and\n	* snapshotting for it. Distinct types stay distinct keys, so `1` and `'1'` do not\n	* share an entry.\n	*/\n	let scalars = /* @__PURE__ */ new Map();\n	let priorScalars = /* @__PURE__ */ new Map();\n	const scan = (bucket, args) => {\n		if (bucket) for (let i = 0; i < bucket.length; i++) {\n			const entry = bucket[i];\n			if (flatArgsEqual(args, entry.values, entry.counts)) return entry;\n		}\n	};\n	const get = (...args) => {\n		if (args.length === 1) {\n			const only = args[0];\n			if (only === null || typeof only !== \"object\") {\n				if (scalars.has(only)) return scalars.get(only);\n				if (priorScalars.has(only)) {\n					const promoted = priorScalars.get(only);\n					scalars.set(only, promoted);\n					return promoted;\n				}\n				const out = fn(only);\n				scalars.set(only, out);\n				if (scalars.size > MAX_ENTRIES) {\n					priorScalars = scalars;\n					scalars = /* @__PURE__ */ new Map();\n				}\n				return out;\n			}\n		}\n		const hash = flatHashOrNull(args);\n		if (hash !== null) {\n			let bucket = buckets.get(hash);\n			const hit = scan(bucket, args);\n			if (hit) return hit.out;\n			const priorHit = scan(priorBuckets.get(hash), args);\n			if (priorHit) {\n				if (!bucket) {\n					bucket = [];\n					buckets.set(hash, bucket);\n				}\n				bucket.push(priorHit);\n				if (bucket.length > MAX_BUCKET) bucket.shift();\n				return priorHit.out;\n			}\n			const snap = snapshotArgs(args);\n			const out = fn(...args);\n			if (!bucket) {\n				bucket = [];\n				buckets.set(hash, bucket);\n			}\n			bucket.push({\n				values: snap.values,\n				counts: snap.counts,\n				out\n			});\n			if (bucket.length > MAX_BUCKET) bucket.shift();\n			if (buckets.size > MAX_ENTRIES) {\n				priorBuckets = buckets;\n				buckets = /* @__PURE__ */ new Map();\n			}\n			return out;\n		}\n		const key = JSON.stringify(args);\n		if (strings.has(key)) return strings.get(key);\n		if (priorStrings.has(key)) {\n			const promoted = priorStrings.get(key);\n			strings.set(key, promoted);\n			return promoted;\n		}\n		const out = fn(...args);\n		strings.set(key, out);\n		if (strings.size > MAX_ENTRIES) {\n			priorStrings = strings;\n			strings = /* @__PURE__ */ new Map();\n		}\n		return out;\n	};\n	return get;\n};\n//#endregion\n//#region src/merge-props.ts\nconst MERGE_OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\nfunction mergeProps(...sources) {\n	return sources.reduce((prev, obj) => {\n		if (!obj) return prev;\n		Object.keys(obj).forEach((key) => {\n			if (MERGE_OMIT.has(key)) return;\n			const prevValue = prev[key];\n			const value = obj[key];\n			if (isObject(prevValue) && isObject(value)) prev[key] = mergeProps(prevValue, value);\n			else prev[key] = value;\n		});\n		return prev;\n	}, {});\n}\n//#endregion\n//#region src/walk-object.ts\nconst isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n	const { stop, getKey } = options;\n	function inner(value, path = []) {\n		if (isObjectOrArray(value)) {\n			const result = {};\n			for (const [prop, child] of Object.entries(value)) {\n				const key = getKey?.(prop, child) ?? prop;\n				const childPath = [...path, key];\n				if (stop?.(value, childPath)) return predicate(value, path);\n				const next = inner(child, childPath);\n				if (isNotNullish(next)) result[key] = next;\n			}\n			return result;\n		}\n		return predicate(value, path);\n	}\n	return inner(target);\n}\nfunction mapObject(obj, fn) {\n	if (Array.isArray(obj)) return obj.map((value) => fn(value));\n	if (!isObject(obj)) return fn(obj);\n	return walkObject(obj, (value) => fn(value));\n}\n//#endregion\n//#region src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n	return values.reduce((acc, current, index) => {\n		const key = breakpoints[index];\n		if (current != null) acc[key] = current;\n		return acc;\n	}, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\n	return walkObject(styles, (value) => {\n		return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n	}, {\n		stop: (value) => Array.isArray(value),\n		getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n	});\n}\n//#endregion\n//#region src/classname.ts\nconst fallbackCondition = {\n	shift: (v) => v,\n	finalize: (v) => v,\n	breakpoints: { keys: [] }\n};\nconst ENTRY_SEP = \"]___[\";\nconst COND_SEP = \"<___>\";\nfunction createCss(context) {\n	const { utility, hash, grouped, conditions: conds = fallbackCondition } = context;\n	const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join(\"-\");\n	const hashFn = (conditions, className) => {\n		let result;\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			result = formatClassName(utility.toHash(baseArray, toHash));\n		} else result = [...conds.finalize(conditions), formatClassName(className)].join(\":\");\n		return result;\n	};\n	if (grouped) return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const hashes = [];\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const [prop, ...allConditions] = conds.shift(paths);\n			const conditions = filterBaseConditions(allConditions);\n			const parts = [`${prop}${ENTRY_SEP}value:${value}`];\n			if (conditions.length) parts.push(`cond:${conditions.join(COND_SEP)}`);\n			hashes.push(parts.join(ENTRY_SEP));\n		});\n		if (hashes.length === 0) return \"\";\n		hashes.sort();\n		const groupId = hashes.join(\"|\");\n		return formatClassName(utility.toHash([\"grouped\", groupId], toHash));\n	});\n	return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const classNames = /* @__PURE__ */ new Set();\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const important = isImportant(value);\n			const [prop, ...allConditions] = conds.shift(paths);\n			let className = hashFn(filterBaseConditions(allConditions), utility.transform(prop, withoutImportant(sanitize(value))).className);\n			if (important) className = `${className}!`;\n			classNames.add(className);\n		});\n		return Array.from(classNames).join(\" \");\n	});\n}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n	function resolve(styles) {\n		const allStyles = compactStyles(...styles);\n		if (allStyles.length === 1) return allStyles;\n		return allStyles.map((style) => normalizeStyleObject(style, context));\n	}\n	function mergeCss(...styles) {\n		return mergeProps(...resolve(styles));\n	}\n	function assignCss(...styles) {\n		return Object.assign({}, ...resolve(styles));\n	}\n	return {\n		mergeCss: memo(mergeCss),\n		assignCss\n	};\n}\n//#endregion\n//#region src/clone-styles.ts\nconst OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\n/**\n* Independent copy of a style object, nested condition blocks included.\n*\n* Merged style objects are cached, so anything handed to user code has to be\n* copied first: a caller mutating what it received would otherwise change what\n* every later caller reads back. `css.raw()` and `cva.raw()` are those boundaries.\n*\n* Kept separate from `mergeProps` deliberately. Merging is on the hot path — it\n* runs on every `css()` cache miss and on every render of a pattern component\n* under `jsxStyleProps: 'minimal'` — and copying there charges every caller for a\n* guarantee only the two `raw()` helpers need. Measured on a realistic style\n* object (5 base properties, 4 condition blocks) that was roughly twice the cost\n* of merging alone.\n*/\nfunction cloneStyles(styles) {\n	if (Array.isArray(styles)) return styles.map((value) => cloneStyles(value));\n	if (!isObject(styles)) return styles;\n	const out = {};\n	for (const key of Object.keys(styles)) {\n		if (OMIT.has(key)) continue;\n		out[key] = cloneStyles(styles[key]);\n	}\n	return out;\n}\n//#endregion\n//#region src/leaf-class.ts\n/**\n* The class a single dynamic style leaf resolves to, given the prefix its property and\n* condition path produce.\n*\n* ## Why this can exist at all\n*\n* `css()` builds a class from the value alone — `utility.transform` is string\n* construction over a static map, and nothing consults which rules were actually emitted.\n* So `css({ color: tone })` already returns `c_<tone>` for a value the extractor never\n* saw, with no CSS behind it. Reproducing that string here cannot be less correct than\n* the call it replaces; it just skips the object literal, the merge and the memo.\n*\n* ## Why it is not a template literal\n*\n* Three shapes do not reduce to `prefix + value`, and all three return `undefined` so the\n* caller runs `css()` instead:\n*\n* - An array is expanded to a responsive object by `normalizeStyleObject`, so it produces\n*   one class per breakpoint rather than one class.\n* - An object is a condition block, walked into for the same reason.\n* - `null` and `undefined` are skipped by the walk entirely, which is an empty string\n*   rather than a class — that one is answered here, since it needs no `css()` call.\n*\n* ## Why the character scan\n*\n* The remaining work — collapsing whitespace, stripping `!important`, turning spaces into\n* underscores — is three regexes, and paying them per call makes this *slower* than a\n* memo hit. Almost no token value contains whitespace or `!`, so one scan for the\n* characters that make any of it necessary sends the common value straight to a\n* concatenation. A false positive only costs the slow path, so the scan errs wide.\n*/\nfunction leafClass(prefix, value) {\n	if (value == null) return \"\";\n	const type = typeof value;\n	if (type === \"number\" || type === \"boolean\") return `${prefix}${value}`;\n	if (type !== \"string\") return void 0;\n	const str = value;\n	for (let index = 0; index < str.length; index++) {\n		const code = str.charCodeAt(index);\n		if (code <= 33 || code === 160 || code === 5760 || code >= 8192) return slowLeaf(prefix, str);\n	}\n	return `${prefix}${str}`;\n}\n/** The full pipeline `createCss` runs, for a value that needs it. */\nfunction slowLeaf(prefix, value) {\n	const important = isImportant(value);\n	const className = `${prefix}${withoutSpace(withoutImportant(sanitize(value)))}`;\n	return important ? `${className}!` : className;\n}\n//#endregion\n//#region src/hypenate-property.ts\nconst wordRegex = /([A-Z])/g;\nconst msRegex = /^ms-/;\nconst hypenateProperty = memo((property) => {\n	if (property.startsWith(\"--\")) return property;\n	return property.replace(wordRegex, \"-$1\").replace(msRegex, \"-ms-\").toLowerCase();\n});\n//#endregion\n//#region src/is-css-function.ts\nconst fnRegExp = new RegExp(`^(${[\n	\"min\",\n	\"max\",\n	\"clamp\",\n	\"calc\"\n].join(\"|\")})\\\\(.*\\\\)`);\nconst isCssFunction = (v) => typeof v === \"string\" && fnRegExp.test(v);\n//#endregion\n//#region src/is-css-unit.ts\nconst lengthUnitsPattern = `(?:${\"cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%\".split(\",\").join(\"|\")})`;\nconst lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nconst isCssUnit = (v) => typeof v === \"string\" && lengthRegExp.test(v);\n//#endregion\n//#region src/is-css-var.ts\nconst isCssVar = (v) => typeof v === \"string\" && /^var\\(--.+\\)$/.test(v);\n//#endregion\n//#region src/pattern-fns.ts\nconst patternFns = {\n	map: mapObject,\n	isCssFunction,\n	isCssVar,\n	isCssUnit\n};\nconst getPatternStyles = (pattern, styles) => {\n	if (!pattern?.defaultValues) return styles;\n	const defaults = typeof pattern.defaultValues === \"function\" ? pattern.defaultValues(styles) : pattern.defaultValues;\n	return Object.assign({}, defaults, compact(styles));\n};\n//#endregion\n//#region src/slot.ts\nconst getSlotRecipes = (recipe = {}) => {\n	const init = (slot) => ({\n		className: [recipe.className, slot].filter(Boolean).join(\"__\"),\n		base: recipe.base?.[slot] ?? {},\n		variants: {},\n		defaultVariants: recipe.defaultVariants ?? {},\n		compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n	});\n	const recipeParts = (recipe.slots ?? []).map((slot) => [slot, init(slot)]);\n	for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) recipeParts.forEach(([slot, slotRecipe]) => {\n		slotRecipe.variants[variantsKey] ??= {};\n		slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n	});\n	return Object.fromEntries(recipeParts);\n};\nconst getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({\n	...compoundVariant,\n	css: compoundVariant.css[slotName]\n}));\n//#endregion\n//#region src/split-props.ts\n/**\n* Deal a props object into one bucket per key group, plus a final bucket for the rest.\n* A key goes to the first group that claims it.\n*\n* ## Why the descriptor is read per key rather than in bulk\n*\n* This used to call `Object.getOwnPropertyDescriptors` for the whole object and\n* `defineProperty` for every key it moved. Copying plain values instead is 2.4–2.9x faster\n* on the shapes that allow it, but it is only correct where props are data — and they are\n* not always. Solid compiles props to accessors, so reading one eagerly runs whatever it\n* wraps: splitting a component's props would construct its children before the surrounding\n* provider exists.\n*\n* So the descriptor is fetched per key, and the value path is taken only when it changes\n* nothing observable. An accessor keeps its laziness, a non-enumerable key keeps its\n* invisibility, and `__proto__` is defined rather than assigned so it stays an own\n* property instead of reaching the prototype setter.\n*\n* The one thing the value path drops is `writable`/`configurable`, so a bucket key taken\n* from frozen props is writable where it used to be frozen. Nothing here relies on that,\n* and preserving it would mean `defineProperty` on the common path — the cost this exists\n* to avoid. Keys that take the descriptor path keep theirs, so a bucket can be\n* inconsistent in that one respect.\n*\n* Key order within a bucket is preserved exactly. It is not cosmetic: `cva` merges\n* variant props in iteration order, and the parser reads the rest bucket as the style\n* props it encodes, so order reaches the emitted CSS.\n*/\nfunction splitProps(props, ...keys) {\n	const allKeys = Object.getOwnPropertyNames(props);\n	const own = new Set(allKeys);\n	const taken = /* @__PURE__ */ new Set();\n	const split = (group) => {\n		const clone = {};\n		for (let i = 0; i < group.length; i++) {\n			const key = group[i];\n			if (taken.has(key) || !own.has(key)) continue;\n			const descriptor = Object.getOwnPropertyDescriptor(props, key);\n			if (!descriptor) continue;\n			if (\"get\" in descriptor || \"set\" in descriptor || !descriptor.enumerable || key === \"__proto__\") Object.defineProperty(clone, key, descriptor);\n			else clone[key] = descriptor.value;\n			taken.add(key);\n		}\n		return clone;\n	};\n	return keys.map((key) => split(Array.isArray(key) ? key : allKeys.filter(key))).concat(split(allKeys));\n}\n//#endregion\n//#region src/uniq.ts\nconst uniq = (...items) => {\n	const set = items.reduce((acc, currItems) => {\n		if (currItems) currItems.forEach((item) => acc.add(item));\n		return acc;\n	}, /* @__PURE__ */ new Set([]));\n	return Array.from(set);\n};\n//#endregion\nexport { cloneStyles, compact, createCss, createMergeCss, filterBaseConditions, getPatternStyles, getSlotCompoundVariant, getSlotRecipes, hypenateProperty, isBaseCondition, isObject, leafClass, mapObject, memo, mergeProps, patternFns, splitProps, toHash, uniq, walkObject, withoutSpace };\n";
 //#endregion
 //#region src/artifacts/generated/normalize-html.mjs.json
 var content$9 = "//#region src/normalize-html.ts\nconst htmlProps = [\n	\"htmlSize\",\n	\"htmlTranslate\",\n	\"htmlWidth\",\n	\"htmlHeight\"\n];\nfunction convert(key) {\n	return htmlProps.includes(key) ? key.replace(\"html\", \"\").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n	return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n//#endregion\nexport { normalizeHTMLProps };\n";
@@ -451,17 +470,19 @@ function generateHelpers(ctx) {
 var content$8 = "//#region src/index.ts\nconst userGenerated = \"\".split(\",\");\nconst allCssProperties = \"WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,cornerShape,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical\".split(\",\").concat(userGenerated);\nconst properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n	const cache = Object.create(null);\n	return (arg) => {\n		if (cache[arg] === void 0) cache[arg] = fn(arg);\n		return cache[arg];\n	};\n}\nconst cssPropertySelectorRegex = /&|@/;\nconst isCssProperty = /* @__PURE__ */ memo((prop) => {\n	return properties.has(prop) || prop.startsWith(\"--\") || cssPropertySelectorRegex.test(prop);\n});\n//#endregion\nexport { allCssProperties, isCssProperty };\n";
 //#endregion
 //#region src/artifacts/js/is-valid-prop.ts
-const cssPropRegex = /var cssPropertiesStr = ".*?";/;
-const memoFnDeclarationRegex = /function memo(.+?)\nvar cssPropertySelectorRegex/s;
+const cssPropListRegex = /const userGenerated = ".*?"\.split\(","\);\s*const allCssProperties = "(.*?)"\.split\(","\)\.concat\(userGenerated\);/;
+const memoFnDeclarationRegex = /function memo(?:.+?)\n((?:var|const|let) cssPropertySelectorRegex)/s;
 function generateIsValidProp(ctx) {
 	if (ctx.isTemplateLiteralSyntax) return;
 	let content = content$8;
-	content = content.replace("var userGeneratedStr = \"\";", `var userGeneratedStr = "${(0, ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "css").exhaustive()}"`);
-	content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
-	if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
-		content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
-		content = content.replace(cssPropRegex, "var cssPropertiesStr = \"\";");
-	} else content = ctx.file.import("memo", "../helpers") + "\n" + content;
+	const propertyList = content.match(cssPropListRegex);
+	if (!propertyList) throw new _bamboocss_shared.BambooError("NOT_FOUND", "Could not find the property list in the prebuilt is-valid-prop module. Its bundled shape has changed.");
+	const userProperties = (0, ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties)).with("minimal", () => ["css"]).with("none", () => ["css"]).exhaustive();
+	const browserProperties = ctx.jsx.styleProps === "all" ? propertyList[1].split(",") : [];
+	content = content.replace(cssPropListRegex, () => `const allCssProperties = "${(0, _bamboocss_shared.uniq)(browserProperties, userProperties).join(",")}".split(",");`);
+	content = content.replace(memoFnDeclarationRegex, "$1");
+	if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
+	else content = ctx.file.import("memo", "../helpers") + "\n" + content;
 	content = ctx.file.import("splitProps", "../helpers") + "\n" + content;
 	content += `export const splitCssProps = (props) =>  splitProps(props, isCssProperty)`;
 	return {
@@ -513,6 +534,56 @@ function generatedJsxHelpers(ctx) {
   `) };
 }
 //#endregion
+//#region src/artifacts/js/package-json.ts
+/**
+* The generated output is a plain directory, not an installed package, so bundlers
+* have no `sideEffects` hint for it and must assume every module mutates something.
+* That keeps every module a barrel pulls in — importing a single component from
+* `styled-system/jsx` retains all patterns.
+*
+* The CSS globs are required: `sideEffects: false` alone lets a bundler drop a bare
+* `import 'styled-system/styles.css'`. Both shapes are listed because the stylesheet
+* is emitted at the root (`styles.css`) and, under `splitting`, in `styles/`.
+*
+* `type: module` restates what the directory already is. Adding a package.json makes
+* this directory its own package boundary, so `.js` output would otherwise stop
+* inheriting the consumer's `type` and be re-read as CommonJS; the emitted code is
+* always ESM. It is a no-op for the default `.mjs` extension.
+*
+* `private` is there because the same package boundary makes a workspace glob able to
+* match this directory. It is never published.
+*
+* `name` has to be present for the same reason. This file used to be emitted without
+* one, to keep two outputs in a single workspace from colliding — but a nameless
+* package.json is not a package a workspace scanner skips, it is one it refuses:
+* pnpm, npm and changesets all abort with `missing the "name" field` and no hint as
+* to which directory produced it.
+*
+* The name is derived from `outdir` because that is the only input that is both
+* deterministic and portable — `cwd` is absolute, so putting it here would make the
+* generated output differ per machine. Two projects in one workspace that both keep
+* the default `outdir` therefore still collide, but on a duplicate-name error that
+* names both paths and is resolved by setting `outdir`, rather than on a missing
+* field that points nowhere.
+*/
+function generatePackageJson(ctx) {
+	return { json: JSON.stringify({
+		name: toPackageName(ctx.config.outdir),
+		type: "module",
+		private: true,
+		sideEffects: ["*.css", "**/*.css"]
+	}, null, 2) + "\n" };
+}
+/**
+* `outdir` is a path, npm names are not: it may be nested (`src/styled-system`), and
+* npm rejects uppercase, a leading dot or underscore, and anything outside its
+* url-safe set. Path segments are joined rather than dropped so that nested outputs
+* stay distinct from one another.
+*/
+function toPackageName(outdir) {
+	return outdir.split(/[\\/]/).filter(Boolean).join("-").toLowerCase().replace(/[^a-z0-9\-._]/g, "-").replace(/^[._]+/, "") || "styled-system";
+}
+//#endregion
 //#region src/artifacts/js/pattern.ts
 function generatePattern(ctx, filters) {
 	if (ctx.patterns.isEmpty()) return;
@@ -523,7 +594,7 @@ function generatePattern(ctx, filters) {
 			transform,
 			defaultValues
 		})) ?? "";
-		const helperImports = ["getPatternStyles, patternFns"];
+		const helperImports = ["getPatternStyles, patternFns, memo"];
 		if (patternConfigFn.includes("__spreadValues")) helperImports.push("__spreadValues");
 		if (patternConfigFn.includes("__objRest")) helperImports.push("__objRest");
 		return {
@@ -576,7 +647,7 @@ function generatePattern(ctx, filters) {
       return ${baseName}Config.transform(_styles, patternFns)
     }
 
-    export const ${baseName} = (styles) => css(${styleFnName}(styles))
+    export const ${baseName} = /* @__PURE__ */ memo((styles) => css(${styleFnName}(styles)))
     ${baseName}.raw = ${styleFnName}
     `
 		};
@@ -976,7 +1047,6 @@ function generatePreactJsxFactory(ctx) {
 	return { js: outdent.outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
-    import { useMemo } from 'preact/hooks'
     ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
@@ -1004,11 +1074,13 @@ function generatePreactJsxFactory(ctx) {
         const { as: Element = __base__, unstyled, children, ...restProps } = props
 
 
-        const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
+        // Not memoized, deliberately. \`restProps\` is rest destructuring, so it is a fresh
+        // object on every render and a dependency on it can never match — a memo here is a
+        // guaranteed miss that still costs a hook slot, a deps array and a retained cell.
+        const combinedProps = Object.assign({}, defaultProps, restProps)
 
-        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-        }, [combinedProps])
+        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
+          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
@@ -1836,7 +1908,7 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 function generateReactJsxFactory(ctx) {
 	const { factoryName, componentName } = ctx.jsx;
 	return { js: outdent.outdent`
-    import { createElement, forwardRef, useMemo } from 'react'
+    import { createElement, forwardRef } from 'react'
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1863,11 +1935,13 @@ function generateReactJsxFactory(ctx) {
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         const { as: Element = __base__, unstyled, children, ...restProps } = props
 
-        const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
+        // Not memoized, deliberately. \`restProps\` is rest destructuring, so it is a fresh
+        // object on every render and a dependency on it can never match — a memo here is a
+        // guaranteed miss that still costs a hook slot, a deps array and a retained cell.
+        const combinedProps = Object.assign({}, defaultProps, restProps)
 
-        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-        }, [combinedProps])
+        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
+          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
@@ -4552,8 +4626,8 @@ function generatePropTypes(ctx) {
    *   fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token
    * })
    *
-   * @see https://bamboo-css.com/docs/concepts/writing-styles#stricttokens
-   * @see https://bamboo-css.com/docs/concepts/writing-styles#strictpropertyvalues
+   * @see https://bamboocss.com/docs/concepts/writing-styles#stricttokens
+   * @see https://bamboocss.com/docs/concepts/writing-styles#strictpropertyvalues
    */
   export type WithEscapeHatch<T> = T | \`[\${string}]\` | WithColorOpacityModifier<T> | WithImportant<T>
 
@@ -4565,7 +4639,7 @@ function generatePropTypes(ctx) {
    *   display: 'abc', // ❌ will throw
    * })
    *
-   * @see https://bamboo-css.com/docs/concepts/writing-styles#strictpropertyvalues
+   * @see https://bamboocss.com/docs/concepts/writing-styles#strictpropertyvalues
    */
   export type OnlyKnown<Key, Value> = Value extends boolean
     ? Value
@@ -4981,6 +5055,15 @@ function setupHelpers(ctx) {
 		}]
 	};
 }
+function setupPackageJson(ctx) {
+	return {
+		id: "package.json",
+		files: [{
+			file: "package.json",
+			code: generatePackageJson(ctx).json
+		}]
+	};
+}
 function setupDesignTokens(ctx) {
 	const code = generateTokenJs(ctx);
 	return {
@@ -5436,6 +5519,7 @@ const filterArtifactsFiles = (artifacts, filters) => {
 	});
 };
 const entries = [
+	["package.json", setupPackageJson],
 	["helpers", setupHelpers],
 	["design-tokens", setupDesignTokens],
 	["types-jsx", setupJsxTypes],
@@ -6079,6 +6163,136 @@ var Generator = class extends _bamboocss_core.Context {
 		const decoder = this.decoder.collect(this.encoder);
 		sheet.processDecoder(decoder);
 	};
+	/**
+	* Drop token css variables nothing can reach. Call this only once the sheet holds the
+	* whole stylesheet — a baseline-only sheet has no utilities to reference anything, so
+	* every token would look unused.
+	*
+	* `keep` carries references this cannot see for itself; see `collectTokenReferences`.
+	*/
+	pruneTokens = (sheet, keep) => {
+		if (!this.config.pruneUnusedTokens) return;
+		const layers = sheet.layers;
+		const result = (0, _bamboocss_core.pruneTokenVars)({
+			scan: [
+				layers.reset,
+				layers.base,
+				layers.tokens,
+				layers.recipes,
+				layers.recipes_base,
+				layers.recipes_slots,
+				layers.recipes_slots_base,
+				layers.utilities,
+				layers.compositions
+			],
+			target: layers.tokens,
+			tokenVars: this.getTokenVarNames(),
+			keep: new Set([
+				...this.getAlwaysKeptTokenVars(),
+				...this.getThemeTokenVars(),
+				...keep ?? []
+			])
+		});
+		_bamboocss_logger.logger.debug("prune:tokens", `Removed ${result.removed} unused token css variable(s)`);
+		return result;
+	};
+	/**
+	* Drop `@keyframes` nothing can reach. Same completeness requirement as
+	* `pruneTokens`: the sheet has to hold the whole stylesheet, or every keyframe looks
+	* unused for want of a utility to reference it.
+	*
+	* `keep` carries names this cannot see for itself; see `collectKeyframeReferences`.
+	*/
+	pruneKeyframes = (sheet, keep) => {
+		if (!this.config.pruneUnusedKeyframes) return;
+		const layers = sheet.layers;
+		const keyframeNames = new Set(Object.keys(this.config.theme?.keyframes ?? {}));
+		const result = (0, _bamboocss_core.pruneKeyframes)({
+			scan: [
+				layers.reset,
+				layers.base,
+				layers.tokens,
+				layers.recipes,
+				layers.recipes_base,
+				layers.recipes_slots,
+				layers.recipes_slots_base,
+				layers.utilities,
+				layers.compositions
+			],
+			target: layers.tokens,
+			keyframeNames,
+			keep: new Set([...this.getThemeKeyframeNames(keyframeNames), ...keep ?? []])
+		});
+		_bamboocss_logger.logger.debug("prune:keyframes", `Removed ${result.removed} unused keyframe(s)`);
+		return result;
+	};
+	/**
+	* Keyframes the themes name.
+	*
+	* A theme is emitted as its own artifact and injected at runtime, so its css is not in
+	* the sheet being pruned. A theme that points an animation token at a different
+	* keyframe than the base does — `--animations-enter: fade-in` in the base and
+	* `slide-up` under `dark` — would otherwise have that keyframe removed, because
+	* nothing in the pruned sheet ever names it.
+	*/
+	getThemeKeyframeNames = (keyframeNames) => {
+		const names = /* @__PURE__ */ new Set();
+		const themes = this.config.themes;
+		if (!themes || !keyframeNames.size) return names;
+		for (const themeName of Object.keys(themes)) for (const token of getThemeCss(this, themeName).split(/[^\w-]+/)) if (keyframeNames.has(token)) names.add(token);
+		return names;
+	};
+	/**
+	* Every custom property the token system declares. Used as the allow-list of what may
+	* be removed, so custom properties from `globalCss` are never touched.
+	*/
+	getTokenVarNames = () => {
+		const names = /* @__PURE__ */ new Set();
+		for (const values of this.tokens.view.vars.values()) for (const name of values.keys()) names.add(name);
+		return names;
+	};
+	/**
+	* Everything the themes refer to.
+	*
+	* A theme is emitted as its own artifact and injected at runtime, so its css is not in
+	* the sheet being pruned and nothing there points at what it needs. A theme that maps a
+	* token onto a base colour would otherwise be left referring to a declaration that has
+	* been removed.
+	*/
+	getThemeTokenVars = () => {
+		const names = /* @__PURE__ */ new Set();
+		const themes = this.config.themes;
+		if (!themes) return names;
+		for (const themeName of Object.keys(themes)) for (const name of (0, _bamboocss_shared.cssVarRefs)(getThemeCss(this, themeName))) names.add(name);
+		return names;
+	};
+	/**
+	* Tokens whose javascript value is a `var()` reference rather than a literal.
+	* `token('colors.text')` hands those to the caller as a reference, so the declaration
+	* has to survive whether or not the generated css mentions it. Ordinary tokens resolve
+	* to a literal in javascript and need no such exemption.
+	*
+	* The two cases mirror `generateTokenJs`, which is what decides the value javascript
+	* actually receives:
+	*
+	* - A virtual token, or one carrying a condition, is handed its own `varRef`.
+	* - A negative token is handed `calc(var(--x) * -1)`, so it is a reference too — but to
+	*   the *positive* token's declaration. Its own var is never declared, so the name has
+	*   to come out of the value.
+	*/
+	getAlwaysKeptTokenVars = () => {
+		const names = /* @__PURE__ */ new Set();
+		this.tokens.allTokens.forEach((token) => {
+			const { isVirtual, isNegative, condition, var: varName } = token.extensions;
+			if (isVirtual || condition !== "base") {
+				if (varName) names.add(varName.startsWith("--") ? varName : `--${varName}`);
+				return;
+			}
+			if (!isNegative) return;
+			for (const name of (0, _bamboocss_shared.cssVarRefs)(token.value)) names.add(name);
+		});
+		return names;
+	};
 	getParserCss = (decoder) => {
 		return generateParserCss(this, decoder);
 	};

package/dist/index.d.cts

@@ -29,6 +29,67 @@ declare class Generator extends Context {
   appendLayerParams: (sheet: Stylesheet) => void;
   appendBaselineCss: (sheet: Stylesheet) => void;
   appendParserCss: (sheet: Stylesheet) => void;
+  /**
+   * Drop token css variables nothing can reach. Call this only once the sheet holds the
+   * whole stylesheet — a baseline-only sheet has no utilities to reference anything, so
+   * every token would look unused.
+   *
+   * `keep` carries references this cannot see for itself; see `collectTokenReferences`.
+   */
+  pruneTokens: (sheet: Stylesheet, keep?: Set<string>) => {
+    removed: number;
+    kept: number;
+  } | undefined;
+  /**
+   * Drop `@keyframes` nothing can reach. Same completeness requirement as
+   * `pruneTokens`: the sheet has to hold the whole stylesheet, or every keyframe looks
+   * unused for want of a utility to reference it.
+   *
+   * `keep` carries names this cannot see for itself; see `collectKeyframeReferences`.
+   */
+  pruneKeyframes: (sheet: Stylesheet, keep?: Set<string>) => {
+    removed: number;
+    kept: number;
+  } | undefined;
+  /**
+   * Keyframes the themes name.
+   *
+   * A theme is emitted as its own artifact and injected at runtime, so its css is not in
+   * the sheet being pruned. A theme that points an animation token at a different
+   * keyframe than the base does — `--animations-enter: fade-in` in the base and
+   * `slide-up` under `dark` — would otherwise have that keyframe removed, because
+   * nothing in the pruned sheet ever names it.
+   */
+  private getThemeKeyframeNames;
+  /**
+   * Every custom property the token system declares. Used as the allow-list of what may
+   * be removed, so custom properties from `globalCss` are never touched.
+   */
+  private getTokenVarNames;
+  /**
+   * Everything the themes refer to.
+   *
+   * A theme is emitted as its own artifact and injected at runtime, so its css is not in
+   * the sheet being pruned and nothing there points at what it needs. A theme that maps a
+   * token onto a base colour would otherwise be left referring to a declaration that has
+   * been removed.
+   */
+  private getThemeTokenVars;
+  /**
+   * Tokens whose javascript value is a `var()` reference rather than a literal.
+   * `token('colors.text')` hands those to the caller as a reference, so the declaration
+   * has to survive whether or not the generated css mentions it. Ordinary tokens resolve
+   * to a literal in javascript and need no such exemption.
+   *
+   * The two cases mirror `generateTokenJs`, which is what decides the value javascript
+   * actually receives:
+   *
+   * - A virtual token, or one carrying a condition, is handed its own `varRef`.
+   * - A negative token is handed `calc(var(--x) * -1)`, so it is a reference too — but to
+   *   the *positive* token's declaration. Its own var is never declared, so the name has
+   *   to come out of the value.
+   */
+  private getAlwaysKeptTokenVars;
   getParserCss: (decoder: StyleDecoder) => string;
   getCss: (stylesheet?: Stylesheet) => string;
   /**

package/dist/index.d.mts

@@ -29,6 +29,67 @@ declare class Generator extends Context {
   appendLayerParams: (sheet: Stylesheet) => void;
   appendBaselineCss: (sheet: Stylesheet) => void;
   appendParserCss: (sheet: Stylesheet) => void;
+  /**
+   * Drop token css variables nothing can reach. Call this only once the sheet holds the
+   * whole stylesheet — a baseline-only sheet has no utilities to reference anything, so
+   * every token would look unused.
+   *
+   * `keep` carries references this cannot see for itself; see `collectTokenReferences`.
+   */
+  pruneTokens: (sheet: Stylesheet, keep?: Set<string>) => {
+    removed: number;
+    kept: number;
+  } | undefined;
+  /**
+   * Drop `@keyframes` nothing can reach. Same completeness requirement as
+   * `pruneTokens`: the sheet has to hold the whole stylesheet, or every keyframe looks
+   * unused for want of a utility to reference it.
+   *
+   * `keep` carries names this cannot see for itself; see `collectKeyframeReferences`.
+   */
+  pruneKeyframes: (sheet: Stylesheet, keep?: Set<string>) => {
+    removed: number;
+    kept: number;
+  } | undefined;
+  /**
+   * Keyframes the themes name.
+   *
+   * A theme is emitted as its own artifact and injected at runtime, so its css is not in
+   * the sheet being pruned. A theme that points an animation token at a different
+   * keyframe than the base does — `--animations-enter: fade-in` in the base and
+   * `slide-up` under `dark` — would otherwise have that keyframe removed, because
+   * nothing in the pruned sheet ever names it.
+   */
+  private getThemeKeyframeNames;
+  /**
+   * Every custom property the token system declares. Used as the allow-list of what may
+   * be removed, so custom properties from `globalCss` are never touched.
+   */
+  private getTokenVarNames;
+  /**
+   * Everything the themes refer to.
+   *
+   * A theme is emitted as its own artifact and injected at runtime, so its css is not in
+   * the sheet being pruned and nothing there points at what it needs. A theme that maps a
+   * token onto a base colour would otherwise be left referring to a declaration that has
+   * been removed.
+   */
+  private getThemeTokenVars;
+  /**
+   * Tokens whose javascript value is a `var()` reference rather than a literal.
+   * `token('colors.text')` hands those to the caller as a reference, so the declaration
+   * has to survive whether or not the generated css mentions it. Ordinary tokens resolve
+   * to a literal in javascript and need no such exemption.
+   *
+   * The two cases mirror `generateTokenJs`, which is what decides the value javascript
+   * actually receives:
+   *
+   * - A virtual token, or one carrying a condition, is handed its own `varRef`.
+   * - A negative token is handed `calc(var(--x) * -1)`, so it is a reference too — but to
+   *   the *positive* token's declaration. Its own var is never declared, so the name has
+   *   to come out of the value.
+   */
+  private getAlwaysKeptTokenVars;
   getParserCss: (decoder: StyleDecoder) => string;
   getCss: (stylesheet?: Stylesheet) => string;
   /**

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { Context, Recipes, expandNestedCss, extractParentSelectors, extractTrailingPseudos, stringify } from "@bamboocss/core";
-import { BambooError, capitalize, compact, dashCase, isBoolean, isObject, mapEntries, unionType, walkObject } from "@bamboocss/shared";
+import { Context, Recipes, expandNestedCss, extractParentSelectors, extractTrailingPseudos, pruneKeyframes, pruneTokenVars, stringify } from "@bamboocss/core";
+import { logger } from "@bamboocss/logger";
+import { BambooError, capitalize, compact, cssVarRefs, dashCase, isBoolean, isObject, mapEntries, unionType, uniq, walkObject } from "@bamboocss/shared";
 import { match } from "ts-pattern";
 import outdent$1, { outdent } from "outdent";
 import { stringify as stringify$1 } from "javascript-stringify";
 import { allCssProperties } from "@bamboocss/is-valid-prop";
 import pluralize from "pluralize";
-import { logger } from "@bamboocss/logger";
 import postcss, { CssSyntaxError } from "postcss";
 //#region src/artifacts/js/conditions.ts
 function formatConditionJsDoc(raw) {
@@ -138,9 +138,15 @@ function generateCssFn(ctx) {
     }
 
     export declare const css: CssFunction;
+
+    /**
+     * Internal. Emitted for the source transform, which rewrites a single dynamic style
+     * leaf into a call to this. Not part of the authoring API.
+     */
+    export declare const cssLeaf: (prefix: string, prop: string, value: unknown) => string;
     `,
 		js: outdent`
-    ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
+    ${ctx.file.import("cloneStyles, createCss, createMergeCss, hypenateProperty, leafClass, memo, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
     const utilities = "${utility.entries().map(([prop, className]) => {
@@ -191,8 +197,19 @@ function generateCssFn(ctx) {
     }
 
     const cssFn = createCss(context)
-    export const css = (...styles) => cssFn(mergeCss(...styles))
-    css.raw = (...styles) => mergeCss(...styles)
+    export const css = /* @__PURE__ */ memo((...styles) => cssFn(mergeCss(...styles)))
+    // The merged result is cached and shared, so a caller mutating a nested
+    // condition object would otherwise poison it for everyone after them.
+    css.raw = (...styles) => cloneStyles(mergeCss(...styles))
+
+    // Emitted for the source transform, which rewrites a single dynamic style leaf into a
+    // call to this rather than leaving a \`css()\` behind. \`prefix\` is the class up to the
+    // value, resolved at build time; \`prop\` is only used for the shapes \`leafClass\`
+    // declines, which have to run the real thing.
+    export const cssLeaf = (prefix, prop, value) => {
+      const className = leafClass(prefix, value)
+      return className === undefined ? css({ [prop]: value }) : className
+    }
 
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
@@ -227,7 +244,7 @@ function generateStringLiteralCssFn(ctx) {
     export declare const css: CssFunction;
     `,
 		js: outdent`
-    ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
+    ${ctx.file.import("astish, cloneStyles, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
     ${ctx.file.import("finalizeConditions, sortConditions", "./conditions")}
 
     function transform(prop, value) {
@@ -257,7 +274,9 @@ function generateStringLiteralCssFn(ctx) {
 
     const fn = (style) => (isObject(style) ? style : astish(style[0]))
     export const css = (...styles) => cssFn(mergeProps(...styles.filter(Boolean).map(fn)))
-    css.raw = (...styles) => mergeProps(...styles.filter(Boolean).map(fn))
+    // Same independence guarantee as the object-syntax css.raw(), so the public
+    // API behaves identically across both syntaxes.
+    css.raw = (...styles) => cloneStyles(mergeProps(...styles.filter(Boolean).map(fn)))
     `
 	};
 }
@@ -266,7 +285,7 @@ function generateStringLiteralCssFn(ctx) {
 function generateCvaFn(ctx) {
 	return {
 		js: outdent`
-    ${ctx.file.import("compact, mergeProps, memo, splitProps, uniq", "../helpers")}
+    ${ctx.file.import("cloneStyles, compact, mergeProps, memo, splitProps, uniq", "../helpers")}
     ${ctx.file.import("css, mergeCss", "./css")}
 
     const defaults = (conf) => ({
@@ -322,7 +341,7 @@ function generateCvaFn(ctx) {
         __cva__: true,
         variantMap,
         variantKeys,
-        raw: resolve,
+        raw: (...args) => cloneStyles(resolve(...args)),
         config,
         merge,
         splitVariantProps,
@@ -398,7 +417,7 @@ function generateCx() {
 var content$11 = "//#region src/astish.ts\nconst newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nconst ruleClean = /\\/\\*[^]*?\\*\\/|  +/g;\nconst ruleNewline = /\\n+/g;\nconst empty = \" \";\nconst astish = (val, tree = [{}]) => {\n	if (!val) return tree[0];\n	let block, left;\n	while (block = newRule.exec(val.replace(ruleClean, \"\"))) if (block[4]) tree.shift();\n	else if (block[3]) {\n		left = block[3].replace(ruleNewline, empty).trim();\n		if (!left.includes(\"&\") && !left.startsWith(\"@\")) left = \"& \" + left;\n		tree.unshift(tree[0][left] = tree[0][left] || {});\n	} else tree[0][block[1]] = block[2].replace(ruleNewline, empty).trim();\n	return tree[0];\n};\n//#endregion\nexport { astish };\n";
 //#endregion
 //#region src/artifacts/generated/helpers.mjs.json
-var content$10 = "//#region src/assert.ts\nfunction isObject(value) {\n	return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\nconst isObjectOrArray = (obj) => typeof obj === \"object\" && obj !== null;\n//#endregion\n//#region src/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\n//#endregion\n//#region src/condition.ts\nconst isBaseCondition = (v) => v === \"base\";\nfunction filterBaseConditions(c) {\n	return c.slice().filter((v) => !isBaseCondition(v));\n}\n//#endregion\n//#region src/hash.ts\nfunction toChar(code) {\n	return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n	let name = \"\";\n	let x;\n	for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toChar(x % 52) + name;\n	return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n	let i = x.length;\n	while (i) h = h * 33 ^ x.charCodeAt(--i);\n	return h;\n}\nfunction toHash(value) {\n	return toName(toPhash(5381, value) >>> 0);\n}\n//#endregion\n//#region src/important.ts\nconst importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n	return typeof value === \"string\" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n	return typeof value === \"string\" ? value.replace(importantRegex, \"\").trim() : value;\n}\nfunction withoutSpace(str) {\n	return typeof str === \"string\" ? str.replaceAll(\" \", \"_\") : str;\n}\n//#endregion\n//#region src/memo.ts\nconst memo = (fn) => {\n	const cache = /* @__PURE__ */ new Map();\n	const get = (...args) => {\n		const key = JSON.stringify(args);\n		if (cache.has(key)) return cache.get(key);\n		const result = fn(...args);\n		cache.set(key, result);\n		return result;\n	};\n	return get;\n};\n//#endregion\n//#region src/merge-props.ts\nconst MERGE_OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\nfunction mergeProps(...sources) {\n	return sources.reduce((prev, obj) => {\n		if (!obj) return prev;\n		Object.keys(obj).forEach((key) => {\n			if (MERGE_OMIT.has(key)) return;\n			const prevValue = prev[key];\n			const value = obj[key];\n			if (isObject(prevValue) && isObject(value)) prev[key] = mergeProps(prevValue, value);\n			else prev[key] = value;\n		});\n		return prev;\n	}, {});\n}\n//#endregion\n//#region src/walk-object.ts\nconst isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n	const { stop, getKey } = options;\n	function inner(value, path = []) {\n		if (isObjectOrArray(value)) {\n			const result = {};\n			for (const [prop, child] of Object.entries(value)) {\n				const key = getKey?.(prop, child) ?? prop;\n				const childPath = [...path, key];\n				if (stop?.(value, childPath)) return predicate(value, path);\n				const next = inner(child, childPath);\n				if (isNotNullish(next)) result[key] = next;\n			}\n			return result;\n		}\n		return predicate(value, path);\n	}\n	return inner(target);\n}\nfunction mapObject(obj, fn) {\n	if (Array.isArray(obj)) return obj.map((value) => fn(value));\n	if (!isObject(obj)) return fn(obj);\n	return walkObject(obj, (value) => fn(value));\n}\n//#endregion\n//#region src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n	return values.reduce((acc, current, index) => {\n		const key = breakpoints[index];\n		if (current != null) acc[key] = current;\n		return acc;\n	}, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\n	return walkObject(styles, (value) => {\n		return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n	}, {\n		stop: (value) => Array.isArray(value),\n		getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n	});\n}\n//#endregion\n//#region src/classname.ts\nconst fallbackCondition = {\n	shift: (v) => v,\n	finalize: (v) => v,\n	breakpoints: { keys: [] }\n};\nconst sanitize = (value) => typeof value === \"string\" ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\nconst ENTRY_SEP = \"]___[\";\nconst COND_SEP = \"<___>\";\nfunction createCss(context) {\n	const { utility, hash, grouped, conditions: conds = fallbackCondition } = context;\n	const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join(\"-\");\n	const hashFn = (conditions, className) => {\n		let result;\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			result = formatClassName(utility.toHash(baseArray, toHash));\n		} else result = [...conds.finalize(conditions), formatClassName(className)].join(\":\");\n		return result;\n	};\n	if (grouped) return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const hashes = [];\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const [prop, ...allConditions] = conds.shift(paths);\n			const conditions = filterBaseConditions(allConditions);\n			const parts = [`${prop}${ENTRY_SEP}value:${value}`];\n			if (conditions.length) parts.push(`cond:${conditions.join(COND_SEP)}`);\n			hashes.push(parts.join(ENTRY_SEP));\n		});\n		if (hashes.length === 0) return \"\";\n		hashes.sort();\n		const groupId = hashes.join(\"|\");\n		return formatClassName(utility.toHash([\"grouped\", groupId], toHash));\n	});\n	return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const classNames = /* @__PURE__ */ new Set();\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const important = isImportant(value);\n			const [prop, ...allConditions] = conds.shift(paths);\n			let className = hashFn(filterBaseConditions(allConditions), utility.transform(prop, withoutImportant(sanitize(value))).className);\n			if (important) className = `${className}!`;\n			classNames.add(className);\n		});\n		return Array.from(classNames).join(\" \");\n	});\n}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n	function resolve(styles) {\n		const allStyles = compactStyles(...styles);\n		if (allStyles.length === 1) return allStyles;\n		return allStyles.map((style) => normalizeStyleObject(style, context));\n	}\n	function mergeCss(...styles) {\n		return mergeProps(...resolve(styles));\n	}\n	function assignCss(...styles) {\n		return Object.assign({}, ...resolve(styles));\n	}\n	return {\n		mergeCss: memo(mergeCss),\n		assignCss\n	};\n}\n//#endregion\n//#region src/hypenate-property.ts\nconst wordRegex = /([A-Z])/g;\nconst msRegex = /^ms-/;\nconst hypenateProperty = memo((property) => {\n	if (property.startsWith(\"--\")) return property;\n	return property.replace(wordRegex, \"-$1\").replace(msRegex, \"-ms-\").toLowerCase();\n});\n//#endregion\n//#region src/is-css-function.ts\nconst fnRegExp = new RegExp(`^(${[\n	\"min\",\n	\"max\",\n	\"clamp\",\n	\"calc\"\n].join(\"|\")})\\\\(.*\\\\)`);\nconst isCssFunction = (v) => typeof v === \"string\" && fnRegExp.test(v);\n//#endregion\n//#region src/is-css-unit.ts\nconst lengthUnitsPattern = `(?:${\"cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%\".split(\",\").join(\"|\")})`;\nconst lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nconst isCssUnit = (v) => typeof v === \"string\" && lengthRegExp.test(v);\n//#endregion\n//#region src/is-css-var.ts\nconst isCssVar = (v) => typeof v === \"string\" && /^var\\(--.+\\)$/.test(v);\n//#endregion\n//#region src/pattern-fns.ts\nconst patternFns = {\n	map: mapObject,\n	isCssFunction,\n	isCssVar,\n	isCssUnit\n};\nconst getPatternStyles = (pattern, styles) => {\n	if (!pattern?.defaultValues) return styles;\n	const defaults = typeof pattern.defaultValues === \"function\" ? pattern.defaultValues(styles) : pattern.defaultValues;\n	return Object.assign({}, defaults, compact(styles));\n};\n//#endregion\n//#region src/slot.ts\nconst getSlotRecipes = (recipe = {}) => {\n	const init = (slot) => ({\n		className: [recipe.className, slot].filter(Boolean).join(\"__\"),\n		base: recipe.base?.[slot] ?? {},\n		variants: {},\n		defaultVariants: recipe.defaultVariants ?? {},\n		compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n	});\n	const recipeParts = (recipe.slots ?? []).map((slot) => [slot, init(slot)]);\n	for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) recipeParts.forEach(([slot, slotRecipe]) => {\n		slotRecipe.variants[variantsKey] ??= {};\n		slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n	});\n	return Object.fromEntries(recipeParts);\n};\nconst getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({\n	...compoundVariant,\n	css: compoundVariant.css[slotName]\n}));\n//#endregion\n//#region src/split-props.ts\nfunction splitProps(props, ...keys) {\n	const descriptors = Object.getOwnPropertyDescriptors(props);\n	const dKeys = Object.keys(descriptors);\n	const split = (k) => {\n		const clone = {};\n		for (let i = 0; i < k.length; i++) {\n			const key = k[i];\n			if (descriptors[key]) {\n				Object.defineProperty(clone, key, descriptors[key]);\n				delete descriptors[key];\n			}\n		}\n		return clone;\n	};\n	const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n	return keys.map(fn).concat(split(dKeys));\n}\n//#endregion\n//#region src/uniq.ts\nconst uniq = (...items) => {\n	const set = items.reduce((acc, currItems) => {\n		if (currItems) currItems.forEach((item) => acc.add(item));\n		return acc;\n	}, /* @__PURE__ */ new Set([]));\n	return Array.from(set);\n};\n//#endregion\nexport { compact, createCss, createMergeCss, filterBaseConditions, getPatternStyles, getSlotCompoundVariant, getSlotRecipes, hypenateProperty, isBaseCondition, isObject, mapObject, memo, mergeProps, patternFns, splitProps, toHash, uniq, walkObject, withoutSpace };\n";
+var content$10 = "//#region src/assert.ts\nfunction isObject(value) {\n	return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\nconst isObjectOrArray = (obj) => typeof obj === \"object\" && obj !== null;\n//#endregion\n//#region src/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\n//#endregion\n//#region src/condition.ts\nconst isBaseCondition = (v) => v === \"base\";\nfunction filterBaseConditions(c) {\n	return c.slice().filter((v) => !isBaseCondition(v));\n}\n//#endregion\n//#region src/hash.ts\nfunction toChar(code) {\n	return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n	let name = \"\";\n	let x;\n	for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toChar(x % 52) + name;\n	return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n	let i = x.length;\n	while (i) h = h * 33 ^ x.charCodeAt(--i);\n	return h;\n}\nfunction toHash(value) {\n	return toName(toPhash(5381, value) >>> 0);\n}\n//#endregion\n//#region src/important.ts\nconst importantRegex = /\\s*!(important)?/i;\n/**\n* Collapse every run of whitespace to a single space, which is what the class name is\n* built from. Exported because `leafClass` has to reproduce this exact pipeline, and a\n* second copy of it would be free to drift from the one `createCss` runs.\n*/\nfunction sanitize(value) {\n	return typeof value === \"string\" ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\n}\nfunction isImportant(value) {\n	return typeof value === \"string\" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n	return typeof value === \"string\" ? value.replace(importantRegex, \"\").trim() : value;\n}\nfunction withoutSpace(str) {\n	return typeof str === \"string\" ? str.replaceAll(\" \", \"_\") : str;\n}\n//#endregion\n//#region src/memo.ts\n/**\n* Bounded argument memo used by the generated runtime (`css`, patterns, `cva`, recipes).\n*\n* Two regimes, picked per call:\n*\n* - Arguments that are flat (objects of primitives) take a cheap structural hash\n*   and are confirmed with an exact comparison, so a hash collision can never\n*   serve the wrong result. This is the shape `css({ ... })` has.\n* - Anything nested falls back to `JSON.stringify`, which V8 does faster than a\n*   JS walk.\n*\n* The second point is the counter-intuitive one, and it has been measured rather\n* than assumed. Extending the structural hash to recurse — so nested styles could\n* take the fast path too — is *slower*, because it trades one native serialization\n* for two JS walks (hash, then the deep equality that confirms it). Over 10k\n* iterations per shape:\n*\n*     shape        stringify   recursive hash + deep equal\n*     flat            1.06ms   2.09ms\n*     _hover          1.00ms   2.16ms\n*     responsive      1.23ms   2.15ms\n*     realistic       2.32ms   5.84ms\n*     nested 3 deep   1.22ms   2.35ms\n*\n* So a nested `css()` call costing several times a flat one is not a defect here.\n* It is the floor for a value-keyed memo in JS, and the way to avoid it is to not\n* make the call — see the build-time fold in `@bamboocss/vite`.\n*\n* Both regimes key on *values*, never on object identity: mutating a style object\n* between calls changes its hash, so the next call misses and recomputes rather\n* than serving a stale class. Keying nested arguments on the identity of the inner\n* objects would skip serialization entirely, but it cannot detect a mutation, and\n* \"same object, different contents\" is exactly what a style object built per render\n* looks like.\n*\n* Both caches are bounded. An unbounded memo is a leak in any long-lived process\n* (SSR), where the set of distinct style objects grows without limit.\n*/\n/**\n* Distinct hashes held per memoized function before the cache rotates.\n*\n* This bounds *buckets*, not entries: a bucket keeps up to `MAX_BUCKET` colliding\n* argument lists, so the ceiling is `MAX_ENTRIES * MAX_BUCKET` live entries, and\n* twice that across both generations, since the previous one is retained until the\n* next rotation. Collisions are rare in practice, so the realistic figure is close\n* to `MAX_ENTRIES` — but the worst case is what matters when sizing a long-lived\n* process, so state it plainly.\n*\n* Rotation beats evicting the oldest key: single-key eviction is worst-case for a\n* working set that cycles, because it drops exactly the entry about to be needed.\n* Measured on a cycling set of 20k styles, one-at-a-time eviction cost ~719ns/op\n* against ~189ns unbounded, while rotation holds ~274ns. On realistic skewed\n* access rotation is at or below the unbounded cost.\n*/\nconst MAX_ENTRIES = 1e3;\n/** Entries kept per hash bucket, to bound the cost of a collision scan. */\nconst MAX_BUCKET = 8;\n/**\n* DJB2 over the arguments' own keys and primitive values.\n* Returns `null` for anything nested, which routes the call to the string key.\n*/\nconst flatHashOrNull = (args) => {\n	let h = 5381;\n	for (let a = 0; a < args.length; a++) {\n		const obj = args[a];\n		if (obj === null || typeof obj !== \"object\") {\n			const t = typeof obj;\n			if (t === \"string\") for (let i = 0; i < obj.length; i++) h = h * 33 ^ obj.charCodeAt(i);\n			else if (t === \"number\") h = h * 33 ^ (obj | 0);\n			else if (t === \"boolean\") h = h * 33 ^ (obj ? 991 : 997);\n			else h = h * 33 ^ 3;\n			continue;\n		}\n		if (Array.isArray(obj)) h = h * 33 ^ 7;\n		else {\n			const proto = Object.getPrototypeOf(obj);\n			if (proto !== Object.prototype && proto !== null) return null;\n		}\n		for (const k in obj) {\n			const v = obj[k];\n			const tv = typeof v;\n			if (v !== null && tv === \"object\") return null;\n			for (let i = 0; i < k.length; i++) h = h * 33 ^ k.charCodeAt(i);\n			if (tv === \"string\") for (let i = 0; i < v.length; i++) h = h * 33 ^ v.charCodeAt(i);\n			else if (tv === \"number\") h = h * 33 ^ (v | 0);\n			else if (tv === \"boolean\") h = h * 33 ^ (v ? 991 : 997);\n			else h = h * 33 ^ 2;\n		}\n	}\n	return h >>> 0;\n};\n/**\n* Value snapshot of the arguments, taken once at insert.\n*\n* The cache must not hold the caller's objects: a style object can capture a much\n* larger graph, and keeping it alive until the cache rotates changes GC behaviour\n* for code that never asked to be cached. Only the flat path reaches here, so a\n* shallow copy contains primitives only and retains nothing.\n*\n* Comparing against a copy also removes the last way a mutation could be missed.\n* Were the caller's own object stored, `oa === ob` would short-circuit the value\n* comparison, and a mutation that happened to preserve the hash would return the\n* stale entry. Against a copy that check can only ever be true for equal\n* primitives.\n*/\nconst snapshotArgs = (args) => {\n	const values = [];\n	const counts = [];\n	for (let i = 0; i < args.length; i++) {\n		const o = args[i];\n		if (o !== null && typeof o === \"object\") {\n			const copy = Array.isArray(o) ? [] : {};\n			let n = 0;\n			for (const k in o) {\n				copy[k] = o[k];\n				n++;\n			}\n			values.push(copy);\n			counts.push(n);\n		} else {\n			values.push(o);\n			counts.push(0);\n		}\n	}\n	return {\n		values,\n		counts\n	};\n};\n/**\n* Exact match, so a `flatHashOrNull` collision is resolved rather than trusted.\n* `bCounts` is the cached side's key count; comparing against it avoids the\n* `Object.keys()` allocation this would otherwise make on every cache hit.\n*/\nconst flatArgsEqual = (a, b, bCounts) => {\n	if (a.length !== b.length) return false;\n	for (let i = 0; i < a.length; i++) {\n		const oa = a[i];\n		const ob = b[i];\n		if (oa === ob) continue;\n		if (oa === null || ob === null || typeof oa !== \"object\" || typeof ob !== \"object\") return false;\n		if (Array.isArray(oa) !== Array.isArray(ob)) return false;\n		let n = 0;\n		for (const k in oa) {\n			if (oa[k] !== ob[k]) return false;\n			n++;\n		}\n		if (n !== bCounts[i]) return false;\n	}\n	return true;\n};\nconst memo = (fn) => {\n	let buckets = /* @__PURE__ */ new Map();\n	let priorBuckets = /* @__PURE__ */ new Map();\n	let strings = /* @__PURE__ */ new Map();\n	let priorStrings = /* @__PURE__ */ new Map();\n	/**\n	* One scalar argument, keyed directly.\n	*\n	* This is the shape of the hottest callers — `isCssProperty(prop)` runs per prop\n	* per render — and a plain map lookup beats hashing, bucket scanning and\n	* snapshotting for it. Distinct types stay distinct keys, so `1` and `'1'` do not\n	* share an entry.\n	*/\n	let scalars = /* @__PURE__ */ new Map();\n	let priorScalars = /* @__PURE__ */ new Map();\n	const scan = (bucket, args) => {\n		if (bucket) for (let i = 0; i < bucket.length; i++) {\n			const entry = bucket[i];\n			if (flatArgsEqual(args, entry.values, entry.counts)) return entry;\n		}\n	};\n	const get = (...args) => {\n		if (args.length === 1) {\n			const only = args[0];\n			if (only === null || typeof only !== \"object\") {\n				if (scalars.has(only)) return scalars.get(only);\n				if (priorScalars.has(only)) {\n					const promoted = priorScalars.get(only);\n					scalars.set(only, promoted);\n					return promoted;\n				}\n				const out = fn(only);\n				scalars.set(only, out);\n				if (scalars.size > MAX_ENTRIES) {\n					priorScalars = scalars;\n					scalars = /* @__PURE__ */ new Map();\n				}\n				return out;\n			}\n		}\n		const hash = flatHashOrNull(args);\n		if (hash !== null) {\n			let bucket = buckets.get(hash);\n			const hit = scan(bucket, args);\n			if (hit) return hit.out;\n			const priorHit = scan(priorBuckets.get(hash), args);\n			if (priorHit) {\n				if (!bucket) {\n					bucket = [];\n					buckets.set(hash, bucket);\n				}\n				bucket.push(priorHit);\n				if (bucket.length > MAX_BUCKET) bucket.shift();\n				return priorHit.out;\n			}\n			const snap = snapshotArgs(args);\n			const out = fn(...args);\n			if (!bucket) {\n				bucket = [];\n				buckets.set(hash, bucket);\n			}\n			bucket.push({\n				values: snap.values,\n				counts: snap.counts,\n				out\n			});\n			if (bucket.length > MAX_BUCKET) bucket.shift();\n			if (buckets.size > MAX_ENTRIES) {\n				priorBuckets = buckets;\n				buckets = /* @__PURE__ */ new Map();\n			}\n			return out;\n		}\n		const key = JSON.stringify(args);\n		if (strings.has(key)) return strings.get(key);\n		if (priorStrings.has(key)) {\n			const promoted = priorStrings.get(key);\n			strings.set(key, promoted);\n			return promoted;\n		}\n		const out = fn(...args);\n		strings.set(key, out);\n		if (strings.size > MAX_ENTRIES) {\n			priorStrings = strings;\n			strings = /* @__PURE__ */ new Map();\n		}\n		return out;\n	};\n	return get;\n};\n//#endregion\n//#region src/merge-props.ts\nconst MERGE_OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\nfunction mergeProps(...sources) {\n	return sources.reduce((prev, obj) => {\n		if (!obj) return prev;\n		Object.keys(obj).forEach((key) => {\n			if (MERGE_OMIT.has(key)) return;\n			const prevValue = prev[key];\n			const value = obj[key];\n			if (isObject(prevValue) && isObject(value)) prev[key] = mergeProps(prevValue, value);\n			else prev[key] = value;\n		});\n		return prev;\n	}, {});\n}\n//#endregion\n//#region src/walk-object.ts\nconst isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n	const { stop, getKey } = options;\n	function inner(value, path = []) {\n		if (isObjectOrArray(value)) {\n			const result = {};\n			for (const [prop, child] of Object.entries(value)) {\n				const key = getKey?.(prop, child) ?? prop;\n				const childPath = [...path, key];\n				if (stop?.(value, childPath)) return predicate(value, path);\n				const next = inner(child, childPath);\n				if (isNotNullish(next)) result[key] = next;\n			}\n			return result;\n		}\n		return predicate(value, path);\n	}\n	return inner(target);\n}\nfunction mapObject(obj, fn) {\n	if (Array.isArray(obj)) return obj.map((value) => fn(value));\n	if (!isObject(obj)) return fn(obj);\n	return walkObject(obj, (value) => fn(value));\n}\n//#endregion\n//#region src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n	return values.reduce((acc, current, index) => {\n		const key = breakpoints[index];\n		if (current != null) acc[key] = current;\n		return acc;\n	}, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\n	return walkObject(styles, (value) => {\n		return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n	}, {\n		stop: (value) => Array.isArray(value),\n		getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n	});\n}\n//#endregion\n//#region src/classname.ts\nconst fallbackCondition = {\n	shift: (v) => v,\n	finalize: (v) => v,\n	breakpoints: { keys: [] }\n};\nconst ENTRY_SEP = \"]___[\";\nconst COND_SEP = \"<___>\";\nfunction createCss(context) {\n	const { utility, hash, grouped, conditions: conds = fallbackCondition } = context;\n	const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join(\"-\");\n	const hashFn = (conditions, className) => {\n		let result;\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			result = formatClassName(utility.toHash(baseArray, toHash));\n		} else result = [...conds.finalize(conditions), formatClassName(className)].join(\":\");\n		return result;\n	};\n	if (grouped) return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const hashes = [];\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const [prop, ...allConditions] = conds.shift(paths);\n			const conditions = filterBaseConditions(allConditions);\n			const parts = [`${prop}${ENTRY_SEP}value:${value}`];\n			if (conditions.length) parts.push(`cond:${conditions.join(COND_SEP)}`);\n			hashes.push(parts.join(ENTRY_SEP));\n		});\n		if (hashes.length === 0) return \"\";\n		hashes.sort();\n		const groupId = hashes.join(\"|\");\n		return formatClassName(utility.toHash([\"grouped\", groupId], toHash));\n	});\n	return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const classNames = /* @__PURE__ */ new Set();\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const important = isImportant(value);\n			const [prop, ...allConditions] = conds.shift(paths);\n			let className = hashFn(filterBaseConditions(allConditions), utility.transform(prop, withoutImportant(sanitize(value))).className);\n			if (important) className = `${className}!`;\n			classNames.add(className);\n		});\n		return Array.from(classNames).join(\" \");\n	});\n}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n	function resolve(styles) {\n		const allStyles = compactStyles(...styles);\n		if (allStyles.length === 1) return allStyles;\n		return allStyles.map((style) => normalizeStyleObject(style, context));\n	}\n	function mergeCss(...styles) {\n		return mergeProps(...resolve(styles));\n	}\n	function assignCss(...styles) {\n		return Object.assign({}, ...resolve(styles));\n	}\n	return {\n		mergeCss: memo(mergeCss),\n		assignCss\n	};\n}\n//#endregion\n//#region src/clone-styles.ts\nconst OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\n/**\n* Independent copy of a style object, nested condition blocks included.\n*\n* Merged style objects are cached, so anything handed to user code has to be\n* copied first: a caller mutating what it received would otherwise change what\n* every later caller reads back. `css.raw()` and `cva.raw()` are those boundaries.\n*\n* Kept separate from `mergeProps` deliberately. Merging is on the hot path — it\n* runs on every `css()` cache miss and on every render of a pattern component\n* under `jsxStyleProps: 'minimal'` — and copying there charges every caller for a\n* guarantee only the two `raw()` helpers need. Measured on a realistic style\n* object (5 base properties, 4 condition blocks) that was roughly twice the cost\n* of merging alone.\n*/\nfunction cloneStyles(styles) {\n	if (Array.isArray(styles)) return styles.map((value) => cloneStyles(value));\n	if (!isObject(styles)) return styles;\n	const out = {};\n	for (const key of Object.keys(styles)) {\n		if (OMIT.has(key)) continue;\n		out[key] = cloneStyles(styles[key]);\n	}\n	return out;\n}\n//#endregion\n//#region src/leaf-class.ts\n/**\n* The class a single dynamic style leaf resolves to, given the prefix its property and\n* condition path produce.\n*\n* ## Why this can exist at all\n*\n* `css()` builds a class from the value alone — `utility.transform` is string\n* construction over a static map, and nothing consults which rules were actually emitted.\n* So `css({ color: tone })` already returns `c_<tone>` for a value the extractor never\n* saw, with no CSS behind it. Reproducing that string here cannot be less correct than\n* the call it replaces; it just skips the object literal, the merge and the memo.\n*\n* ## Why it is not a template literal\n*\n* Three shapes do not reduce to `prefix + value`, and all three return `undefined` so the\n* caller runs `css()` instead:\n*\n* - An array is expanded to a responsive object by `normalizeStyleObject`, so it produces\n*   one class per breakpoint rather than one class.\n* - An object is a condition block, walked into for the same reason.\n* - `null` and `undefined` are skipped by the walk entirely, which is an empty string\n*   rather than a class — that one is answered here, since it needs no `css()` call.\n*\n* ## Why the character scan\n*\n* The remaining work — collapsing whitespace, stripping `!important`, turning spaces into\n* underscores — is three regexes, and paying them per call makes this *slower* than a\n* memo hit. Almost no token value contains whitespace or `!`, so one scan for the\n* characters that make any of it necessary sends the common value straight to a\n* concatenation. A false positive only costs the slow path, so the scan errs wide.\n*/\nfunction leafClass(prefix, value) {\n	if (value == null) return \"\";\n	const type = typeof value;\n	if (type === \"number\" || type === \"boolean\") return `${prefix}${value}`;\n	if (type !== \"string\") return void 0;\n	const str = value;\n	for (let index = 0; index < str.length; index++) {\n		const code = str.charCodeAt(index);\n		if (code <= 33 || code === 160 || code === 5760 || code >= 8192) return slowLeaf(prefix, str);\n	}\n	return `${prefix}${str}`;\n}\n/** The full pipeline `createCss` runs, for a value that needs it. */\nfunction slowLeaf(prefix, value) {\n	const important = isImportant(value);\n	const className = `${prefix}${withoutSpace(withoutImportant(sanitize(value)))}`;\n	return important ? `${className}!` : className;\n}\n//#endregion\n//#region src/hypenate-property.ts\nconst wordRegex = /([A-Z])/g;\nconst msRegex = /^ms-/;\nconst hypenateProperty = memo((property) => {\n	if (property.startsWith(\"--\")) return property;\n	return property.replace(wordRegex, \"-$1\").replace(msRegex, \"-ms-\").toLowerCase();\n});\n//#endregion\n//#region src/is-css-function.ts\nconst fnRegExp = new RegExp(`^(${[\n	\"min\",\n	\"max\",\n	\"clamp\",\n	\"calc\"\n].join(\"|\")})\\\\(.*\\\\)`);\nconst isCssFunction = (v) => typeof v === \"string\" && fnRegExp.test(v);\n//#endregion\n//#region src/is-css-unit.ts\nconst lengthUnitsPattern = `(?:${\"cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%\".split(\",\").join(\"|\")})`;\nconst lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nconst isCssUnit = (v) => typeof v === \"string\" && lengthRegExp.test(v);\n//#endregion\n//#region src/is-css-var.ts\nconst isCssVar = (v) => typeof v === \"string\" && /^var\\(--.+\\)$/.test(v);\n//#endregion\n//#region src/pattern-fns.ts\nconst patternFns = {\n	map: mapObject,\n	isCssFunction,\n	isCssVar,\n	isCssUnit\n};\nconst getPatternStyles = (pattern, styles) => {\n	if (!pattern?.defaultValues) return styles;\n	const defaults = typeof pattern.defaultValues === \"function\" ? pattern.defaultValues(styles) : pattern.defaultValues;\n	return Object.assign({}, defaults, compact(styles));\n};\n//#endregion\n//#region src/slot.ts\nconst getSlotRecipes = (recipe = {}) => {\n	const init = (slot) => ({\n		className: [recipe.className, slot].filter(Boolean).join(\"__\"),\n		base: recipe.base?.[slot] ?? {},\n		variants: {},\n		defaultVariants: recipe.defaultVariants ?? {},\n		compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n	});\n	const recipeParts = (recipe.slots ?? []).map((slot) => [slot, init(slot)]);\n	for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) recipeParts.forEach(([slot, slotRecipe]) => {\n		slotRecipe.variants[variantsKey] ??= {};\n		slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n	});\n	return Object.fromEntries(recipeParts);\n};\nconst getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({\n	...compoundVariant,\n	css: compoundVariant.css[slotName]\n}));\n//#endregion\n//#region src/split-props.ts\n/**\n* Deal a props object into one bucket per key group, plus a final bucket for the rest.\n* A key goes to the first group that claims it.\n*\n* ## Why the descriptor is read per key rather than in bulk\n*\n* This used to call `Object.getOwnPropertyDescriptors` for the whole object and\n* `defineProperty` for every key it moved. Copying plain values instead is 2.4–2.9x faster\n* on the shapes that allow it, but it is only correct where props are data — and they are\n* not always. Solid compiles props to accessors, so reading one eagerly runs whatever it\n* wraps: splitting a component's props would construct its children before the surrounding\n* provider exists.\n*\n* So the descriptor is fetched per key, and the value path is taken only when it changes\n* nothing observable. An accessor keeps its laziness, a non-enumerable key keeps its\n* invisibility, and `__proto__` is defined rather than assigned so it stays an own\n* property instead of reaching the prototype setter.\n*\n* The one thing the value path drops is `writable`/`configurable`, so a bucket key taken\n* from frozen props is writable where it used to be frozen. Nothing here relies on that,\n* and preserving it would mean `defineProperty` on the common path — the cost this exists\n* to avoid. Keys that take the descriptor path keep theirs, so a bucket can be\n* inconsistent in that one respect.\n*\n* Key order within a bucket is preserved exactly. It is not cosmetic: `cva` merges\n* variant props in iteration order, and the parser reads the rest bucket as the style\n* props it encodes, so order reaches the emitted CSS.\n*/\nfunction splitProps(props, ...keys) {\n	const allKeys = Object.getOwnPropertyNames(props);\n	const own = new Set(allKeys);\n	const taken = /* @__PURE__ */ new Set();\n	const split = (group) => {\n		const clone = {};\n		for (let i = 0; i < group.length; i++) {\n			const key = group[i];\n			if (taken.has(key) || !own.has(key)) continue;\n			const descriptor = Object.getOwnPropertyDescriptor(props, key);\n			if (!descriptor) continue;\n			if (\"get\" in descriptor || \"set\" in descriptor || !descriptor.enumerable || key === \"__proto__\") Object.defineProperty(clone, key, descriptor);\n			else clone[key] = descriptor.value;\n			taken.add(key);\n		}\n		return clone;\n	};\n	return keys.map((key) => split(Array.isArray(key) ? key : allKeys.filter(key))).concat(split(allKeys));\n}\n//#endregion\n//#region src/uniq.ts\nconst uniq = (...items) => {\n	const set = items.reduce((acc, currItems) => {\n		if (currItems) currItems.forEach((item) => acc.add(item));\n		return acc;\n	}, /* @__PURE__ */ new Set([]));\n	return Array.from(set);\n};\n//#endregion\nexport { cloneStyles, compact, createCss, createMergeCss, filterBaseConditions, getPatternStyles, getSlotCompoundVariant, getSlotRecipes, hypenateProperty, isBaseCondition, isObject, leafClass, mapObject, memo, mergeProps, patternFns, splitProps, toHash, uniq, walkObject, withoutSpace };\n";
 //#endregion
 //#region src/artifacts/generated/normalize-html.mjs.json
 var content$9 = "//#region src/normalize-html.ts\nconst htmlProps = [\n	\"htmlSize\",\n	\"htmlTranslate\",\n	\"htmlWidth\",\n	\"htmlHeight\"\n];\nfunction convert(key) {\n	return htmlProps.includes(key) ? key.replace(\"html\", \"\").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n	return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n//#endregion\nexport { normalizeHTMLProps };\n";
@@ -425,17 +444,19 @@ function generateHelpers(ctx) {
 var content$8 = "//#region src/index.ts\nconst userGenerated = \"\".split(\",\");\nconst allCssProperties = \"WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,cornerShape,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical\".split(\",\").concat(userGenerated);\nconst properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n	const cache = Object.create(null);\n	return (arg) => {\n		if (cache[arg] === void 0) cache[arg] = fn(arg);\n		return cache[arg];\n	};\n}\nconst cssPropertySelectorRegex = /&|@/;\nconst isCssProperty = /* @__PURE__ */ memo((prop) => {\n	return properties.has(prop) || prop.startsWith(\"--\") || cssPropertySelectorRegex.test(prop);\n});\n//#endregion\nexport { allCssProperties, isCssProperty };\n";
 //#endregion
 //#region src/artifacts/js/is-valid-prop.ts
-const cssPropRegex = /var cssPropertiesStr = ".*?";/;
-const memoFnDeclarationRegex = /function memo(.+?)\nvar cssPropertySelectorRegex/s;
+const cssPropListRegex = /const userGenerated = ".*?"\.split\(","\);\s*const allCssProperties = "(.*?)"\.split\(","\)\.concat\(userGenerated\);/;
+const memoFnDeclarationRegex = /function memo(?:.+?)\n((?:var|const|let) cssPropertySelectorRegex)/s;
 function generateIsValidProp(ctx) {
 	if (ctx.isTemplateLiteralSyntax) return;
 	let content = content$8;
-	content = content.replace("var userGeneratedStr = \"\";", `var userGeneratedStr = "${match(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "css").exhaustive()}"`);
-	content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
-	if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
-		content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
-		content = content.replace(cssPropRegex, "var cssPropertiesStr = \"\";");
-	} else content = ctx.file.import("memo", "../helpers") + "\n" + content;
+	const propertyList = content.match(cssPropListRegex);
+	if (!propertyList) throw new BambooError("NOT_FOUND", "Could not find the property list in the prebuilt is-valid-prop module. Its bundled shape has changed.");
+	const userProperties = match(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties)).with("minimal", () => ["css"]).with("none", () => ["css"]).exhaustive();
+	const browserProperties = ctx.jsx.styleProps === "all" ? propertyList[1].split(",") : [];
+	content = content.replace(cssPropListRegex, () => `const allCssProperties = "${uniq(browserProperties, userProperties).join(",")}".split(",");`);
+	content = content.replace(memoFnDeclarationRegex, "$1");
+	if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
+	else content = ctx.file.import("memo", "../helpers") + "\n" + content;
 	content = ctx.file.import("splitProps", "../helpers") + "\n" + content;
 	content += `export const splitCssProps = (props) =>  splitProps(props, isCssProperty)`;
 	return {
@@ -487,6 +508,56 @@ function generatedJsxHelpers(ctx) {
   `) };
 }
 //#endregion
+//#region src/artifacts/js/package-json.ts
+/**
+* The generated output is a plain directory, not an installed package, so bundlers
+* have no `sideEffects` hint for it and must assume every module mutates something.
+* That keeps every module a barrel pulls in — importing a single component from
+* `styled-system/jsx` retains all patterns.
+*
+* The CSS globs are required: `sideEffects: false` alone lets a bundler drop a bare
+* `import 'styled-system/styles.css'`. Both shapes are listed because the stylesheet
+* is emitted at the root (`styles.css`) and, under `splitting`, in `styles/`.
+*
+* `type: module` restates what the directory already is. Adding a package.json makes
+* this directory its own package boundary, so `.js` output would otherwise stop
+* inheriting the consumer's `type` and be re-read as CommonJS; the emitted code is
+* always ESM. It is a no-op for the default `.mjs` extension.
+*
+* `private` is there because the same package boundary makes a workspace glob able to
+* match this directory. It is never published.
+*
+* `name` has to be present for the same reason. This file used to be emitted without
+* one, to keep two outputs in a single workspace from colliding — but a nameless
+* package.json is not a package a workspace scanner skips, it is one it refuses:
+* pnpm, npm and changesets all abort with `missing the "name" field` and no hint as
+* to which directory produced it.
+*
+* The name is derived from `outdir` because that is the only input that is both
+* deterministic and portable — `cwd` is absolute, so putting it here would make the
+* generated output differ per machine. Two projects in one workspace that both keep
+* the default `outdir` therefore still collide, but on a duplicate-name error that
+* names both paths and is resolved by setting `outdir`, rather than on a missing
+* field that points nowhere.
+*/
+function generatePackageJson(ctx) {
+	return { json: JSON.stringify({
+		name: toPackageName(ctx.config.outdir),
+		type: "module",
+		private: true,
+		sideEffects: ["*.css", "**/*.css"]
+	}, null, 2) + "\n" };
+}
+/**
+* `outdir` is a path, npm names are not: it may be nested (`src/styled-system`), and
+* npm rejects uppercase, a leading dot or underscore, and anything outside its
+* url-safe set. Path segments are joined rather than dropped so that nested outputs
+* stay distinct from one another.
+*/
+function toPackageName(outdir) {
+	return outdir.split(/[\\/]/).filter(Boolean).join("-").toLowerCase().replace(/[^a-z0-9\-._]/g, "-").replace(/^[._]+/, "") || "styled-system";
+}
+//#endregion
 //#region src/artifacts/js/pattern.ts
 function generatePattern(ctx, filters) {
 	if (ctx.patterns.isEmpty()) return;
@@ -497,7 +568,7 @@ function generatePattern(ctx, filters) {
 			transform,
 			defaultValues
 		})) ?? "";
-		const helperImports = ["getPatternStyles, patternFns"];
+		const helperImports = ["getPatternStyles, patternFns, memo"];
 		if (patternConfigFn.includes("__spreadValues")) helperImports.push("__spreadValues");
 		if (patternConfigFn.includes("__objRest")) helperImports.push("__objRest");
 		return {
@@ -550,7 +621,7 @@ function generatePattern(ctx, filters) {
       return ${baseName}Config.transform(_styles, patternFns)
     }
 
-    export const ${baseName} = (styles) => css(${styleFnName}(styles))
+    export const ${baseName} = /* @__PURE__ */ memo((styles) => css(${styleFnName}(styles)))
     ${baseName}.raw = ${styleFnName}
     `
 		};
@@ -950,7 +1021,6 @@ function generatePreactJsxFactory(ctx) {
 	return { js: outdent`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
-    import { useMemo } from 'preact/hooks'
     ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
     ${ctx.file.import("css, cx, cva", "../css/index")}
@@ -978,11 +1048,13 @@ function generatePreactJsxFactory(ctx) {
         const { as: Element = __base__, unstyled, children, ...restProps } = props
 
 
-        const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
+        // Not memoized, deliberately. \`restProps\` is rest destructuring, so it is a fresh
+        // object on every render and a dependency on it can never match — a memo here is a
+        // guaranteed miss that still costs a hook slot, a deps array and a retained cell.
+        const combinedProps = Object.assign({}, defaultProps, restProps)
 
-        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-        }, [combinedProps])
+        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
+          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
@@ -1810,7 +1882,7 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 function generateReactJsxFactory(ctx) {
 	const { factoryName, componentName } = ctx.jsx;
 	return { js: outdent`
-    import { createElement, forwardRef, useMemo } from 'react'
+    import { createElement, forwardRef } from 'react'
     ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1837,11 +1909,13 @@ function generateReactJsxFactory(ctx) {
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         const { as: Element = __base__, unstyled, children, ...restProps } = props
 
-        const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
+        // Not memoized, deliberately. \`restProps\` is rest destructuring, so it is a fresh
+        // object on every render and a dependency on it can never match — a memo here is a
+        // guaranteed miss that still costs a hook slot, a deps array and a retained cell.
+        const combinedProps = Object.assign({}, defaultProps, restProps)
 
-        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
-          return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-        }, [combinedProps])
+        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
+          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
@@ -4526,8 +4600,8 @@ function generatePropTypes(ctx) {
    *   fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token
    * })
    *
-   * @see https://bamboo-css.com/docs/concepts/writing-styles#stricttokens
-   * @see https://bamboo-css.com/docs/concepts/writing-styles#strictpropertyvalues
+   * @see https://bamboocss.com/docs/concepts/writing-styles#stricttokens
+   * @see https://bamboocss.com/docs/concepts/writing-styles#strictpropertyvalues
    */
   export type WithEscapeHatch<T> = T | \`[\${string}]\` | WithColorOpacityModifier<T> | WithImportant<T>
 
@@ -4539,7 +4613,7 @@ function generatePropTypes(ctx) {
    *   display: 'abc', // ❌ will throw
    * })
    *
-   * @see https://bamboo-css.com/docs/concepts/writing-styles#strictpropertyvalues
+   * @see https://bamboocss.com/docs/concepts/writing-styles#strictpropertyvalues
    */
   export type OnlyKnown<Key, Value> = Value extends boolean
     ? Value
@@ -4955,6 +5029,15 @@ function setupHelpers(ctx) {
 		}]
 	};
 }
+function setupPackageJson(ctx) {
+	return {
+		id: "package.json",
+		files: [{
+			file: "package.json",
+			code: generatePackageJson(ctx).json
+		}]
+	};
+}
 function setupDesignTokens(ctx) {
 	const code = generateTokenJs(ctx);
 	return {
@@ -5410,6 +5493,7 @@ const filterArtifactsFiles = (artifacts, filters) => {
 	});
 };
 const entries = [
+	["package.json", setupPackageJson],
 	["helpers", setupHelpers],
 	["design-tokens", setupDesignTokens],
 	["types-jsx", setupJsxTypes],
@@ -6053,6 +6137,136 @@ var Generator = class extends Context {
 		const decoder = this.decoder.collect(this.encoder);
 		sheet.processDecoder(decoder);
 	};
+	/**
+	* Drop token css variables nothing can reach. Call this only once the sheet holds the
+	* whole stylesheet — a baseline-only sheet has no utilities to reference anything, so
+	* every token would look unused.
+	*
+	* `keep` carries references this cannot see for itself; see `collectTokenReferences`.
+	*/
+	pruneTokens = (sheet, keep) => {
+		if (!this.config.pruneUnusedTokens) return;
+		const layers = sheet.layers;
+		const result = pruneTokenVars({
+			scan: [
+				layers.reset,
+				layers.base,
+				layers.tokens,
+				layers.recipes,
+				layers.recipes_base,
+				layers.recipes_slots,
+				layers.recipes_slots_base,
+				layers.utilities,
+				layers.compositions
+			],
+			target: layers.tokens,
+			tokenVars: this.getTokenVarNames(),
+			keep: new Set([
+				...this.getAlwaysKeptTokenVars(),
+				...this.getThemeTokenVars(),
+				...keep ?? []
+			])
+		});
+		logger.debug("prune:tokens", `Removed ${result.removed} unused token css variable(s)`);
+		return result;
+	};
+	/**
+	* Drop `@keyframes` nothing can reach. Same completeness requirement as
+	* `pruneTokens`: the sheet has to hold the whole stylesheet, or every keyframe looks
+	* unused for want of a utility to reference it.
+	*
+	* `keep` carries names this cannot see for itself; see `collectKeyframeReferences`.
+	*/
+	pruneKeyframes = (sheet, keep) => {
+		if (!this.config.pruneUnusedKeyframes) return;
+		const layers = sheet.layers;
+		const keyframeNames = new Set(Object.keys(this.config.theme?.keyframes ?? {}));
+		const result = pruneKeyframes({
+			scan: [
+				layers.reset,
+				layers.base,
+				layers.tokens,
+				layers.recipes,
+				layers.recipes_base,
+				layers.recipes_slots,
+				layers.recipes_slots_base,
+				layers.utilities,
+				layers.compositions
+			],
+			target: layers.tokens,
+			keyframeNames,
+			keep: new Set([...this.getThemeKeyframeNames(keyframeNames), ...keep ?? []])
+		});
+		logger.debug("prune:keyframes", `Removed ${result.removed} unused keyframe(s)`);
+		return result;
+	};
+	/**
+	* Keyframes the themes name.
+	*
+	* A theme is emitted as its own artifact and injected at runtime, so its css is not in
+	* the sheet being pruned. A theme that points an animation token at a different
+	* keyframe than the base does — `--animations-enter: fade-in` in the base and
+	* `slide-up` under `dark` — would otherwise have that keyframe removed, because
+	* nothing in the pruned sheet ever names it.
+	*/
+	getThemeKeyframeNames = (keyframeNames) => {
+		const names = /* @__PURE__ */ new Set();
+		const themes = this.config.themes;
+		if (!themes || !keyframeNames.size) return names;
+		for (const themeName of Object.keys(themes)) for (const token of getThemeCss(this, themeName).split(/[^\w-]+/)) if (keyframeNames.has(token)) names.add(token);
+		return names;
+	};
+	/**
+	* Every custom property the token system declares. Used as the allow-list of what may
+	* be removed, so custom properties from `globalCss` are never touched.
+	*/
+	getTokenVarNames = () => {
+		const names = /* @__PURE__ */ new Set();
+		for (const values of this.tokens.view.vars.values()) for (const name of values.keys()) names.add(name);
+		return names;
+	};
+	/**
+	* Everything the themes refer to.
+	*
+	* A theme is emitted as its own artifact and injected at runtime, so its css is not in
+	* the sheet being pruned and nothing there points at what it needs. A theme that maps a
+	* token onto a base colour would otherwise be left referring to a declaration that has
+	* been removed.
+	*/
+	getThemeTokenVars = () => {
+		const names = /* @__PURE__ */ new Set();
+		const themes = this.config.themes;
+		if (!themes) return names;
+		for (const themeName of Object.keys(themes)) for (const name of cssVarRefs(getThemeCss(this, themeName))) names.add(name);
+		return names;
+	};
+	/**
+	* Tokens whose javascript value is a `var()` reference rather than a literal.
+	* `token('colors.text')` hands those to the caller as a reference, so the declaration
+	* has to survive whether or not the generated css mentions it. Ordinary tokens resolve
+	* to a literal in javascript and need no such exemption.
+	*
+	* The two cases mirror `generateTokenJs`, which is what decides the value javascript
+	* actually receives:
+	*
+	* - A virtual token, or one carrying a condition, is handed its own `varRef`.
+	* - A negative token is handed `calc(var(--x) * -1)`, so it is a reference too — but to
+	*   the *positive* token's declaration. Its own var is never declared, so the name has
+	*   to come out of the value.
+	*/
+	getAlwaysKeptTokenVars = () => {
+		const names = /* @__PURE__ */ new Set();
+		this.tokens.allTokens.forEach((token) => {
+			const { isVirtual, isNegative, condition, var: varName } = token.extensions;
+			if (isVirtual || condition !== "base") {
+				if (varName) names.add(varName.startsWith("--") ? varName : `--${varName}`);
+				return;
+			}
+			if (!isNegative) return;
+			for (const name of cssVarRefs(token.value)) names.add(name);
+		});
+		return names;
+	};
 	getParserCss = (decoder) => {
 		return generateParserCss(this, decoder);
 	};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@bamboocss/generator",
-  "version": "1.12.3",
+  "version": "1.13.1",
   "description": "The css generator for css bamboo",
-  "homepage": "https://bamboo-css.com",
+  "homepage": "https://bamboocss.com",
   "license": "MIT",
-  "author": "Segun Adebayo <joseshegs@gmail.com>",
+  "author": "Gajus Kuizinas <gajus@gajus.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bamboocss/bamboo.git",
@@ -38,12 +38,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.5.14",
     "ts-pattern": "5.9.0",
-    "@bamboocss/core": "1.12.3",
-    "@bamboocss/is-valid-prop": "^1.12.3",
-    "@bamboocss/logger": "1.12.3",
-    "@bamboocss/shared": "1.12.3",
-    "@bamboocss/types": "1.12.3",
-    "@bamboocss/token-dictionary": "1.12.3"
+    "@bamboocss/is-valid-prop": "^1.13.1",
+    "@bamboocss/core": "1.13.1",
+    "@bamboocss/logger": "1.13.1",
+    "@bamboocss/shared": "1.13.1",
+    "@bamboocss/token-dictionary": "1.13.1",
+    "@bamboocss/types": "1.13.1"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"