@yamada-ui/react/dist/esm/core/css/css.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { utils_exports } from "../../utils/index.js";
import { getColorSchemeVar, getVar, transformInterpolation } from "../system/var.js";
import { insertImportant, isCSSToken, isImportant, omitImportant } from "./utils.js";
import { colorMix } from "./color-mix.js";
import { conditions, getCondition } from "./conditions.js";
import { styles, variableLengthProperties } from "./styles.js";

//#region src/core/css/css.ts
function isVariableLength(key) {
	return variableLengthProperties.includes(key);
}
function isConditionalObject(breakpoints) {
	return function(value) {
		if (!(0, utils_exports.isObject)(value)) return false;
		const keys = Object.keys(value);
		if (!keys.length) return false;
		if (!keys.includes("base")) return false;
		return keys.every((key) => {
			return breakpoints.isResponsiveKey(key) || key.startsWith("@") || key.startsWith("_");
		});
	};
}
function transformColorModeArray(breakpoints) {
	return function(key, [lightValue, darkValue]) {
		let computedCSS = {};
		if (isConditionalObject(breakpoints)(lightValue)) computedCSS = transformConditionalObject(breakpoints)(key, lightValue);
		else computedCSS[key] = lightValue;
		if (isConditionalObject(breakpoints)(darkValue)) computedCSS[conditions._dark] = transformConditionalObject(breakpoints)(key, darkValue);
		else computedCSS[conditions._dark] = { [key]: darkValue };
		return computedCSS;
	};
}
function transformConditionalObject(breakpoints) {
	return function(key, value) {
		const conditionalKeys = Object.keys(value).filter((key$1) => !breakpoints.isResponsiveKey(key$1));
		return (0, utils_exports.merge)(breakpoints.queries.reduce((prev, { breakpoint, query }) => {
			const breakpointValue = value[breakpoint];
			if (!(0, utils_exports.isUndefined)(breakpointValue)) if ((0, utils_exports.isArray)(breakpointValue)) {
				const colorModeValue = transformColorModeArray(breakpoints)(key, breakpointValue);
				prev = (0, utils_exports.merge)(prev, query ? { [query]: colorModeValue } : colorModeValue);
			} else if (isConditionalObject(breakpoints)(breakpointValue)) {
				const conditionalValue = transformConditionalObject(breakpoints)(key, breakpointValue);
				prev = (0, utils_exports.merge)(prev, query ? { [query]: conditionalValue } : conditionalValue);
			} else prev = (0, utils_exports.merge)(prev, query ? { [query]: { [key]: breakpointValue } } : { [key]: breakpointValue });
			return prev;
		}, {}), conditionalKeys.reduce((prev, conditionalKey) => {
			const query = getCondition(conditionalKey);
			prev[query] = { [key]: value[conditionalKey] };
			return prev;
		}, {}));
	};
}
function transformConditionalValue({ breakpoints }) {
	return function(key, value) {
		if ((0, utils_exports.isArray)(value)) return transformColorModeArray(breakpoints)(key, value);
		else if (isConditionalObject(breakpoints)(value)) return transformConditionalObject(breakpoints)(key, value);
		else return { [key]: value };
	};
}
function expandCSS(system) {
	return function(css$1) {
		let computedCSS = {};
		for (let [key, value] of Object.entries(css$1)) {
			if (value == null) continue;
			if (!isVariableLength(key)) computedCSS = (0, utils_exports.merge)(computedCSS, transformConditionalValue(system)(key, value));
			else computedCSS = (0, utils_exports.merge)(computedCSS, { [key]: value });
		}
		return computedCSS;
	};
}
function valueToVar(system) {
	return function(prop, value) {
		const result = transformInterpolation(value, function(value$1, fallbackValue) {
			if (value$1.includes("colorScheme.")) return getColorSchemeVar(system)(value$1);
			else if (value$1.includes("colors.")) return colorMix(value$1, {
				fallback: fallbackValue,
				system
			});
			else if (isCSSToken(system)(value$1)) return system.cssMap[value$1].ref;
			else if (fallbackValue) {
				fallbackValue = isCSSToken(system)(fallbackValue) ? system.cssMap[fallbackValue].ref : fallbackValue;
				return getVar(value$1, fallbackValue);
			} else return getVar(value$1);
		});
		if (prop.startsWith("--") && (0, utils_exports.isString)(result)) if (result.includes("colorScheme.")) return getColorSchemeVar(system)(result);
		else if (result.includes("colors.")) return colorMix(result, { system });
		else if (isCSSToken(system)(result)) return system.cssMap[result].ref;
		else return result;
		else return result;
	};
}
function mergeCSS(prev, value, prop, properties) {
	if (properties) for (const property of properties) {
		prev[property] = prev[property] ?? {};
		prev[property] = (0, utils_exports.merge)(prev[property], value);
	}
	else {
		prev[prop] = prev[prop] ?? {};
		prev[prop] = (0, utils_exports.merge)(prev[prop], value);
	}
	return prev;
}
function insertCSS(prev, value, prop, properties) {
	if (properties) for (const property of properties) prev[property] = value;
	else prev[prop] = value;
	return prev;
}
function getStyle(prop) {
	const style = styles[prop];
	return style === true ? { properties: [prop] } : style;
}
function css(system, theme = {}) {
	return function(cssOrFn) {
		function createCSS(cssOrFn$1) {
			const cssObj = (0, utils_exports.runIfFn)(cssOrFn$1, system);
			const computedCSS = expandCSS(system)(cssObj);
			let prev = {};
			for (let [prop, value] of Object.entries(computedCSS)) {
				value = valueToVar(system)(prop, value);
				if (value == null) continue;
				prop = getCondition(prop);
				const style = getStyle(prop);
				const options = {
					css,
					prev,
					properties: style?.properties,
					system,
					theme
				};
				if ((0, utils_exports.isObject)(value)) {
					value = style?.transform?.(value, options) ?? value;
					if ((0, utils_exports.isObject)(value)) prev = mergeCSS(prev, createCSS(value), prop, style?.properties);
					else prev = insertCSS(prev, value, prop, style?.properties);
					continue;
				}
				const important = isImportant(value);
				value = omitImportant(value);
				value = style?.transform?.(value, options) ?? value;
				if (important) value = insertImportant(value, style);
				if (style?.static) prev = (0, utils_exports.merge)(prev, style.static);
				if ((0, utils_exports.isObject)(value)) {
					prev = (0, utils_exports.merge)(prev, createCSS(value));
					continue;
				}
				prev = insertCSS(prev, value, prop, style?.properties);
			}
			return prev;
		}
		return createCSS(cssOrFn);
	};
}

//#endregion
export { css, getStyle, transformConditionalValue };
//# sourceMappingURL=css.js.map