@tenphi/tasty 0.0.0-snapshot.09c74e2

package/dist/utils/styles.js

@@ -0,0 +1,590 @@
+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
+/**
+* Normalize a color token value.
+* - Boolean `true` is converted to `'transparent'`
+* - Boolean `false` returns `null` (signals the token should be skipped)
+* - Other values are returned as-is
+*
+* @param value - The raw token value
+* @returns Normalized value or null if the token should be skipped
+*/
+function normalizeColorTokenValue(value) {
+	if (value === true) return "transparent";
+	if (value === false) return null;
+	return value;
+}
+const COLOR_VAR_PATTERN = /var\(--([a-z0-9-]+)-color/;
+const COLOR_VAR_RGB_PATTERN = /var\(--([a-z0-9-]+)-color-rgb/;
+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$/
+];
+let colorWarningCount = 0;
+const MAX_COLOR_WARNINGS = 10;
+const CUSTOM_UNITS = {
+	r: "6px",
+	cr: "10px",
+	bw: "1px",
+	ow: "3px",
+	x: "8px",
+	fs: "var(--font-size)",
+	lh: "var(--line-height)",
+	sf: function sf(num) {
+		return `minmax(0, ${num}fr)`;
+	}
+};
+const DIRECTIONS = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const MOD_NAME_CACHE = /* @__PURE__ */ new Map();
+function getModSelector(modName) {
+	if (!MOD_NAME_CACHE.has(modName)) {
+		let selector;
+		const valueModMatch = modName.match(/^([a-z][a-z0-9-]*)(\^=|\$=|\*=|=)(.+)$/i);
+		if (valueModMatch) {
+			const key = valueModMatch[1];
+			const operator = valueModMatch[2];
+			let value = valueModMatch[3];
+			if (value.startsWith("\"") && value.endsWith("\"") || value.startsWith("'") && value.endsWith("'")) value = value.slice(1, -1);
+			selector = `[data-${camelToKebab(key)}${operator}"${value}"]`;
+		} else if (modName.match(/^[a-z]/)) selector = `[data-${camelToKebab(modName)}]`;
+		else if (modName.includes(":has(")) selector = modName.replace(/:has\(([^)]+)\)/g, (match, content) => {
+			if (/[A-Z][a-z]*[>+~]|[>+~][A-Z][a-z]*/.test(content)) console.error(`[Tasty] Invalid :has() selector syntax: "${modName}"\nCombinators (>, +, ~) must have spaces around them when used with element names.\nExample: Use ":has(Body > Row)" instead of ":has(Body>Row)"\nThis is a design choice: the parser uses simple whitespace splitting for performance.`);
+			return `:has(${content.split(/\s+/).map((token) => /^[A-Z]/.test(token) ? `[data-element="${token}"]` : token).join(" ")})`;
+		});
+		else selector = modName;
+		MOD_NAME_CACHE.set(modName, selector);
+	}
+	return MOD_NAME_CACHE.get(modName);
+}
+let __tastyParser = null;
+function getOrCreateParser() {
+	if (!__tastyParser) {
+		__tastyParser = new StyleParser({ units: CUSTOM_UNITS });
+		__tastyParser.setFuncs(__tastyFuncs);
+	}
+	return __tastyParser;
+}
+const __tastyFuncs = { okhsl: okhslFunc };
+function customFunc(name, fn) {
+	__tastyFuncs[name] = fn;
+	getOrCreateParser().setFuncs(__tastyFuncs);
+}
+/**
+* Get the global StyleParser instance.
+* Used by configure() to apply parser configuration.
+*/
+function getGlobalParser() {
+	return getOrCreateParser();
+}
+/**
+* Get the current custom functions registry.
+* Used by configure() to merge with new functions.
+*/
+function getGlobalFuncs() {
+	return __tastyFuncs;
+}
+/**
+* Storage for predefined tokens that are replaced during style parsing.
+* Keys are token names (with $ or # prefix), values are pre-processed CSS values.
+*/
+let __globalPredefinedTokens = null;
+/**
+* Set global predefined tokens.
+* Called from configure() after processing token values.
+* Merges with existing tokens (new tokens override existing ones with same key).
+* Keys are normalized to lowercase (parser lowercases input before classification).
+* @internal
+*/
+function setGlobalPredefinedTokens(tokens) {
+	const normalizedTokens = {};
+	for (const [key, value] of Object.entries(tokens)) {
+		const lowerKey = key.toLowerCase();
+		const lowerValue = value.toLowerCase();
+		if (lowerKey.startsWith("#") && lowerValue === "#current") {
+			console.warn(`Tasty: Using #current to define color token "${key}" is not supported. The #current token represents currentcolor which cannot be used as a base for other tokens.`);
+			continue;
+		}
+		normalizedTokens[lowerKey] = value;
+	}
+	__globalPredefinedTokens = __globalPredefinedTokens ? {
+		...__globalPredefinedTokens,
+		...normalizedTokens
+	} : normalizedTokens;
+	getOrCreateParser().clearCache();
+}
+/**
+* Get the current global predefined tokens.
+* Returns null if no tokens are configured.
+*/
+function getGlobalPredefinedTokens() {
+	return __globalPredefinedTokens;
+}
+/**
+* Reset global predefined tokens.
+* Used for testing.
+* @internal
+*/
+function resetGlobalPredefinedTokens() {
+	__globalPredefinedTokens = null;
+	getOrCreateParser().clearCache();
+}
+/**
+*
+* @param {String} value
+* @param {Number} mode
+* @returns {Object<String,String|Array>}
+*/
+function parseStyle(value) {
+	let str;
+	if (typeof value === "string") str = value;
+	else if (typeof value === "number") str = String(value);
+	else str = "";
+	return getOrCreateParser().process(str);
+}
+/**
+* Parse color. Find it value, name and opacity.
+* Optimized to avoid heavy parseStyle calls for simple color patterns.
+*/
+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));
+	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);
+				colorWarningCount++;
+				if (colorWarningCount === MAX_COLOR_WARNINGS) console.warn("CubeUIKit: 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);
+	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);
+		if (alphaMatch) {
+			const v = parseFloat(alphaMatch[1]);
+			if (!isNaN(v)) opacity = v * 100;
+		}
+	}
+	return {
+		color: firstColor,
+		name: nameMatch ? nameMatch[1] : void 0,
+		opacity
+	};
+}
+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);
+	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();
+function stringifyStyles(styles) {
+	if (styles == null || typeof styles !== "object") return "";
+	const obj = styles;
+	const keys = Object.keys(obj).sort();
+	const parts = [];
+	for (const k of keys) {
+		const v = obj[k];
+		if (v === void 0 || typeof v === "function" || typeof v === "symbol") continue;
+		const c0 = k.charCodeAt(0);
+		const needsInnerSort = (c0 >= 65 && c0 <= 90 || c0 === 38) && v && typeof v === "object" && !Array.isArray(v);
+		let sv;
+		if (needsInnerSort) {
+			sv = _innerCache.get(v);
+			if (sv === void 0) {
+				const innerObj = v;
+				const innerKeys = Object.keys(innerObj).sort();
+				const innerParts = [];
+				for (const ik of innerKeys) {
+					const ivs = JSON.stringify(innerObj[ik]);
+					if (ivs !== void 0) innerParts.push(JSON.stringify(ik) + ":" + ivs);
+				}
+				sv = "{" + innerParts.join(",") + "}";
+				_innerCache.set(v, sv);
+			}
+		} else sv = JSON.stringify(v);
+		parts.push(JSON.stringify(k) + ":" + sv);
+	}
+	return "{" + parts.join(",") + "}";
+}
+
+//#endregion
+export { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList };
+//# sourceMappingURL=styles.js.map