@tenphi/tasty 0.13.0 → 0.14.0

package/dist/utils/styles.js

@@ -1,10 +1,6 @@
+import { getNamedColorHex, getRgbValuesFromRgbaString, hexToRgb, strToRgb } from "./color-math.js";
 import { StyleParser } from "../parser/parser.js";
 import { okhslFunc } from "../plugins/okhsl-plugin.js";
-import { createStateParserContext, parseAdvancedState } from "../states/index.js";
-import { cacheWrapper } from "./cache-wrapper.js";
-import { camelToKebab } from "./case-converter.js";
-import { okhslToRgb } from "./okhsl-to-rgb.js";
-import { hslToRgb } from "./hsl-to-rgb.js";
 
 //#region src/utils/styles.ts
 /**
@@ -22,19 +18,23 @@ function normalizeColorTokenValue(value) {
 	return value;
 }
 const COLOR_VAR_PATTERN = /var\(--([a-z0-9-]+)-color/;
-const COLOR_VAR_RGB_PATTERN = /var\(--([a-z0-9-]+)-color-rgb/;
+const COLOR_VAR_COMPONENTS_PATTERN = /var\(--([a-z0-9-]+)-color-(?:rgb|hsl|oklch)/;
 const RGB_ALPHA_PATTERN = /\/\s*([0-9.]+)\)/;
-const SIMPLE_COLOR_PATTERNS = [
-	/^#[0-9a-fA-F]{3,8}$/,
-	/^rgb\(/,
-	/^hsl\(/,
-	/^lch\(/,
-	/^oklch\(/,
-	/^okhsl\(/,
-	/^var\(--[a-z0-9-]+-color/,
-	/^currentColor$/,
-	/^transparent$/
-];
+const RE_HEX_COLOR = /^#[0-9a-fA-F]{3,8}$/;
+const RE_VAR_COLOR = /^var\(--[a-z0-9-]+-color/;
+function isSimpleColorFast(val) {
+	switch (val.charCodeAt(0)) {
+		case 35: return RE_HEX_COLOR.test(val);
+		case 114: return val.charCodeAt(1) === 103 && val.charCodeAt(2) === 98;
+		case 104: return val.charCodeAt(1) === 115 && val.charCodeAt(2) === 108;
+		case 108: return val.charCodeAt(1) === 99 && val.charCodeAt(2) === 104;
+		case 111: return val.startsWith("oklch(") || val.startsWith("okhsl(");
+		case 118: return RE_VAR_COLOR.test(val);
+		case 99: return val === "currentColor" || val === "currentcolor";
+		case 116: return val === "transparent";
+		default: return getNamedColorHex().has(val.toLowerCase());
+	}
+}
 let colorWarningCount = 0;
 const MAX_COLOR_WARNINGS = 10;
 const CUSTOM_UNITS = {
@@ -148,23 +148,23 @@ function parseColor(val, ignoreError = false) {
 	if (typeof val !== "string") val = String(val ?? "");
 	val = val.trim();
 	if (!val) return {};
-	const isSimpleColor = SIMPLE_COLOR_PATTERNS.some((pattern) => pattern.test(val));
+	const isSimpleColor = isSimpleColorFast(val);
 	let firstColor;
 	if (isSimpleColor) firstColor = val;
 	else {
 		const extractedColor = parseStyle(val).groups.find((g) => g.colors.length)?.colors[0];
 		if (!extractedColor) {
 			if (!ignoreError && colorWarningCount < MAX_COLOR_WARNINGS) {
-				console.warn("CubeUIKit: unable to parse color:", val);
+				console.warn("Tasty: unable to parse color:", val);
 				colorWarningCount++;
-				if (colorWarningCount === MAX_COLOR_WARNINGS) console.warn("CubeUIKit: color parsing warnings will be suppressed from now on");
+				if (colorWarningCount === MAX_COLOR_WARNINGS) console.warn("Tasty: color parsing warnings will be suppressed from now on");
 			}
 			return {};
 		}
 		firstColor = extractedColor;
 	}
 	let nameMatch = firstColor.match(COLOR_VAR_PATTERN);
-	if (!nameMatch) nameMatch = firstColor.match(COLOR_VAR_RGB_PATTERN);
+	if (!nameMatch) nameMatch = firstColor.match(COLOR_VAR_COMPONENTS_PATTERN);
 	let opacity;
 	if (firstColor.startsWith("rgb") || firstColor.startsWith("hsl") || firstColor.startsWith("lch") || firstColor.startsWith("oklch") || firstColor.startsWith("okhsl")) {
 		const alphaMatch = firstColor.match(RGB_ALPHA_PATTERN);
@@ -179,524 +179,15 @@ function parseColor(val, ignoreError = false) {
 		opacity
 	};
 }
-/**
-* CSS named color keywords → hex values.
-* Lazy-initialized on first use to avoid up-front cost.
-*/
-let _namedColorHex = null;
-function getNamedColorHex() {
-	if (_namedColorHex) return _namedColorHex;
-	_namedColorHex = new Map([
-		["aliceblue", "#f0f8ff"],
-		["antiquewhite", "#faebd7"],
-		["aqua", "#00ffff"],
-		["aquamarine", "#7fffd4"],
-		["azure", "#f0ffff"],
-		["beige", "#f5f5dc"],
-		["bisque", "#ffe4c4"],
-		["black", "#000000"],
-		["blanchedalmond", "#ffebcd"],
-		["blue", "#0000ff"],
-		["blueviolet", "#8a2be2"],
-		["brown", "#a52a2a"],
-		["burlywood", "#deb887"],
-		["cadetblue", "#5f9ea0"],
-		["chartreuse", "#7fff00"],
-		["chocolate", "#d2691e"],
-		["coral", "#ff7f50"],
-		["cornflowerblue", "#6495ed"],
-		["cornsilk", "#fff8dc"],
-		["crimson", "#dc143c"],
-		["cyan", "#00ffff"],
-		["darkblue", "#00008b"],
-		["darkcyan", "#008b8b"],
-		["darkgoldenrod", "#b8860b"],
-		["darkgray", "#a9a9a9"],
-		["darkgreen", "#006400"],
-		["darkgrey", "#a9a9a9"],
-		["darkkhaki", "#bdb76b"],
-		["darkmagenta", "#8b008b"],
-		["darkolivegreen", "#556b2f"],
-		["darkorange", "#ff8c00"],
-		["darkorchid", "#9932cc"],
-		["darkred", "#8b0000"],
-		["darksalmon", "#e9967a"],
-		["darkseagreen", "#8fbc8f"],
-		["darkslateblue", "#483d8b"],
-		["darkslategray", "#2f4f4f"],
-		["darkslategrey", "#2f4f4f"],
-		["darkturquoise", "#00ced1"],
-		["darkviolet", "#9400d3"],
-		["deeppink", "#ff1493"],
-		["deepskyblue", "#00bfff"],
-		["dimgray", "#696969"],
-		["dimgrey", "#696969"],
-		["dodgerblue", "#1e90ff"],
-		["firebrick", "#b22222"],
-		["floralwhite", "#fffaf0"],
-		["forestgreen", "#228b22"],
-		["fuchsia", "#ff00ff"],
-		["gainsboro", "#dcdcdc"],
-		["ghostwhite", "#f8f8ff"],
-		["gold", "#ffd700"],
-		["goldenrod", "#daa520"],
-		["gray", "#808080"],
-		["green", "#008000"],
-		["greenyellow", "#adff2f"],
-		["grey", "#808080"],
-		["honeydew", "#f0fff0"],
-		["hotpink", "#ff69b4"],
-		["indianred", "#cd5c5c"],
-		["indigo", "#4b0082"],
-		["ivory", "#fffff0"],
-		["khaki", "#f0e68c"],
-		["lavender", "#e6e6fa"],
-		["lavenderblush", "#fff0f5"],
-		["lawngreen", "#7cfc00"],
-		["lemonchiffon", "#fffacd"],
-		["lightblue", "#add8e6"],
-		["lightcoral", "#f08080"],
-		["lightcyan", "#e0ffff"],
-		["lightgoldenrodyellow", "#fafad2"],
-		["lightgray", "#d3d3d3"],
-		["lightgreen", "#90ee90"],
-		["lightgrey", "#d3d3d3"],
-		["lightpink", "#ffb6c1"],
-		["lightsalmon", "#ffa07a"],
-		["lightseagreen", "#20b2aa"],
-		["lightskyblue", "#87cefa"],
-		["lightslategray", "#778899"],
-		["lightslategrey", "#778899"],
-		["lightsteelblue", "#b0c4de"],
-		["lightyellow", "#ffffe0"],
-		["lime", "#00ff00"],
-		["limegreen", "#32cd32"],
-		["linen", "#faf0e6"],
-		["magenta", "#ff00ff"],
-		["maroon", "#800000"],
-		["mediumaquamarine", "#66cdaa"],
-		["mediumblue", "#0000cd"],
-		["mediumorchid", "#ba55d3"],
-		["mediumpurple", "#9370db"],
-		["mediumseagreen", "#3cb371"],
-		["mediumslateblue", "#7b68ee"],
-		["mediumspringgreen", "#00fa9a"],
-		["mediumturquoise", "#48d1cc"],
-		["mediumvioletred", "#c71585"],
-		["midnightblue", "#191970"],
-		["mintcream", "#f5fffa"],
-		["mistyrose", "#ffe4e1"],
-		["moccasin", "#ffe4b5"],
-		["navajowhite", "#ffdead"],
-		["navy", "#000080"],
-		["oldlace", "#fdf5e6"],
-		["olive", "#808000"],
-		["olivedrab", "#6b8e23"],
-		["orange", "#ffa500"],
-		["orangered", "#ff4500"],
-		["orchid", "#da70d6"],
-		["palegoldenrod", "#eee8aa"],
-		["palegreen", "#98fb98"],
-		["paleturquoise", "#afeeee"],
-		["palevioletred", "#db7093"],
-		["papayawhip", "#ffefd5"],
-		["peachpuff", "#ffdab9"],
-		["peru", "#cd853f"],
-		["pink", "#ffc0cb"],
-		["plum", "#dda0dd"],
-		["powderblue", "#b0e0e6"],
-		["purple", "#800080"],
-		["rebeccapurple", "#663399"],
-		["red", "#ff0000"],
-		["rosybrown", "#bc8f8f"],
-		["royalblue", "#4169e1"],
-		["saddlebrown", "#8b4513"],
-		["salmon", "#fa8072"],
-		["sandybrown", "#f4a460"],
-		["seagreen", "#2e8b57"],
-		["seashell", "#fff5ee"],
-		["sienna", "#a0522d"],
-		["silver", "#c0c0c0"],
-		["skyblue", "#87ceeb"],
-		["slateblue", "#6a5acd"],
-		["slategray", "#708090"],
-		["slategrey", "#708090"],
-		["snow", "#fffafa"],
-		["springgreen", "#00ff7f"],
-		["steelblue", "#4682b4"],
-		["tan", "#d2b48c"],
-		["teal", "#008080"],
-		["thistle", "#d8bfd8"],
-		["tomato", "#ff6347"],
-		["turquoise", "#40e0d0"],
-		["violet", "#ee82ee"],
-		["wheat", "#f5deb3"],
-		["white", "#ffffff"],
-		["whitesmoke", "#f5f5f5"],
-		["yellow", "#ffff00"],
-		["yellowgreen", "#9acd32"]
-	]);
-	return _namedColorHex;
-}
-function strToRgb(color, _ignoreAlpha = false) {
-	if (!color) return void 0;
-	if (color.startsWith("rgb")) return color;
-	if (color.startsWith("#")) return hexToRgb(color);
-	if (color.startsWith("okhsl(")) return okhslToRgb(color);
-	if (color.startsWith("hsl")) return hslToRgb(color);
-	const namedHex = getNamedColorHex().get(color.toLowerCase());
-	if (namedHex) return hexToRgb(namedHex);
-	return null;
-}
-/**
-* Extract RGB values from an rgb()/rgba() string.
-* Supports all modern CSS syntax variations:
-* - Comma-separated: rgb(255, 128, 0)
-* - Space-separated: rgb(255 128 0)
-* - Fractional: rgb(128.5, 64.3, 32.1)
-* - Percentages: rgb(50%, 25%, 75%)
-* - Slash alpha notation: rgb(255 128 0 / 0.5)
-*
-* Returns array of RGB values (0-255 range), converting percentages as needed.
-*/
-function getRgbValuesFromRgbaString(str) {
-	const match = str.match(/rgba?\(([^)]+)\)/i);
-	if (!match) return [];
-	const [colorPart] = match[1].trim().split("/");
-	return colorPart.trim().split(/[,\s]+/).filter(Boolean).slice(0, 3).map((part) => {
-		part = part.trim();
-		if (part.endsWith("%")) return parseFloat(part) / 100 * 255;
-		return parseFloat(part);
-	});
-}
-function hexToRgb(hex) {
-	const matched = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_m, r, g, b) => "#" + r + r + g + g + b + b).substring(1).match(/.{2}/g);
-	if (!matched) return null;
-	const rgba = matched.map((x, i) => parseInt(x, 16) * (i === 3 ? 1 / 255 : 1));
-	if (rgba.some((v) => Number.isNaN(v))) return null;
-	if (rgba.length >= 3) return `rgb(${rgba.slice(0, 3).join(" ")}${rgba.length > 3 ? ` / ${rgba[3]}` : ""})`;
-	return null;
-}
 function filterMods(mods, allowedMods) {
 	return mods.filter((mod) => allowedMods.includes(mod));
 }
