@cube-dev/ui-kit 0.113.1 → 0.115.0

package/dist/tasty/pipeline/index.js

@@ -0,0 +1,639 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { Lru } from "../parser/lru.js";
+import { stringifyStyles } from "../utils/styles.js";
+import { createStyle } from "../styles/createStyle.js";
+import { STYLE_HANDLER_MAP } from "../styles/index.js";
+import { createStateParserContext, extractLocalPredefinedStates } from "../states/index.js";
+import { and, falseCondition, not, or, trueCondition } from "./conditions.js";
+import { simplifyCondition } from "./simplify.js";
+import { buildExclusiveConditions, expandExclusiveOrs, expandOrConditions, isValueMapping, parseStyleEntries } from "./exclusive.js";
+import { buildAtRulesFromVariant, conditionToCSS, modifierToCSS, pseudoToCSS, rootConditionsToCSS } from "./materialize.js";
+import { parseStateKey } from "./parseStateKey.js";
+
+//#region src/tasty/pipeline/index.ts
+/**
+* Tasty Style Rendering Pipeline
+*
+* This is the main entrypoint for the new pipeline implementation.
+* It implements the complete flow from style objects to CSS rules.
+*
+* Pipeline stages:
+* 1. PARSE CONDITIONS - Parse state keys into ConditionNode trees
+* 2. BUILD EXCLUSIVE CONDITIONS - AND with negation of higher-priority conditions
+* 3. SIMPLIFY CONDITIONS - Apply boolean algebra, detect contradictions
+* 4. GROUP BY HANDLER - Collect styles per handler, compute combinations
+* 5. COMPUTE CSS VALUES - Call handlers to get CSS declarations
+* 6. MERGE BY VALUE - Merge rules with identical CSS output
+* 7. MATERIALIZE CSS - Convert conditions to CSS selectors + at-rules
+*/
+const pipelineCache = new Lru(5e3);
+/**
+* Clear the pipeline cache (for testing)
+*/
+function clearPipelineCache() {
+	pipelineCache.clear();
+}
+function runPipeline(styles, parserContext) {
+	const allRules = [];
+	processStyles(styles, "", parserContext, allRules);
+	const seen = /* @__PURE__ */ new Set();
+	return allRules.filter((rule) => {
+		const key = `${rule.selector}|${rule.declarations}|${JSON.stringify(rule.atRules || [])}|${rule.rootPrefix || ""}`;
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+/**
+* Process styles at a given nesting level
+*/
+function processStyles(styles, selectorSuffix, parserContext, allRules) {
+	const keys = Object.keys(styles);
+	const selectorKeys = keys.filter((key) => isSelector(key));
+	const styleKeys = keys.filter((key) => !isSelector(key) && !key.startsWith("@"));
+	for (const key of selectorKeys) {
+		const nestedStyles = styles[key];
+		if (!nestedStyles || typeof nestedStyles !== "object") continue;
+		const suffixes = getAllSelectors(key, nestedStyles);
+		if (!suffixes) continue;
+		const { $: _omit, ...cleanedStyles } = nestedStyles;
+		const subLocalStates = extractLocalPredefinedStates(cleanedStyles);
+		const hasSubStates = Object.keys(subLocalStates).length > 0;
+		const subContext = {
+			...parserContext,
+			isSubElement: true,
+			localPredefinedStates: hasSubStates ? {
+				...parserContext.localPredefinedStates,
+				...subLocalStates
+			} : parserContext.localPredefinedStates
+		};
+		for (const suffix of suffixes) processStyles(cleanedStyles, selectorSuffix + suffix, subContext, allRules);
+	}
+	const handlerQueue = buildHandlerQueue(styleKeys, styles);
+	for (const { handler, styleMap } of handlerQueue) {
+		const lookupStyles = handler.__lookupStyles;
+		const exclusiveByStyle = /* @__PURE__ */ new Map();
+		for (const styleName of lookupStyles) {
+			const value = styleMap[styleName];
+			if (value === void 0) continue;
+			if (isValueMapping(value)) {
+				const fullyExpanded = expandExclusiveOrs(buildExclusiveConditions(expandOrConditions(parseStyleEntries(styleName, value, (stateKey) => parseStateKey(stateKey, { context: parserContext })))));
+				exclusiveByStyle.set(styleName, fullyExpanded);
+			} else exclusiveByStyle.set(styleName, [{
+				styleKey: styleName,
+				stateKey: "",
+				value,
+				condition: trueCondition(),
+				priority: 0,
+				exclusiveCondition: trueCondition()
+			}]);
+		}
+		const stateSnapshots = computeStateCombinations(exclusiveByStyle, lookupStyles);
+		const computedRules = [];
+		for (const snapshot of stateSnapshots) {
+			const result = handler(snapshot.values);
+			if (!result) continue;
+			const results = Array.isArray(result) ? result : [result];
+			for (const r of results) {
+				if (!r || typeof r !== "object") continue;
+				const { $, ...styleProps } = r;
+				const declarations = {};
+				for (const [prop, val] of Object.entries(styleProps)) if (val != null && val !== "") declarations[prop] = String(val);
+				if (Object.keys(declarations).length === 0) continue;
+				const suffixes = $ ? (Array.isArray($) ? $ : [$]).map((s) => selectorSuffix + normalizeSelectorSuffix(String(s))) : [selectorSuffix];
+				for (const suffix of suffixes) computedRules.push({
+					condition: snapshot.condition,
+					declarations,
+					selectorSuffix: suffix
+				});
+			}
+		}
+		const mergedRules = mergeByValue(computedRules);
+		for (const rule of mergedRules) {
+			const cssRules = materializeComputedRule(rule);
+			allRules.push(...cssRules);
+		}
+	}
+}
+/**
+* Check if a key is a CSS selector
+*/
+function isSelector(key) {
+	return key.startsWith("&") || key.startsWith(".") || /^[A-Z]/.test(key);
+}
+/**
+* Get all selector suffixes for a sub-element key.
+*
+* Handles three types of selector keys:
+* - `&` prefix: Raw selector suffix (e.g., `&:hover` → `:hover`)
+* - `.` prefix: Class selector (e.g., `.active` → ` .active`)
+* - Uppercase: Sub-element with optional `$` affix pattern
+*
+* @param key - The sub-element key (e.g., 'Label', '&:hover', '.active')
+* @param styles - The styles object, may contain `$` property for selector affix
+* @returns Array of selector suffixes, or null if invalid (with console warning)
+*
+* @example
+* getAllSelectors('Label', {})
+* // → [' [data-element="Label"]']
+*
+* getAllSelectors('Cell', { $: '>, >Body>' })
+* // → ['> [data-element="Cell"]', ' [data-element="Body"] > [data-element="Cell"]']
+*/
+function getAllSelectors(key, styles) {
+	if (key.startsWith("&")) return [key.slice(1)];
+	if (key.startsWith(".")) return [` ${key}`];
+	if (/^[A-Z]/.test(key)) {
+		const affix = styles?.$;
+		if (affix !== void 0) {
+			const result = processAffix(String(affix), key);
+			if (!result.valid) {
+				console.warn(`[Tasty] ${result.reason}`);
+				return null;
+			}
+			return result.selectors;
+		}
+		return [` [data-element="${key}"]`];
+	}
+	return null;
+}
+/**
+* Process selector affix pattern and return selector(s)
+*
+* Supports:
+* - Direct child: '>'
+* - Chained elements: '>Body>Row>'
+* - HTML tags: 'a', '>ul>li', 'button:hover'
+* - Pseudo-elements on root: '::before'
+* - Pseudo on sub-element: '@::before', '>@:hover'
+* - Classes: '.active', '>@.active'
+* - Multiple selectors: '>, >Body>'
+* - Sibling combinators (after element): '>Item+', '>Item~'
+*/
+function processAffix(affix, key) {
+	const trimmed = affix.trim();
+	if (!trimmed) return {
+		valid: true,
+		selectors: [` [data-element="${key}"]`]
+	};
+	const patterns = trimmed.split(",").map((p) => p.trim());
+	const selectors = [];
+	for (const pattern of patterns) {
+		const validation = validatePattern(pattern);
+		if (!validation.valid) return validation;
+		const selector = processSinglePattern(pattern, key);
+		selectors.push(selector);
+	}
+	return {
+		valid: true,
+		selectors
+	};
+}
+/**
+* Recognized token patterns for selector affix validation.
+*
+* These patterns are used to tokenize and validate `$` affix strings.
+* Order matters: more specific patterns must come first to avoid
+* partial matches (e.g., `::before` must match before `:` alone).
+*
+* Unrecognized tokens (like `#id`, `*`, or numbers) will cause validation to fail.
+*/
+const VALID_TOKEN_PATTERNS = [
+	/^[>+~]/,
+	/^[A-Z][a-zA-Z0-9]*/,
+	/^@/,
+	/^::?[a-z][a-z0-9-]*(?:\([^)]*\))?/,
+	/^\.[a-zA-Z_-][a-zA-Z0-9_-]*/,
+	/^\[[^\]]+\]/,
+	/^[a-z][a-z0-9-]*/,
+	/^\s+/,
+	/^&/
+];
+/**
+* Scan a pattern for unrecognized tokens.
+*
+* Iterates through the pattern, consuming recognized tokens until
+* either the pattern is fully consumed (valid) or an unrecognized
+* character sequence is found (invalid).
+*
+* @param pattern - The selector pattern to validate
+* @returns The first unrecognized token found, or null if all tokens are valid
+*
+* @example
+* findUnrecognizedTokens('>Body>Row>') // → null (valid)
+* findUnrecognizedTokens('123')         // → '123' (invalid)
+* findUnrecognizedTokens('#myId')       // → '#' (invalid)
+*/
+function findUnrecognizedTokens(pattern) {
+	let remaining = pattern;
+	while (remaining.length > 0) {
+		let matched = false;
+		for (const regex of VALID_TOKEN_PATTERNS) {
+			const match = remaining.match(regex);
+			if (match) {
+				remaining = remaining.slice(match[0].length);
+				matched = true;
+				break;
+			}
+		}
+		if (!matched) {
+			const unrecognized = remaining.match(/^[^\s>+~@.:[\]A-Z]+/);
+			return unrecognized ? unrecognized[0] : remaining[0];
+		}
+	}
+	return null;
+}
+/**
+* Validate a selector pattern for structural correctness.
+*
+* Checks for:
+* 1. Out-of-scope selectors: Patterns starting with `+` or `~` target siblings
+*    of the root element, which is outside the component's DOM scope.
+* 2. Consecutive combinators: Patterns like `>>` or `>+` are malformed CSS.
+* 3. Unrecognized tokens: Characters/sequences not matching valid CSS selectors.
+*
+* @param pattern - A single selector pattern (already split by comma)
+* @returns AffixResult indicating validity and error reason if invalid
+*
+* @example
+* validatePattern('>Body>Row>')  // → { valid: true, selectors: [] }
+* validatePattern('+')           // → { valid: false, reason: '...outside root scope...' }
+* validatePattern('>>')          // → { valid: false, reason: '...consecutive combinators...' }
+*/
+function validatePattern(pattern) {
+	const trimmed = pattern.trim();
+	if (/^[+~]/.test(trimmed)) return {
+		valid: false,
+		reason: `Selector affix "${pattern}" targets elements outside the root scope. Sibling selectors (+, ~) must be preceded by an element inside the root. Use ">Element+" or ">Element~" instead.`
+	};
+	if (/[>+~]{2,}/.test(trimmed.replace(/\s+/g, ""))) return {
+		valid: false,
+		reason: `Selector affix "${pattern}" contains consecutive combinators.`
+	};
+	const unrecognized = findUnrecognizedTokens(trimmed);
+	if (unrecognized) return {
+		valid: false,
+		reason: `Selector affix "${pattern}" contains unrecognized token "${unrecognized}". Valid tokens: combinators (>, +, ~), element names (Uppercase), @ placeholder, pseudo (:hover, ::before), class (.name), attribute ([attr]).`
+	};
+	return {
+		valid: true,
+		selectors: []
+	};
+}
+/**
+* Process a single selector pattern into a CSS selector suffix.
+*
+* This is the main transformation function that converts a `$` affix pattern
+* into a valid CSS selector suffix. It handles:
+*
+* 1. `@` placeholder replacement with `[data-element="key"]`
+* 2. Key injection based on pattern ending (see `shouldInjectKey`)
+* 3. Proper spacing for descendant vs direct child selectors
+*
+* @param pattern - A single validated selector pattern
+* @param key - The sub-element key to inject (e.g., 'Label', 'Cell')
+* @returns CSS selector suffix ready to append to the root selector
+*
+* @example
+* processSinglePattern('>', 'Row')
+* // → '> [data-element="Row"]'
+*
+* processSinglePattern('>Body>Row>', 'Cell')
+* // → '> [data-element="Body"] > [data-element="Row"] > [data-element="Cell"]'
+*
+* processSinglePattern('::before', 'Before')
+* // → '::before' (no key injection for pseudo on root)
+*
+* processSinglePattern('>@:hover', 'Item')
+* // → '> [data-element="Item"]:hover'
+*/
+function processSinglePattern(pattern, key) {
+	let normalized = pattern.replace(/^&/, "").trim();
+	if (!normalized) return ` [data-element="${key}"]`;
+	const startsWithPseudo = /^::?[a-z]/.test(normalized);
+	let result = transformPattern(normalized);
+	if (result.includes("@")) {
+		result = result.replace(/@ (?=[.:])/g, "@");
+		result = result.replace(/@/g, `[data-element="${key}"]`);
+		if (!startsWithPseudo && !result.startsWith(" ")) result = " " + result;
+		return result;
+	}
+	if (shouldInjectKey(normalized)) result = result + ` [data-element="${key}"]`;
+	if (!startsWithPseudo && !result.startsWith(" ")) result = " " + result;
+	return result;
+}
+/**
+* Transform a selector pattern by converting element names and normalizing spacing.
+*
+* This is a character-by-character tokenizer that:
+* - Converts uppercase names to `[data-element="Name"]` selectors
+* - Adds proper spacing around combinators (>, +, ~)
+* - Preserves lowercase tags, classes, pseudos, and attributes as-is
+* - Keeps @ placeholder for later replacement
+*
+* The tokenizer handles these token types in order:
+* 1. Whitespace (skipped)
+* 2. Combinators: >, +, ~ (add surrounding spaces)
+* 3. Uppercase names: Body, Row (convert to [data-element="..."])
+* 4. @ placeholder (keep for later replacement)
+* 5. Pseudo: :hover, ::before (attach to previous token)
+* 6. Tags: a, div, button (keep as-is with spacing)
+* 7. Classes: .active (attach to previous element/tag/placeholder)
+* 8. Attributes: [type="text"] (keep as-is)
+*
+* @param pattern - The raw selector pattern to transform
+* @returns Transformed pattern with proper CSS selector syntax
+*
+* @example
+* transformPattern('>Body>Row>')
+* // → '> [data-element="Body"] > [data-element="Row"] >'
+*
+* transformPattern('button.primary:hover')
+* // → 'button.primary:hover'
+*/
+function transformPattern(pattern) {
+	let result = "";
+	let i = 0;
+	while (i < pattern.length) {
+		const char = pattern[i];
+		if (/\s/.test(char)) {
+			i++;
+			continue;
+		}
+		if (/[>+~]/.test(char)) {
+			if (result && !result.endsWith(" ")) result += " ";
+			result += char;
+			i++;
+			continue;
+		}
+		if (/[A-Z]/.test(char)) {
+			let name = "";
+			while (i < pattern.length && /[a-zA-Z0-9]/.test(pattern[i])) {
+				name += pattern[i];
+				i++;
+			}
+			if (result && !result.endsWith(" ")) result += " ";
+			result += `[data-element="${name}"]`;
+			continue;
+		}
+		if (char === "@") {
+			if (result && !result.endsWith(" ")) result += " ";
+			result += "@";
+			i++;
+			continue;
+		}
+		if (char === ":") {
+			let pseudo = "";
+			while (i < pattern.length && !/[\s>+~,@]/.test(pattern[i]) && !/[A-Z]/.test(pattern[i])) {
+				pseudo += pattern[i];
+				i++;
+			}
+			result += pseudo;
+			continue;
+		}
+		if (/[a-z]/.test(char)) {
+			let tag = "";
+			while (i < pattern.length && /[a-z0-9-]/.test(pattern[i])) {
+				tag += pattern[i];
+				i++;
+			}
+			if (result && !result.endsWith(" ")) result += " ";
+			result += tag;
+			continue;
+		}
+		if (char === ".") {
+			const lastNonSpace = result.replace(/\s+$/, "").slice(-1);
+			const attachToLast = lastNonSpace === "]" || lastNonSpace === "@" || /[a-zA-Z0-9-]/.test(lastNonSpace);
+			if (result && !attachToLast && !result.endsWith(" ")) result += " ";
+			let cls = ".";
+			i++;
+			while (i < pattern.length && /[a-zA-Z0-9_-]/.test(pattern[i])) {
+				cls += pattern[i];
+				i++;
+			}
+			result += cls;
+			continue;
+		}
+		if (char === "[") {
+			const lastNonSpace = result.replace(/\s+$/, "").slice(-1);
+			const attachToLast = lastNonSpace === "]" || lastNonSpace === "@" || /[a-zA-Z0-9-]/.test(lastNonSpace);
+			if (result && !attachToLast && !result.endsWith(" ")) result += " ";
+			let attr = "";
+			let depth = 0;
+			while (i < pattern.length) {
+				attr += pattern[i];
+				if (pattern[i] === "[") depth++;
+				if (pattern[i] === "]") depth--;
+				i++;
+				if (depth === 0) break;
+			}
+			result += attr;
+			continue;
+		}
+		result += char;
+		i++;
+	}
+	return result;
+}
+/**
+* Determine if the sub-element key should be auto-injected based on pattern ending.
+*
+* Key injection rules (when no @ placeholder is present):
+*
+* | Pattern Ending | Inject Key? | Example | Result |
+* |----------------|-------------|---------|--------|
+* | Combinator (>, +, ~) | Yes | `'>Body>'` | `> [data-element="Body"] > [el]` |
+* | Uppercase element | Yes | `'>Body>Row'` | `> [el1] > [el2] [key]` |
+* | Lowercase tag | Yes | `'>ul>li'` | `> ul > li [key]` |
+* | Pseudo (:hover, ::before) | No | `'::before'` | `::before` |
+* | Class (.active) | No | `'.active'` | `.active` |
+* | Attribute ([type]) | No | `'[type="text"]'` | `[type="text"]` |
+*
+* @param pattern - The normalized pattern (after stripping &)
+* @returns true if key should be injected, false otherwise
+*
+* @example
+* shouldInjectKey('>')           // → true (trailing combinator)
+* shouldInjectKey('>Body>Row')   // → true (ends with element)
+* shouldInjectKey('>ul>li')      // → true (ends with tag)
+* shouldInjectKey('::before')    // → false (ends with pseudo)
+* shouldInjectKey('.active')     // → false (ends with class)
+* shouldInjectKey('a:hover')     // → false (ends with pseudo)
+* shouldInjectKey('button.primary') // → false (ends with class)
+*/
+function shouldInjectKey(pattern) {
+	const trimmed = pattern.trim();
+	if (/[>+~]$/.test(trimmed)) return true;
+	if (/(?:^|[\s>+~\]:])[A-Z][a-zA-Z0-9]*$/.test(trimmed)) return true;
+	if (/(?<![:.])(?:^|[\s>+~])[a-z][a-z0-9-]*$/.test(trimmed)) return true;
+	return false;
+}
+/**
+* Normalize selector suffix from $ property
+*/
+function normalizeSelectorSuffix(suffix) {
+	if (!suffix) return "";
+	return suffix.startsWith("&") ? suffix.slice(1) : suffix;
+}
+/**
+* Build handler queue from style keys
+*/
+function buildHandlerQueue(styleKeys, styles) {
+	const queue = [];
+	const seenHandlers = /* @__PURE__ */ new Set();
+	for (const styleName of styleKeys) {
+		let handlers = STYLE_HANDLER_MAP[styleName];
+		if (!handlers) handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
+		for (const handler of handlers) {
+			if (seenHandlers.has(handler)) continue;
+			seenHandlers.add(handler);
+			const lookupStyles = handler.__lookupStyles;
+			const styleMap = {};
+			for (const name of lookupStyles) if (styles[name] !== void 0) styleMap[name] = styles[name];
+			queue.push({
+				handler,
+				styleMap
+			});
+		}
+	}
+	return queue;
+}
+/**
+* Compute all valid state combinations for a handler's lookup styles
+*/
+function computeStateCombinations(exclusiveByStyle, lookupStyles) {
+	const combinations = cartesianProduct(lookupStyles.map((style) => exclusiveByStyle.get(style) || []));
+	const snapshots = [];
+	for (const combo of combinations) {
+		const simplified = simplifyCondition(and(...combo.map((e) => e.exclusiveCondition)));
+		if (simplified.kind === "false") continue;
+		const values = {};
+		for (const entry of combo) values[entry.styleKey] = entry.value;
+		snapshots.push({
+			condition: simplified,
+			values
+		});
+	}
+	return snapshots;
+}
+/**
+* Cartesian product of arrays
+*/
+function cartesianProduct(arrays) {
+	if (arrays.length === 0) return [[]];
+	const nonEmpty = arrays.filter((a) => a.length > 0);
+	if (nonEmpty.length === 0) return [[]];
+	return nonEmpty.reduce((acc, arr) => acc.flatMap((combo) => arr.map((item) => [...combo, item])), [[]]);
+}
+/**
+* Merge rules with identical CSS output
+*/
+function mergeByValue(rules) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const rule of rules) {
+		const key = `${rule.selectorSuffix}|${JSON.stringify(rule.declarations)}`;
+		if (!groups.has(key)) groups.set(key, []);
+		groups.get(key).push(rule);
+	}
+	const merged = [];
+	for (const [, groupRules] of groups) if (groupRules.length === 1) merged.push(groupRules[0]);
+	else {
+		const mergedCondition = simplifyCondition(or(...groupRules.map((r) => r.condition)));
+		merged.push({
+			condition: mergedCondition,
+			declarations: groupRules[0].declarations,
+			selectorSuffix: groupRules[0].selectorSuffix
+		});
+	}
+	return merged;
+}
+/**
+* Build selector fragment from a variant (without className prefix)
+*/
+function buildSelectorFromVariant(variant, selectorSuffix) {
+	let selector = "";
+	for (const mod of variant.modifierConditions) selector += modifierToCSS(mod);
+	for (const pseudo of variant.pseudoConditions) selector += pseudoToCSS(pseudo);
+	selector += selectorSuffix;
+	for (const own of variant.ownConditions) if ("attribute" in own) selector += modifierToCSS(own);
+	else selector += pseudoToCSS(own);
+	return selector;
+}
+/**
+* Materialize a computed rule to final CSS format
+*
+* Returns an array because OR conditions may generate multiple CSS rules
+* (when different branches have different at-rules)
+*/
+function materializeComputedRule(rule) {
+	const components = conditionToCSS(rule.condition);
+	if (components.isImpossible || components.variants.length === 0) return [];
+	const declarations = Object.entries(rule.declarations).map(([prop, value]) => `${prop}: ${value};`).join(" ");
+	const getRootPrefixKey = (variant) => {
+		return variant.rootConditions.map((r) => r.negated ? `!${r.selector}` : r.selector).sort().join("|");
+	};
+	const byAtRules = /* @__PURE__ */ new Map();
+	for (const variant of components.variants) {
+		const atRules = buildAtRulesFromVariant(variant);
+		const key = atRules.sort().join("|||") + "###" + getRootPrefixKey(variant);
+		const group = byAtRules.get(key);
+		if (group) group.variants.push(variant);
+		else byAtRules.set(key, {
+			variants: [variant],
+			atRules,
+			rootPrefix: rootConditionsToCSS(variant.rootConditions)
+		});
+	}
+	const rules = [];
+	for (const [, group] of byAtRules) {
+		const selectorFragments = group.variants.map((v) => buildSelectorFromVariant(v, rule.selectorSuffix));
+		const cssRule = {
+			selector: selectorFragments.length === 1 ? selectorFragments[0] : selectorFragments,
+			declarations
+		};
+		if (group.atRules.length > 0) cssRule.atRules = group.atRules;
+		if (group.rootPrefix) cssRule.rootPrefix = group.rootPrefix;
+		rules.push(cssRule);
+	}
+	return rules;
+}
+function renderStyles(styles, classNameOrSelector, options) {
+	const directSelector = !!classNameOrSelector;
+	if (!styles) return directSelector ? [] : { rules: [] };
+	const cacheKey = stringifyStyles(styles);
+	let rules = pipelineCache.get(cacheKey);
+	if (!rules) {
+		rules = runPipeline(styles, createStateParserContext(styles));
+		pipelineCache.set(cacheKey, rules);
+	}
+	if (directSelector) {
+		const shouldDouble = options?.doubleSelector ?? false;
+		return rules.map((rule) => {
+			const result = {
+				selector: (Array.isArray(rule.selector) ? rule.selector : rule.selector ? [rule.selector] : [""]).map((part) => {
+					let sel = part ? `${classNameOrSelector}${part}` : classNameOrSelector;
+					if (shouldDouble && sel.startsWith(".")) {
+						const classMatch = sel.match(/^\.[a-zA-Z_-][a-zA-Z0-9_-]*/);
+						if (classMatch) sel = classMatch[0] + sel;
+					}
+					if (rule.rootPrefix) sel = `${rule.rootPrefix} ${sel}`;
+					return sel;
+				}).join(", "),
+				declarations: rule.declarations
+			};
+			if (rule.atRules && rule.atRules.length > 0) result.atRules = rule.atRules;
+			return result;
+		});
+	}
+	return { rules: rules.map((r) => ({
+		selector: Array.isArray(r.selector) ? r.selector.join("|||") : r.selector,
+		declarations: r.declarations,
+		atRules: r.atRules,
+		needsClassName: true,
+		rootPrefix: r.rootPrefix
+	})) };
+}
+
+//#endregion
+export { clearPipelineCache, isSelector, renderStyles };
+//# sourceMappingURL=index.js.map