boss-css 0.0.1 → 0.0.2

package/dist/merge/index.mjs

@@ -0,0 +1,586 @@
+import isCSSProp from "@boss-css/is-css-prop";
+import { merge as merge$1 } from "ts-deepmerge";
+
+//#region src/merge/index.ts
+const cssPropCache = /* @__PURE__ */ new Map();
+const whitespaceRegexp = /\s/;
+const borderSideVariants = [
+	"width",
+	"style",
+	"color"
+];
+const physicalSides = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const logicalAxes = ["block", "inline"];
+const logicalSides = logicalAxes.flatMap((axis) => [`${axis}-start`, `${axis}-end`]);
+const defaultConfig = {
+	cacheSize: 500,
+	sortContexts: true,
+	orderSensitiveContexts: ["before", "after"],
+	compoundContexts: ["at", "container"],
+	conflictMap: createDefaultConflictMap()
+};
+const createBossMerge = (config = {}) => {
+	const resolved = resolveConfig(config);
+	return (...classLists) => {
+		const classList = join(...classLists);
+		if (!classList) return "";
+		const cached = resolved.cache.get(classList);
+		if (cached) return cached;
+		const result = mergeClassList(classList, resolved);
+		resolved.cache.set(classList, result);
+		return result;
+	};
+};
+const join = (...classLists) => {
+	let index = 0;
+	let argument;
+	let resolvedValue;
+	let string = "";
+	while (index < classLists.length) if (argument = classLists[index++]) {
+		if (resolvedValue = toValue(argument)) {
+			string && (string += " ");
+			string += resolvedValue;
+		}
+	}
+	return string;
+};
+const defaultMerge = createBossMerge();
+const merge = (...inputs) => {
+	const objects = inputs.filter(isPlainObject);
+	const nonObjects = inputs.filter((input) => input != null && !isPlainObject(input));
+	if (objects.length && nonObjects.length) throw new Error("boss-css/merge: cannot mix object inputs with className values");
+	if (objects.length) return merge$1(...objects);
+	return defaultMerge(...inputs);
+};
+function resolveConfig(config) {
+	const cacheSize = config.cacheSize ?? defaultConfig.cacheSize;
+	const sortContexts = config.sortContexts ?? defaultConfig.sortContexts;
+	const orderSensitiveContexts = config.orderSensitiveContexts ?? defaultConfig.orderSensitiveContexts;
+	const compoundContexts = config.compoundContexts ?? defaultConfig.compoundContexts;
+	const conflictMap = normalizeConflictMap(config.conflictMap ? {
+		...defaultConfig.conflictMap,
+		...config.conflictMap
+	} : defaultConfig.conflictMap);
+	return {
+		cacheSize,
+		sortContexts,
+		orderSensitiveContexts,
+		orderSensitiveSet: new Set(orderSensitiveContexts),
+		compoundContexts,
+		compoundContextSet: new Set(compoundContexts),
+		conflictMap,
+		cache: createLruCache(cacheSize)
+	};
+}
+const mergeClassList = (classList, config) => {
+	const tokens = splitSelectors(classList);
+	const parsedTokens = [];
+	const lastIndexByKey = /* @__PURE__ */ new Map();
+	for (const token of tokens.flatMap(expandGroupedSelector)) {
+		const conflictKeys = getConflictKeys(token, config);
+		if (conflictKeys) {
+			for (const key of conflictKeys) {
+				const previousIndex = lastIndexByKey.get(key);
+				if (previousIndex !== void 0) parsedTokens[previousIndex] = { value: "" };
+			}
+			for (const key of conflictKeys) lastIndexByKey.set(key, parsedTokens.length);
+		}
+		parsedTokens.push({ value: token });
+	}
+	return parsedTokens.filter((entry) => entry.value).map((entry) => entry.value).join(" ");
+};
+const toValue = (mix) => {
+	if (!mix) return "";
+	if (typeof mix === "string") return mix;
+	if (typeof mix === "object" && Array.isArray(mix)) {
+		let resolvedValue;
+		let string = "";
+		for (let k = 0; k < mix.length; k++) if (mix[k]) {
+			if (resolvedValue = toValue(mix[k])) {
+				string && (string += " ");
+				string += resolvedValue;
+			}
+		}
+		return string;
+	}
+	return "";
+};
+const splitSelectors = (input) => {
+	const results = [];
+	let current = "";
+	let braceDepth = 0;
+	let bracketDepth = 0;
+	for (const char of input) {
+		if (char === "{") braceDepth += 1;
+		if (char === "}") braceDepth = Math.max(0, braceDepth - 1);
+		if (char === "[") bracketDepth += 1;
+		if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+		if (braceDepth === 0 && bracketDepth === 0 && whitespaceRegexp.test(char)) {
+			if (current) results.push(current);
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	if (current) results.push(current);
+	return results;
+};
+const expandGroupedSelector = (selector) => {
+	const grouped = parseGroupedSelector(selector);
+	if (!grouped) return [selector];
+	const nextEntries = grouped.entries.map((entry$1) => ({
+		name: entry$1.name,
+		rawValue: entry$1.rawValue
+	}));
+	if (nextEntries.length > 1) return [...nextEntries].sort((a, b) => a.name.localeCompare(b.name)).map((entry$1) => `${grouped.prefix}:${entry$1.name}:${entry$1.rawValue}`);
+	const [entry] = nextEntries;
+	return [`${grouped.prefix}:{${entry.name}:${entry.rawValue}}`];
+};
+const parseGroupedSelector = (selector) => {
+	if (!selector.endsWith("}")) return null;
+	const groupStart = findGroupStart(selector);
+	if (groupStart === -1) return null;
+	const prefix = selector.slice(0, groupStart);
+	const entries = splitOutside(selector.slice(groupStart + 2, -1), ";").map((entry) => entry.trim()).filter(Boolean).map((entry) => {
+		const parts = splitOnceOutside(entry, ":");
+		if (!parts) return null;
+		const [name, rawValue] = parts;
+		return {
+			name: name.trim(),
+			rawValue: rawValue.trim()
+		};
+	}).filter((entry) => Boolean(entry));
+	if (!entries.length) return null;
+	return {
+		prefix,
+		entries
+	};
+};
+const splitFragments = (selector) => splitOutside(selector, ":");
+const splitOutside = (input, delimiter) => {
+	const results = [];
+	let current = "";
+	let braceDepth = 0;
+	let bracketDepth = 0;
+	for (const char of input) {
+		if (char === "{") braceDepth += 1;
+		if (char === "}") braceDepth = Math.max(0, braceDepth - 1);
+		if (char === "[") bracketDepth += 1;
+		if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+		if (char === delimiter && braceDepth === 0 && bracketDepth === 0) {
+			if (current) results.push(current);
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	if (current) results.push(current);
+	return results;
+};
+const splitOnceOutside = (input, delimiter) => {
+	let braceDepth = 0;
+	let bracketDepth = 0;
+	for (let i = 0; i < input.length; i += 1) {
+		const char = input[i];
+		if (char === "{") braceDepth += 1;
+		if (char === "}") braceDepth = Math.max(0, braceDepth - 1);
+		if (char === "[") bracketDepth += 1;
+		if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+		if (char === delimiter && braceDepth === 0 && bracketDepth === 0) return [input.slice(0, i), input.slice(i + 1)];
+	}
+	return null;
+};
+const findGroupStart = (selector) => {
+	let bracketDepth = 0;
+	for (let i = 0; i < selector.length - 1; i += 1) {
+		const char = selector[i];
+		if (char === "[") bracketDepth += 1;
+		if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+		if (bracketDepth === 0 && selector[i] === ":" && selector[i + 1] === "{") return i;
+	}
+	return -1;
+};
+const getConflictKeys = (token, config) => {
+	const parsed = parseToken(token);
+	if (!parsed) return null;
+	const { contexts, prop } = parsed;
+	const contextKey = normalizeContexts(contexts, config).join(":");
+	const keys = [buildKey(contextKey, prop)];
+	const longhands = config.conflictMap.get(prop);
+	if (longhands?.length) for (const longhand of longhands) keys.push(buildKey(contextKey, longhand));
+	return keys;
+};
+const parseToken = (token) => {
+	const grouped = parseGroupedSelector(token);
+	if (grouped) {
+		if (grouped.entries.length !== 1) return null;
+		const [entry] = grouped.entries;
+		if (!isCssPropName(entry.name)) return null;
+		return {
+			contexts: splitFragments(grouped.prefix),
+			prop: entry.name
+		};
+	}
+	const fragments = splitFragments(token);
+	if (fragments.length < 2) return null;
+	const propIndex = findFirstCssPropIndex(fragments);
+	if (propIndex === -1) return null;
+	return {
+		contexts: fragments.slice(0, propIndex),
+		prop: fragments[propIndex]
+	};
+};
+const normalizeContexts = (contexts, config) => {
+	const compound = combineCompoundContexts(contexts, config.compoundContextSet);
+	if (!config.sortContexts) return compound;
+	return sortContexts(compound, config.orderSensitiveSet);
+};
+const combineCompoundContexts = (contexts, compoundSet) => {
+	const combined = [];
+	for (let i = 0; i < contexts.length; i += 1) {
+		const current = contexts[i];
+		if (compoundSet.has(current) && contexts[i + 1]) {
+			combined.push(`${current}:${contexts[i + 1]}`);
+			i += 1;
+			continue;
+		}
+		combined.push(current);
+	}
+	return combined;
+};
+const sortContexts = (contexts, orderSensitiveSet) => {
+	const result = [];
+	let currentSegment = [];
+	const isOrderSensitive = (context) => {
+		if (orderSensitiveSet.has(context)) return true;
+		const base = splitFragments(context)[0];
+		return orderSensitiveSet.has(base);
+	};
+	for (const context of contexts) if (isOrderSensitive(context)) {
+		if (currentSegment.length) {
+			currentSegment.sort();
+			result.push(...currentSegment);
+			currentSegment = [];
+		}
+		result.push(context);
+	} else currentSegment.push(context);
+	if (currentSegment.length) {
+		currentSegment.sort();
+		result.push(...currentSegment);
+	}
+	return result;
+};
+const buildKey = (contexts, prop) => {
+	return contexts ? `${contexts}|${prop}` : `|${prop}`;
+};
+const findFirstCssPropIndex = (fragments) => {
+	for (let i = 0; i < fragments.length; i += 1) if (isCssPropName(fragments[i])) return i;
+	return -1;
+};
+const isCssPropName = (name) => {
+	const cached = cssPropCache.get(name);
+	if (cached !== void 0) return cached;
+	const camelName = dashToCamelCase(name);
+	const result = isCSSProp("div", name) || isCSSProp("div", camelName);
+	cssPropCache.set(name, result);
+	return result;
+};
+const dashToCamelCase = (str) => {
+	return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+};
+function createLruCache(maxCacheSize) {
+	if (maxCacheSize < 1) return {
+		get: () => void 0,
+		set: () => {}
+	};
+	let cacheSize = 0;
+	let cache = Object.create(null);
+	let previousCache = Object.create(null);
+	const update = (key, value) => {
+		cache[key] = value;
+		cacheSize += 1;
+		if (cacheSize > maxCacheSize) {
+			cacheSize = 0;
+			previousCache = cache;
+			cache = Object.create(null);
+		}
+	};
+	return {
+		get(key) {
+			let value = cache[key];
+			if (value !== void 0) return value;
+			if ((value = previousCache[key]) !== void 0) {
+				update(key, value);
+				return value;
+			}
+		},
+		set(key, value) {
+			if (key in cache) cache[key] = value;
+			else update(key, value);
+		}
+	};
+}
+function createDefaultConflictMap() {
+	const map = {};
+	map.margin = unique([
+		...physicalSides.map((side) => `margin-${side}`),
+		...logicalAxes.map((axis) => `margin-${axis}`),
+		...logicalSides.map((side) => `margin-${side}`)
+	]);
+	map["margin-block"] = ["margin-block-start", "margin-block-end"];
+	map["margin-inline"] = ["margin-inline-start", "margin-inline-end"];
+	map.padding = unique([
+		...physicalSides.map((side) => `padding-${side}`),
+		...logicalAxes.map((axis) => `padding-${axis}`),
+		...logicalSides.map((side) => `padding-${side}`)
+	]);
+	map["padding-block"] = ["padding-block-start", "padding-block-end"];
+	map["padding-inline"] = ["padding-inline-start", "padding-inline-end"];
+	map.inset = unique([
+		"top",
+		"right",
+		"bottom",
+		"left",
+		...logicalAxes.map((axis) => `inset-${axis}`),
+		...logicalSides.map((side) => `inset-${side}`)
+	]);
+	map["inset-block"] = ["inset-block-start", "inset-block-end"];
+	map["inset-inline"] = ["inset-inline-start", "inset-inline-end"];
+	const borderSideLonghands = (side) => borderSideVariants.map((variant) => `border-${side}-${variant}`);
+	const borderPhysicalSideLonghands = physicalSides.flatMap((side) => borderSideLonghands(side));
+	const borderLogicalSideLonghands = logicalSides.flatMap((side) => borderSideLonghands(side));
+	const borderAxisVariants = (axis) => borderSideVariants.map((variant) => `border-${axis}-${variant}`);
+	const borderAxisSides = (axis) => [`${axis}-start`, `${axis}-end`];
+	const borderAxisSideLonghands = (axis) => borderAxisSides(axis).flatMap((side) => borderSideLonghands(side));
+	const borderWidthLonghands = unique([
+		...physicalSides.map((side) => `border-${side}-width`),
+		...logicalSides.map((side) => `border-${side}-width`),
+		...logicalAxes.map((axis) => `border-${axis}-width`),
+		...logicalAxes.flatMap((axis) => borderAxisSides(axis).map((side) => `border-${side}-width`))
+	]);
+	const borderStyleLonghands = unique([
+		...physicalSides.map((side) => `border-${side}-style`),
+		...logicalSides.map((side) => `border-${side}-style`),
+		...logicalAxes.map((axis) => `border-${axis}-style`),
+		...logicalAxes.flatMap((axis) => borderAxisSides(axis).map((side) => `border-${side}-style`))
+	]);
+	const borderColorLonghands = unique([
+		...physicalSides.map((side) => `border-${side}-color`),
+		...logicalSides.map((side) => `border-${side}-color`),
+		...logicalAxes.map((axis) => `border-${axis}-color`),
+		...logicalAxes.flatMap((axis) => borderAxisSides(axis).map((side) => `border-${side}-color`))
+	]);
+	map.border = unique([
+		...physicalSides.map((side) => `border-${side}`),
+		...logicalSides.map((side) => `border-${side}`),
+		...logicalAxes.map((axis) => `border-${axis}`),
+		...borderPhysicalSideLonghands,
+		...borderLogicalSideLonghands,
+		...borderAxisVariants("block"),
+		...borderAxisVariants("inline"),
+		...borderAxisSideLonghands("block"),
+		...borderAxisSideLonghands("inline"),
+		"border-width",
+		"border-style",
+		"border-color"
+	]);
+	map["border-top"] = borderSideLonghands("top");
+	map["border-right"] = borderSideLonghands("right");
+	map["border-bottom"] = borderSideLonghands("bottom");
+	map["border-left"] = borderSideLonghands("left");
+	map["border-block"] = unique([
+		"border-block-start",
+		"border-block-end",
+		...borderAxisVariants("block"),
+		...borderAxisSideLonghands("block")
+	]);
+	map["border-inline"] = unique([
+		"border-inline-start",
+		"border-inline-end",
+		...borderAxisVariants("inline"),
+		...borderAxisSideLonghands("inline")
+	]);
+	map["border-block-start"] = borderSideLonghands("block-start");
+	map["border-block-end"] = borderSideLonghands("block-end");
+	map["border-inline-start"] = borderSideLonghands("inline-start");
+	map["border-inline-end"] = borderSideLonghands("inline-end");
+	map["border-width"] = borderWidthLonghands;
+	map["border-style"] = borderStyleLonghands;
+	map["border-color"] = borderColorLonghands;
+	map["border-block-width"] = ["border-block-start-width", "border-block-end-width"];
+	map["border-inline-width"] = ["border-inline-start-width", "border-inline-end-width"];
+	map["border-block-style"] = ["border-block-start-style", "border-block-end-style"];
+	map["border-inline-style"] = ["border-inline-start-style", "border-inline-end-style"];
+	map["border-block-color"] = ["border-block-start-color", "border-block-end-color"];
+	map["border-inline-color"] = ["border-inline-start-color", "border-inline-end-color"];
+	map["border-radius"] = [
+		"border-top-left-radius",
+		"border-top-right-radius",
+		"border-bottom-right-radius",
+		"border-bottom-left-radius",
+		"border-start-start-radius",
+		"border-start-end-radius",
+		"border-end-start-radius",
+		"border-end-end-radius"
+	];
+	map["border-image"] = [
+		"border-image-source",
+		"border-image-slice",
+		"border-image-width",
+		"border-image-outset",
+		"border-image-repeat"
+	];
+	map["background"] = [
+		"background-color",
+		"background-image",
+		"background-position",
+		"background-size",
+		"background-repeat",
+		"background-origin",
+		"background-clip",
+		"background-attachment"
+	];
+	map["background-position"] = ["background-position-x", "background-position-y"];
+	map["font"] = [
+		"font-style",
+		"font-variant",
+		"font-variant-ligatures",
+		"font-variant-caps",
+		"font-variant-numeric",
+		"font-variant-east-asian",
+		"font-weight",
+		"font-stretch",
+		"font-size",
+		"line-height",
+		"font-family"
+	];
+	map["font-variant"] = [
+		"font-variant-ligatures",
+		"font-variant-caps",
+		"font-variant-numeric",
+		"font-variant-east-asian"
+	];
+	map["list-style"] = [
+		"list-style-position",
+		"list-style-image",
+		"list-style-type"
+	];
+	map["grid"] = [
+		"grid-template",
+		"grid-template-rows",
+		"grid-template-columns",
+		"grid-template-areas",
+		"grid-auto-rows",
+		"grid-auto-columns",
+		"grid-auto-flow",
+		"grid-row",
+		"grid-row-start",
+		"grid-row-end",
+		"grid-column",
+		"grid-column-start",
+		"grid-column-end",
+		"grid-area"
+	];
+	map["grid-template"] = [
+		"grid-template-rows",
+		"grid-template-columns",
+		"grid-template-areas"
+	];
+	map["grid-row"] = ["grid-row-start", "grid-row-end"];
+	map["grid-column"] = ["grid-column-start", "grid-column-end"];
+	map["grid-area"] = [
+		"grid-row-start",
+		"grid-row-end",
+		"grid-column-start",
+		"grid-column-end"
+	];
+	map["flex"] = [
+		"flex-grow",
+		"flex-shrink",
+		"flex-basis"
+	];
+	map["flex-flow"] = ["flex-direction", "flex-wrap"];
+	map["gap"] = ["row-gap", "column-gap"];
+	map["overflow"] = ["overflow-x", "overflow-y"];
+	map["overscroll-behavior"] = ["overscroll-behavior-x", "overscroll-behavior-y"];
+	map["scroll-margin"] = unique([
+		...physicalSides.map((side) => `scroll-margin-${side}`),
+		...logicalAxes.map((axis) => `scroll-margin-${axis}`),
+		...logicalSides.map((side) => `scroll-margin-${side}`)
+	]);
+	map["scroll-margin-block"] = ["scroll-margin-block-start", "scroll-margin-block-end"];
+	map["scroll-margin-inline"] = ["scroll-margin-inline-start", "scroll-margin-inline-end"];
+	map["scroll-padding"] = unique([
+		...physicalSides.map((side) => `scroll-padding-${side}`),
+		...logicalAxes.map((axis) => `scroll-padding-${axis}`),
+		...logicalSides.map((side) => `scroll-padding-${side}`)
+	]);
+	map["scroll-padding-block"] = ["scroll-padding-block-start", "scroll-padding-block-end"];
+	map["scroll-padding-inline"] = ["scroll-padding-inline-start", "scroll-padding-inline-end"];
+	map["place-content"] = ["align-content", "justify-content"];
+	map["place-items"] = ["align-items", "justify-items"];
+	map["place-self"] = ["align-self", "justify-self"];
+	map["column-rule"] = [
+		"column-rule-width",
+		"column-rule-style",
+		"column-rule-color"
+	];
+	map["columns"] = ["column-width", "column-count"];
+	map["text-decoration"] = [
+		"text-decoration-line",
+		"text-decoration-style",
+		"text-decoration-color",
+		"text-decoration-thickness",
+		"text-decoration-skip-ink"
+	];
+	map["text-emphasis"] = [
+		"text-emphasis-style",
+		"text-emphasis-color",
+		"text-emphasis-position"
+	];
+	map["transition"] = [
+		"transition-property",
+		"transition-duration",
+		"transition-timing-function",
+		"transition-delay",
+		"transition-behavior"
+	];
+	map["animation"] = [
+		"animation-name",
+		"animation-duration",
+		"animation-timing-function",
+		"animation-delay",
+		"animation-iteration-count",
+		"animation-direction",
+		"animation-fill-mode",
+		"animation-play-state",
+		"animation-composition",
+		"animation-timeline",
+		"animation-range"
+	];
+	map["outline"] = [
+		"outline-color",
+		"outline-style",
+		"outline-width"
+	];
+	return map;
+}
+function normalizeConflictMap(conflictMap) {
+	const normalized = /* @__PURE__ */ new Map();
+	for (const [key, values] of Object.entries(conflictMap)) normalized.set(key, unique(values));
+	return normalized;
+}
+function unique(items) {
+	return Array.from(new Set(items));
+}
+const isPlainObject = (value) => {
+	return !!value && typeof value === "object" && !Array.isArray(value);
+};
+
+//#endregion
+export { createBossMerge, join, merge };

package/dist/native/browser.cjs

@@ -0,0 +1,78 @@
+const require_use_token_runtime_only = require('../use/token/runtime-only.cjs');
+
+//#region src/native/browser.ts
+const ignoredProps = new Set([
+	"ref",
+	"children",
+	"as",
+	"className",
+	"css",
+	"child",
+	"at",
+	"pseudo"
+]);
+const isNumericValue = (value) => {
+	if (typeof value === "number") return true;
+	if (typeof value !== "string") return false;
+	return /^-?\d+(?:\.\d+)?$/.test(value);
+};
+const normalizeValue = (value) => {
+	if (Array.isArray(value)) return value.map((entry) => normalizeValue(entry));
+	if (isNumericValue(value)) return typeof value === "string" ? Number(value) : value;
+	return value;
+};
+const getStyleProps = (api) => {
+	if (!api.nativeStyleProps) return /* @__PURE__ */ new Set();
+	api.nativeStylePropSet ??= new Set(api.nativeStyleProps);
+	return api.nativeStylePropSet;
+};
+const name = "native";
+const onBrowserObjectStart = (api, { input, output = {} }) => {
+	const styleProps = getStyleProps(api);
+	const bossStyle = {};
+	let hasBossStyle = false;
+	for (const prop in input) {
+		if (ignoredProps.has(prop)) {
+			delete input[prop];
+			continue;
+		}
+		if (prop === "style") {
+			output.style = input[prop];
+			delete input[prop];
+			continue;
+		}
+		if (!styleProps.has(prop)) {
+			output[prop] = input[prop];
+			delete input[prop];
+			continue;
+		}
+		let value = input[prop];
+		if (typeof value === "function") value = value();
+		const token = require_use_token_runtime_only.resolveRuntimeToken(api, prop, value);
+		if (token) value = token.value;
+		bossStyle[prop] = normalizeValue(value);
+		hasBossStyle = true;
+		delete input[prop];
+	}
+	if (!hasBossStyle) return;
+	if (!output.style) {
+		output.style = bossStyle;
+		return;
+	}
+	if (Array.isArray(output.style)) {
+		output.style = [...output.style, bossStyle];
+		return;
+	}
+	if (typeof output.style === "object") {
+		output.style = {
+			...output.style,
+			...bossStyle
+		};
+		return;
+	}
+	output.style = [output.style, bossStyle];
+};
+
+//#endregion
+exports.name = name;
+exports.onBrowserObjectStart = onBrowserObjectStart;