-function extendStyles(defaultStyles, newStyles) {
-	let styles = {};
-	if (!defaultStyles) {
-		if (!newStyles) return styles;
-	} else styles = Object.assign({}, defaultStyles);
-	if (newStyles) Object.keys(newStyles).forEach((key) => {
-		if (newStyles[key] != null) styles[key] = newStyles[key];
-	});
-	return styles;
-}
-/**
-* Split properties into style and non-style properties.
-* @param props - Component prop map.
-* @param [styleList] - List of all style properties.
-* @param [defaultStyles] - Default style map of the component.
-* @param [propMap] - Props to style alias map.
-* @param [ignoreList] - A list of properties to ignore.
-*/
-function extractStyles(props, styleList = [], defaultStyles, propMap, ignoreList = []) {
-	const styles = {
-		...defaultStyles,
-		...ignoreList.includes("styles") ? void 0 : props.styles && typeof props.styles === "object" ? props.styles : void 0
-	};
-	Object.keys(props).forEach((prop) => {
-		const propName = propMap ? propMap[prop] || prop : prop;
-		const value = props[prop];
-		if (ignoreList && ignoreList.includes(prop)) {} else if (styleList.includes(propName)) styles[propName] = value;
-	}, {});
-	return styles;
-}
-const STATES_REGEXP = /([&|!^])|([()])|(@media:[a-z]+)|(@media\([^)]+\))|(@root\([^)]+\))|(@own\([^)]+\))|(@\([^)]+\))|(@starting)|(@[A-Za-z][A-Za-z0-9-]*)|([a-z][a-z0-9-]+=(?:"[^"]*"|'[^']*'|[^\s&|!^()]+))|([a-z][a-z0-9-]+)|(:[a-z][a-z0-9-]+\([^)]+\)|:[a-z][a-z0-9-]+)|(\.[a-z][a-z0-9-]+)|(\[[^\]]+])/gi;
-/**
-* Check if a token is an advanced state (starts with @)
-*/
-function isAdvancedStateToken(token) {
-	return token.startsWith("@") || token.startsWith("!@");
-}
-const STATE_OPERATORS = {
-	NOT: "!",
-	AND: "&",
-	OR: "|",
-	XOR: "^"
-};
-const STATE_OPERATOR_LIST = [
-	"!",
-	"&",
-	"|",
-	"^"
-];
-/**
-* Convert state notation tokens to a compute model (string, or nested [op, lhs, rhs]).
-*/
-function convertTokensToComputeUnits(tokens) {
-	if (tokens.length === 1) return tokens[0];
-	const hasLength = (x) => typeof x === "string" || Array.isArray(x);
-	STATE_OPERATOR_LIST.forEach((operator) => {
-		let i;
-		while ((i = tokens.indexOf(operator)) !== -1) {
-			const token = tokens[i];
-			if (token === "!") {
-				const next = tokens[i + 1];
-				if (next !== void 0 && hasLength(next) && next.length !== 1) tokens.splice(i, 2, ["!", next]);
-				else tokens.splice(i, 1);
-			} else {
-				const prev = tokens[i - 1];
-				const next = tokens[i + 1];
-				if (prev !== void 0 && next !== void 0 && hasLength(prev) && hasLength(next) && prev.length !== 1 && next.length !== 1) tokens.splice(i - 1, 3, [
-					token,
-					prev,
-					next
-				]);
-				else tokens.splice(i, 1);
-			}
-		}
-	});
-	return tokens.length === 1 ? tokens[0] : tokens;
-}
-/**
-* Replace commas with | only outside of parentheses.
-* This preserves commas in advanced states like @(card, w < 600px)
-*/
-function replaceCommasOutsideParens(str) {
-	let result = "";
-	let depth = 0;
-	for (const char of str) if (char === "(") {
-		depth++;
-		result += char;
-	} else if (char === ")") {
-		depth--;
-		result += char;
-	} else if (char === "," && depth === 0) result += "|";
-	else result += char;
-	return result;
-}
-/**
-* Parse state notation and return tokens, modifiers and compute model.
-*/
-function parseStateNotationInner(notation, value) {
-	const tokens = replaceCommasOutsideParens(notation).match(STATES_REGEXP);
-	if (!tokens || !tokens.length) return {
-		model: void 0,
-		mods: [],
-		notMods: [],
-		tokens: [],
-		value
-	};
-	else if (tokens.length === 1) return {
-		model: tokens[0],
-		mods: tokens.slice(0),
-		notMods: [],
-		tokens,
-		value
-	};
-	const mods = [];
-	const operations = [[]];
-	let list = operations[0];
-	let position = 0;
-	let operation;
-	tokens.forEach((token) => {
-		switch (token) {
-			case "(":
-				operation = [];
-				position++;
-				list = operations[position] = operation;
-				break;
-			case ")":
-				position--;
-				operations[position].push(convertTokensToComputeUnits(list));
-				list = operations[position];
-				break;
-			default:
-				if (token.length > 1) {
-					if (!mods.includes(token)) mods.push(token);
-				}
-				list.push(token);
-		}
-	});
-	while (position) {
-		position--;
-		operations[position].push(convertTokensToComputeUnits(list));
-		list = operations[position];
-	}
-	return {
-		tokens,
-		mods,
-		notMods: [],
-		model: convertTokensToComputeUnits(operations[0]),
-		value
-	};
-}
-const parseStateNotation = cacheWrapper(parseStateNotationInner);
-/**
-* Build an AtRuleContext from parsed advanced states
-*/
-function buildAtRuleContext(advancedStates, negatedStates) {
-	if (advancedStates.length === 0) return void 0;
-	const ctx = {};
-	for (const state of advancedStates) {
-		const isNegated = negatedStates.has(state.raw);
-		switch (state.type) {
-			case "media": {
-				if (!ctx.media) ctx.media = [];
-				let mediaCondition = "";
-				if (state.mediaType) mediaCondition = state.mediaType;
-				else if (state.condition) mediaCondition = `(${state.condition})`;
-				if (mediaCondition) if (isNegated) ctx.media.push(`not ${mediaCondition}`);
-				else ctx.media.push(mediaCondition);
-				break;
-			}
-			case "container": {
-				if (!ctx.container) ctx.container = [];
-				let condition = state.condition;
-				if (isNegated) condition = `not (${condition})`;
-				ctx.container.push({
-					name: state.containerName,
-					condition
-				});
-				break;
-			}
-			case "root": {
-				if (!ctx.rootStates) ctx.rootStates = [];
-				const rootSelector = buildRootSelector(state.condition, isNegated);
-				ctx.rootStates.push(rootSelector);
-				break;
-			}
-			case "starting":
-				if (!isNegated) ctx.startingStyle = true;
-				break;
-		}
-	}
-	if (!ctx.media?.length && !ctx.container?.length && !ctx.rootStates?.length && !ctx.startingStyle) return;
-	return ctx;
-}
-/**
-* Build a root state selector from a condition
-*/
-function buildRootSelector(condition, isNegated) {
-	let selector;
-	if (condition.startsWith(".")) selector = condition;
-	else if (condition.startsWith("[")) selector = condition;
-	else if (condition.includes("=")) {
-		const [key, value] = condition.split("=");
-		selector = `[data-${camelToKebab(key.trim())}="${value.trim()}"]`;
-	} else selector = `[data-${camelToKebab(condition)}]`;
-	if (isNegated) return `:not(${selector})`;
-	return selector;
-}
-/**
-* Parse state notation and return tokens, modifiers and compute model.
-* Enhanced to detect and extract advanced states.
-*/
-function styleStateMapToStyleStateDataList(styleStateMap, parserContext) {
-	if (typeof styleStateMap !== "object" || !styleStateMap) return {
-		states: [{
-			model: void 0,
-			mods: [],
-			notMods: [],
-			value: styleStateMap
-		}],
-		mods: [],
-		hasAdvancedStates: false
-	};
-	const stateDataList = [];
-	let hasAdvancedStates = false;
-	Object.keys(styleStateMap).forEach((stateNotation) => {
-		const state = parseStateNotation(stateNotation, styleStateMap[stateNotation]);
-		const advancedStates = [];
-		const negatedAdvancedStates = /* @__PURE__ */ new Set();
-		const regularMods = [];
-		const ownMods = [];
-		const negatedOwnMods = [];
-		if (state.tokens) {
-			let isNegated = false;
-			for (const token of state.tokens) {
-				if (token === "!") {
-					isNegated = true;
-					continue;
-				}
-				if (isAdvancedStateToken(token)) {
-					hasAdvancedStates = true;
-					const parsed = parseAdvancedState(token, parserContext || createStateParserContext(void 0));
-					advancedStates.push(parsed);
-					if (parsed.type === "own" && parsed.condition) if (isNegated) negatedOwnMods.push(parsed.condition);
-					else ownMods.push(parsed.condition);
-					else if (isNegated) negatedAdvancedStates.add(token);
-					isNegated = false;
-				} else if (token.length > 1 && ![
-					"&",
-					"|",
-					"^",
-					"(",
-					")"
-				].includes(token)) {
-					regularMods.push(token);
-					isNegated = false;
-				} else isNegated = false;
-			}
-		}
-		if (advancedStates.length > 0) {
-			state.advancedStates = advancedStates;
-			state.atRuleContext = buildAtRuleContext(advancedStates, negatedAdvancedStates);
-			state.mods = regularMods;
-		}
-		if (ownMods.length > 0) state.ownMods = ownMods;
-		if (negatedOwnMods.length > 0) state.negatedOwnMods = negatedOwnMods;
-		stateDataList.push(state);
-	});
-	stateDataList.reverse();
-	let initialState;
-	const allMods = stateDataList.reduce((all, state) => {
-		if (!state.mods.length && !state.advancedStates?.length) initialState = state;
-		else state.mods.forEach((mod) => {
-			if (!all.includes(mod)) all.push(mod);
-		});
-		return all;
-	}, []);
-	if (!initialState) stateDataList.push({
-		mods: [],
-		notMods: allMods,
-		value: true
-	});
-	return {
-		states: stateDataList,
-		mods: allMods,
-		hasAdvancedStates
-	};
-}
-const COMPUTE_FUNC_MAP = {
-	"!": (a) => !a,
-	"^": (a, b) => a && !b || !a && b,
-	"|": (a, b) => a || b,
-	"&": (a, b) => a && b
-};
-/**
-* Compute a result based on a model and incoming map.
-*/
-function computeState(computeModel, valueMap) {
-	if (!computeModel) return true;
-	const map = valueMap;
-	if (!Array.isArray(computeModel)) if (typeof valueMap === "function") return !!valueMap(computeModel);
-	else return !!map[computeModel];
-	const func = COMPUTE_FUNC_MAP[computeModel[0]];
-	if (!func) console.warn("CubeUIKit: unexpected compute method in the model", computeModel);
-	let a = computeModel[1];
-	if (typeof a === "object") a = !!computeState(a, valueMap);
-	else if (typeof valueMap === "function") a = !!valueMap(a);
-	else a = !!map[a];
-	if (computeModel.length === 2) return func(a);
-	let b = computeModel[2];
-	if (typeof b === "object") b = !!computeState(b, valueMap);
-	else if (typeof valueMap === "function") b = !!valueMap(b);
-	else b = !!map[b];
-	return !!func(a, b);
-}
 const _innerCache = /* @__PURE__ */ new WeakMap();
+const _topLevelCache = /* @__PURE__ */ new WeakMap();
 function stringifyStyles(styles) {
 	if (styles == null || typeof styles !== "object") return "";
+	const cached = _topLevelCache.get(styles);
+	if (cached !== void 0) return cached;
 	const obj = styles;
 	const keys = Object.keys(obj).sort();
 	const parts = [];
@@ -722,9 +213,11 @@ function stringifyStyles(styles) {
 		} else sv = JSON.stringify(v);
 		parts.push(JSON.stringify(k) + ":" + sv);
 	}
-	return "{" + parts.join(",") + "}";
+	const result = "{" + parts.join(",") + "}";
+	_topLevelCache.set(styles, result);
+	return result;
 }
 
 //#endregion
-export { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList };
+export { CUSTOM_UNITS, DIRECTIONS, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles };
 //# sourceMappingURL=styles.js.map