@yahoo/uds-v5-wip 1.61.0 → 1.62.0

package/dist/config/dist/style-prop-runtime.js

@@ -1,390 +0,0 @@
-//#region ../config/dist/style-prop-runtime.js
-function resolveTokenMarker(marker, configPrefix) {
-	const ref = marker.ref;
-	const slashIdx = ref.indexOf("/");
-	if (slashIdx <= 0 || slashIdx >= ref.length - 1) return ref;
-	const ns = ref.slice(0, slashIdx);
-	const name = ref.slice(slashIdx + 1);
-	const cssPrefix = ns.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-	const cssName = name.replace(/\./g, "_").replace(/\//g, "-");
-	return `var(${configPrefix ? `--${configPrefix}-${cssPrefix}-${cssName}` : `--${cssPrefix}-${cssName}`})`;
-}
-const BUILT_IN_PSEUDO = {
-	_after: "after:",
-	_hover: "hover:",
-	_focus: "focus:",
-	_focusWithin: "focus-within:",
-	_focusVisible: "focus-visible:",
-	_active: "active:",
-	_visited: "visited:",
-	_target: "target:",
-	_first: "first:",
-	_last: "last:",
-	_only: "only:",
-	_odd: "odd:",
-	_even: "even:",
-	_firstOfType: "first-of-type:",
-	_lastOfType: "last-of-type:",
-	_onlyOfType: "only-of-type:",
-	_empty: "empty:",
-	_disabled: "disabled:",
-	_enabled: "enabled:",
-	_checked: "checked:",
-	_indeterminate: "indeterminate:",
-	_default: "default:",
-	_required: "required:",
-	_valid: "valid:",
-	_invalid: "invalid:",
-	_inRange: "in-range:",
-	_outOfRange: "out-of-range:",
-	_placeholderShown: "placeholder-shown:",
-	_autofill: "autofill:",
-	_readonly: "read-only:",
-	_file: "file:",
-	_selection: "selection:",
-	_backdrop: "backdrop:",
-	_motionReduce: "motion-reduce:",
-	_motionSafe: "motion-safe:",
-	_contrastMore: "contrast-more:",
-	_contrastLess: "contrast-less:",
-	_forcedColors: "forced-colors:",
-	_placeholder: "placeholder:",
-	_ariaBusy: "aria-busy:",
-	_ariaChecked: "aria-checked:",
-	_ariaHidden: "aria-hidden:",
-	_ariaPressed: "aria-pressed:",
-	_ariaReadonly: "aria-readonly:",
-	_ariaRequired: "aria-required:",
-	_ariaSelected: "aria-selected:",
-	_ariaCurrent: "aria-[current]:",
-	_ariaDisabled: "aria-disabled:",
-	_ariaExpanded: "aria-expanded:",
-	_dataDisabled: "data-[disabled=true]:",
-	_dataStateOpen: "data-[state=open]:",
-	_dataStateClosed: "data-[state=closed]:",
-	_startingStyle: "starting-style:",
-	_scrollbar: "*::-webkit-scrollbar:",
-	_scrollbarThumb: "*::-webkit-scrollbar-thumb:",
-	_scrollbarTrack: "*::-webkit-scrollbar-track:"
-};
-/** Pseudo-suffix derived from a built-in tailwind prefix (`hover:` → `:hover`).
-*  Returns null for prefixes that aren't simple pseudo-classes (data-, aria-,
-*  pseudo-element ::, at-rules). */
-function pseudoSuffixForBuiltIn(prefix) {
-	if (prefix.includes("::") || prefix.startsWith("*")) return null;
-	if (prefix.startsWith("data-[") || prefix.startsWith("aria-")) return null;
-	return `:${prefix.slice(0, -1)}`;
-}
-function kebabCase(s) {
-	return s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-}
-function buildStylePropRuntime(config) {
-	return {
-		styleProps: buildStylePropsMap(config.resolvedStyleProps ?? []),
-		modifiers: buildModifiersMap(config),
-		composites: buildCompositesMap(config)
-	};
-}
-function buildStylePropsMap(resolved) {
-	const out = {};
-	for (const entry of resolved) {
-		if (!entry.classPrefix && !entry.pairedWith) continue;
-		const cssProperty = Array.isArray(entry.cssProperty) ? entry.cssProperty[0] : entry.cssProperty;
-		if (typeof cssProperty !== "string" || cssProperty.length === 0) continue;
-		const firstToken = entry.tokens[0];
-		let varPrefix;
-		if (firstToken?.cssVar) {
-			const stripped = firstToken.cssVar.startsWith("--") ? firstToken.cssVar.slice(2) : firstToken.cssVar;
-			const suffix = `-${firstToken.safeName}`;
-			varPrefix = stripped.endsWith(suffix) ? stripped.slice(0, -suffix.length) : stripped;
-		}
-		const literalAliases = {};
-		let hasAliases = false;
-		if (entry.literalAliases) {
-			for (const [key, value] of Object.entries(entry.literalAliases)) if (typeof value === "string") {
-				literalAliases[key] = value;
-				hasAliases = true;
-			}
-		}
-		const styleEntry = {
-			classPrefix: entry.classPrefix,
-			cssProperty,
-			...varPrefix ? { varPrefix } : {},
-			...entry.pairedWith ? { pairedWith: entry.pairedWith } : {},
-			...entry.separator ? { separator: entry.separator } : {},
-			...hasAliases ? { literalAliases } : {}
-		};
-		out[entry.propName] = styleEntry;
-	}
-	return out;
-}
-function buildModifiersMap(config) {
-	const out = {};
-	for (const [propName, prefix] of Object.entries(BUILT_IN_PSEUDO)) {
-		const suffix = pseudoSuffixForBuiltIn(prefix);
-		out[propName] = suffix ? {
-			tailwindPrefix: prefix,
-			kind: "pseudo",
-			selector: suffix
-		} : {
-			tailwindPrefix: prefix,
-			kind: "ancestor",
-			selector: complexBuiltInSelector(prefix)
-		};
-	}
-	for (const group of config.modes ?? []) for (const option of group.options) {
-		if (option.default) continue;
-		const propName = option.modifier;
-		const tailwindPrefix = `${propName.slice(1)}:`;
-		if (option.css) out[propName] = {
-			tailwindPrefix,
-			kind: "ancestor",
-			selector: option.css
-		};
-		else if (option.media) out[propName] = {
-			tailwindPrefix,
-			kind: "at-rule",
-			selector: `@media ${option.media}`
-		};
-	}
-	for (const def of config.modifiers ?? []) {
-		const propName = def.modifier;
-		out[propName] = {
-			tailwindPrefix: `${propName.slice(1)}:`,
-			kind: def.selector.trimStart().startsWith("@") ? "at-rule" : "ancestor",
-			selector: def.selector
-		};
-	}
-	return out;
-}
-/** Convert a complex built-in tailwind prefix to a CSS selector fragment. */
-function complexBuiltInSelector(prefix) {
-	const dataMatch = prefix.match(/^data-\[([^=]+)=([^\]]+)\]:$/);
-	if (dataMatch) return `[data-${dataMatch[1]}="${dataMatch[2]}"]`;
-	const ariaMatch = prefix.match(/^aria-([a-z-]+):$/);
-	if (ariaMatch) return `[aria-${ariaMatch[1]}="true"]`;
-	const ariaBracket = prefix.match(/^aria-\[([^\]]+)\]:$/);
-	if (ariaBracket) return `[aria-${ariaBracket[1]}]`;
-	if (prefix.startsWith("*")) return prefix.slice(1, -1);
-	return prefix.slice(0, -1);
-}
-function buildCompositesMap(config) {
-	const out = {};
-	const composites = config.compositeStyles;
-	if (!composites) return out;
-	for (const [groupName, group] of Object.entries(composites)) {
-		const styles = group.styles;
-		if (!styles) continue;
-		out[groupName] = { ...styles };
-	}
-	return out;
-}
-/** Detect arbitrary `[value]` syntax. */
-const ARBITRARY_RE = /^\[(.+)\]$/;
-function processStyleProps(props, runtime, opts = {}) {
-	const classes = [];
-	const dynamicRules = [];
-	let effectiveProps = props;
-	let markerClasses;
-	let compositeMarkers;
-	const expansion = expandComposites(props, runtime.composites);
-	if (expansion) {
-		effectiveProps = expansion.expanded;
-		markerClasses = expansion.markers;
-		compositeMarkers = expansion.compositeMarkers;
-	}
-	if (markerClasses) for (const marker of markerClasses) classes.push(applyModifierPrefix(marker, opts.modifier));
-	if (compositeMarkers && compositeMarkers.length > 0) for (const { group, value } of compositeMarkers) {
-		const containerRule = buildCompositeContainerRule(group, value, opts.modifier);
-		if (containerRule) dynamicRules.push(containerRule);
-		const propRule = buildCompositeMarkerRule(group, value, opts.modifier, runtime.modifiers);
-		if (propRule) dynamicRules.push(propRule);
-	}
-	for (const key in effectiveProps) {
-		if (!Object.hasOwn(effectiveProps, key)) continue;
-		const value = effectiveProps[key];
-		if (value === void 0 || value === null || value === false) continue;
-		if (key.startsWith("_")) {
-			const modifier = runtime.modifiers[key];
-			if (!modifier || !isStyleObject(value)) continue;
-			const inner = processStyleProps(value, runtime, { modifier: opts.modifier ? `${opts.modifier}${modifier.tailwindPrefix}` : modifier.tailwindPrefix });
-			if (inner.className) classes.push(inner.className);
-			dynamicRules.push(...inner.dynamicRules);
-			continue;
-		}
-		const entry = runtime.styleProps[key];
-		if (!entry) continue;
-		if (entry.pairedWith) continue;
-		const opacityProp = findOpacitySibling(key, runtime.styleProps);
-		const opacityValue = opacityProp !== void 0 ? effectiveProps[opacityProp] : void 0;
-		if (typeof value === "string" && ARBITRARY_RE.test(value)) {
-			const fullClass = applyModifierPrefix(buildArbitraryClass(entry, value, opacityValue), opts.modifier);
-			classes.push(fullClass);
-			const arbitraryRule = buildArbitraryRule(fullClass, entry, value, opacityValue, opts.modifier, runtime.modifiers);
-			if (arbitraryRule) dynamicRules.push(arbitraryRule);
-			continue;
-		}
-		if (value === true) {
-			classes.push(applyModifierPrefix(entry.classPrefix, opts.modifier));
-			continue;
-		}
-		let effectiveValue = String(value);
-		if (entry.literalAliases && effectiveValue in entry.literalAliases) {
-			const aliased = entry.literalAliases[effectiveValue];
-			if (aliased !== void 0) effectiveValue = aliased;
-		}
-		if (opacityValue !== void 0 && opacityProp !== void 0) {
-			const sep = runtime.styleProps[opacityProp]?.separator ?? entry.separator ?? "_";
-			const cls = applyModifierPrefix(buildTokenClass(entry, `${effectiveValue}${sep}${opacityValue}`), opts.modifier);
-			classes.push(cls);
-			if (entry.varPrefix) {
-				const rule = buildOpacityMixRule(cls, entry, effectiveValue, String(opacityValue), opts.modifier, runtime.modifiers);
-				if (rule) dynamicRules.push(rule);
-			}
-			continue;
-		}
-		classes.push(applyModifierPrefix(buildTokenClass(entry, effectiveValue), opts.modifier));
-	}
-	return {
-		className: classes.filter(Boolean).join(" "),
-		dynamicRules
-	};
-}
-function isStyleObject(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function findOpacitySibling(parentProp, styleProps) {
-	for (const candidateName in styleProps) if (styleProps[candidateName]?.pairedWith === parentProp) return candidateName;
-}
-/** Build a token-value class, e.g. `bg-brand` or `bg-elevation-1`. Applies the
-*  same safe-token-name normalization codegen uses (`.` → `_`, `/` → `-`). */
-function buildTokenClass(entry, value) {
-	if (entry.classPrefix === "") return value;
-	if (value === "") return entry.classPrefix;
-	const safe = value.replace(/\./g, "_").replace(/\//g, "-");
-	return entry.classPrefix === value ? safe : `${entry.classPrefix}-${safe}`;
-}
-/** Build the arbitrary-value class, e.g. `bg-[#ef4444]` or `bg-[#ef4444]/60`. */
-function buildArbitraryClass(entry, value, opacityValue) {
-	const base = `${entry.classPrefix}-${value}`;
-	if (opacityValue === void 0 || opacityValue === null) return base;
-	return `${base}/${opacityValue}`;
-}
-function applyModifierPrefix(cls, modifier) {
-	return modifier ? `${modifier}${cls}` : cls;
-}
-/** Build the runtime CSS rule for an arbitrary-value class. */
-function buildArbitraryRule(fullClass, entry, rawValue, opacityValue, modifier, modifiers) {
-	const match = rawValue.match(ARBITRARY_RE);
-	if (!match) return null;
-	const inside = match[1];
-	let cssValue = inside;
-	if (opacityValue !== void 0 && opacityValue !== null) cssValue = `color-mix(in srgb, ${inside} ${opacityValue}%, transparent)`;
-	return buildDynamicRule(fullClass, entry.cssProperty, cssValue, modifier, modifiers);
-}
-/** Build the runtime CSS rule for a color/opacity token-pair fallback. */
-function buildOpacityMixRule(fullClass, entry, baseValue, opacityValue, modifier, modifiers) {
-	if (!entry.varPrefix) return null;
-	const cssValue = `color-mix(in srgb, var(${`--${entry.varPrefix}-${baseValue.replace(/[./]/g, "_")}`}) ${opacityValue}%, transparent)`;
-	return buildDynamicRule(fullClass, entry.cssProperty, cssValue, modifier, modifiers);
-}
-/** Assemble a {@link DynamicRule} from a class + value + accumulated modifier prefix. */
-function buildDynamicRule(fullClass, cssProperty, cssValue, modifier, modifiers) {
-	const cssProp = kebabCase(cssProperty);
-	let ancestorParts = "";
-	let pseudoParts = "";
-	let atRule;
-	if (modifier) {
-		const parts = modifier.split(":").filter(Boolean).map((p) => `${p}:`);
-		for (const part of parts) {
-			const resolved = modifiers[`_${part.slice(0, -1)}`];
-			if (!resolved) continue;
-			if (resolved.kind === "pseudo") pseudoParts += resolved.selector;
-			else if (resolved.kind === "ancestor") ancestorParts += `${resolved.selector} `;
-			else if (resolved.kind === "at-rule") atRule = resolved.selector;
-		}
-	}
-	const escaped = escapeClassName(fullClass);
-	const selector = `${ancestorParts}.${escaped}${pseudoParts}`;
-	return atRule ? {
-		className: fullClass,
-		selector,
-		cssProperty: cssProp,
-		cssValue,
-		atRule
-	} : {
-		className: fullClass,
-		selector,
-		cssProperty: cssProp,
-		cssValue
-	};
-}
-/** CSS class-name escape — matches `CSS.escape` semantics enough for runtime use. */
-function escapeClassName(name) {
-	return name.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
-}
-/**
-* Build a dynamic CSS rule that sets `--uds-composite-<group>: <value>` on
-* the host element. The host selector is the composite marker class (which
-* also gets pushed onto the className), so the rule reads:
-*
-*   - Unconditional: `.elevation-1 { --uds-composite-elevation: 1 }`
-*   - Modifier-conditional: `.hover\:elevation-1:hover { ... }`
-*
-* Descendants react via `@container style(--uds-composite-elevation: 1) &`
-* — see `buildCompositeStylesReference` and the auto-registered
-* `_on<Group><Value>` modifiers for the descendant selector form.
-*/
-function buildCompositeMarkerRule(group, value, modifier, modifiers) {
-	const groupSafe = group.replace(/[./]/g, "-");
-	const valueSafe = value.replace(/[./]/g, "-");
-	return buildDynamicRule(applyModifierPrefix(`${groupSafe}-${valueSafe}`, modifier), `--uds-composite-${groupSafe}`, valueSafe, modifier, modifiers);
-}
-/**
-* Build an unconditional `container-type: style` rule targeting the
-* composite marker class. Required for descendant `@container style()`
-* queries to match against this host — without it the queries have no
-* container to anchor on. The rule is unconditional (no modifier scope)
-* because we want descendants to be able to query the host's state at
-* any time, including under modifier branches.
-*/
-function buildCompositeContainerRule(group, value, modifier) {
-	const fullClass = applyModifierPrefix(`${group.replace(/[./]/g, "-")}-${value.replace(/[./]/g, "-")}`, modifier);
-	return {
-		className: fullClass,
-		selector: `.${escapeClassName(fullClass)}`,
-		cssProperty: "container-type",
-		cssValue: "style"
-	};
-}
-function expandComposites(props, composites) {
-	let result = null;
-	const markers = [];
-	const compositeMarkers = [];
-	for (const groupName in composites) {
-		if (!Object.hasOwn(composites, groupName)) continue;
-		const propValue = props[groupName];
-		if (propValue === void 0 || propValue === null) continue;
-		const variants = composites[groupName];
-		if (!variants) continue;
-		const variantStyles = variants[String(propValue)];
-		if (!variantStyles) continue;
-		if (!result) result = { ...props };
-		delete result[groupName];
-		compositeMarkers.push({
-			group: groupName,
-			value: String(propValue)
-		});
-		for (const [propName, value] of Object.entries(variantStyles)) if (value !== null && typeof value === "object" && value.__kind === "token" && typeof value.ref === "string") result[propName] = resolveTokenMarker(value, void 0);
-		else result[propName] = value;
-		markers.push(`${groupName}-${String(propValue).replace(/[./]/g, "-")}`);
-	}
-	if (!result) return null;
-	return {
-		expanded: result,
-		markers,
-		compositeMarkers
-	};
-}
-//#endregion
-export { BUILT_IN_PSEUDO, buildStylePropRuntime, processStyleProps };

package/dist/loader/dist/loader/internal-meta.js

@@ -1,59 +0,0 @@
-import path from "node:path";
-import * as t from "@babel/types";
-//#region ../loader/dist/loader/internal-meta.js
-function hashToNumericId(value) {
-	let hash = 2166136261;
-	for (let i = 0; i < value.length; i += 1) {
-		hash ^= value.charCodeAt(i);
-		hash = Math.imul(hash, 16777619);
-	}
-	return String(hash >>> 0);
-}
-function buildUdsId(meta) {
-	return hashToNumericId([
-		meta.componentName ?? "",
-		meta.slotName ?? "",
-		meta.sourceRef
-	].join("|"));
-}
-function buildSourceRef(resourcePath, projectRoot, location) {
-	return `${path.relative(projectRoot, resourcePath).replaceAll(path.sep, "/")}:${location.line}:${location.column + 1}`;
-}
-function getJsxStringAttributeValue(nodePath, attrName) {
-	const attribute = nodePath.node.attributes.find((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === attrName && attr.value?.type === "StringLiteral");
-	if (!attribute || attribute.value?.type !== "StringLiteral") return null;
-	return attribute.value.value;
-}
-function upsertInternalStringProp(nodePath, propName, value) {
-	const existing = nodePath.node.attributes.find((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === propName);
-	if (existing) {
-		existing.value = t.stringLiteral(value);
-		return;
-	}
-	nodePath.node.attributes.push(t.jsxAttribute(t.jsxIdentifier(propName), t.stringLiteral(value)));
-}
-/**
-* Inject `data-uds-id` + `data-uds-source` metadata onto a JSX
-* opening element so the devtools panel / anatomy view can locate
-* each element back to its source position.
-*/
-function injectInternalUdsProps(nodePath, resourcePath, projectRoot, fallback = {}) {
-	const effectiveResourcePath = resourcePath || nodePath?.hub?.file?.opts?.filename || "";
-	if (!effectiveResourcePath) return;
-	const start = nodePath.node.loc?.start;
-	if (!start?.line || start.column === void 0) return;
-	const sourceRef = buildSourceRef(effectiveResourcePath, projectRoot, {
-		line: start.line,
-		column: start.column
-	});
-	const udsId = buildUdsId({
-		componentName: getJsxStringAttributeValue(nodePath, "data-uds-component") ?? fallback.componentName,
-		slotName: getJsxStringAttributeValue(nodePath, "data-uds-slot") ?? fallback.slotName,
-		sourceRef
-	});
-	if (!udsId) return;
-	upsertInternalStringProp(nodePath, "data-uds-id", udsId);
-	upsertInternalStringProp(nodePath, "data-uds-source", sourceRef);
-}
-//#endregion
-export { injectInternalUdsProps };