@barocss/kit 0.10.0 → 0.10.2

package/dist/index.js

@@ -1447,6 +1447,7 @@ function themeToCssVarsAll(theme) {
 		...spacingToCssVars(theme.spacing),
 		...containerToCssVars(theme.container),
 		...borderRadiusToCssVars(theme.borderRadius),
+		...Object.fromEntries(Object.entries(theme.borderWidth ?? {}).filter(([k]) => k !== "DEFAULT").map(([k, v]) => [`--border-width-${escapeKey(k)}`, String(v)])),
 		...zIndexToCssVars(theme.zIndex),
 		...opacityToCssVars(theme.opacity),
 		...animationToCssVars({
@@ -6671,6 +6672,20 @@ var stopsDecls = (stop, color) => {
 		category: "background"
 	});
 });
+var BG_HINTS = {
+	position: "background-position",
+	percentage: "background-position",
+	size: "background-size",
+	length: "background-size",
+	"bg-size": "background-size",
+	image: "background-image",
+	url: "background-image"
+};
+function bgHint(value) {
+	const m = /^([a-z-]+):(.+)$/.exec(value);
+	const prop = m ? BG_HINTS[m[1]] : void 0;
+	return m && prop ? [prop, m[2]] : null;
+}
 /**
 * background-size utility (arbitrary, custom property supported)
 * bg-[length] → background-size: [length]
@@ -6688,7 +6703,8 @@ functionalUtility({
 	supportsOpacity: true,
 	handle: (value, context, token, extra) => {
 		if (value.startsWith("url(")) return [decl("background-image", value)];
-		if (value.startsWith("length:")) return [decl("background-size", value.replace("length:", ""))];
+		const hinted = bgHint(value);
+		if (hinted) return [decl(hinted[0], hinted[1])];
 		if (extra?.realThemeValue) return themeColorDecls("background-color", value, extra);
 		if (parseColor(value)) {
 			const parsedColor = parseColor(value);
@@ -6698,7 +6714,10 @@ functionalUtility({
 		if (parseLength(value)) return [decl("background-size", value)];
 		return null;
 	},
-	handleCustomProperty: (value) => value.startsWith("length:") ? [decl("background-size", `var(${value.slice(7)})`)] : [decl("background-color", `var(${value})`)],
+	handleCustomProperty: (value) => {
+		const hinted = bgHint(value);
+		return hinted ? [decl(hinted[0], `var(${hinted[1]})`)] : [decl("background-color", `var(${value})`)];
+	},
 	description: "background-size utility (arbitrary, custom property supported)",
 	category: "background"
 });
@@ -6783,6 +6802,7 @@ functionalUtility({
 	category: "borders"
 });
 var borderStyleProperty = () => atRoot([property("--baro-border-style", "solid")]);
+var borderWidthRef = (value, extra) => extra?.themeKey && extra.themeKey !== "DEFAULT" ? `var(--border-width-${extra.themeKey.replace(".", "\\.")})` : value;
 var withBorderStyle = (props, width) => [
 	borderStyleProperty(),
 	...props.map((prop) => decl(prop.replace("width", "style"), "var(--baro-border-style)")),
@@ -6802,8 +6822,8 @@ var withBorderStyle = (props, width) => [
 	], { category: "borders" });
 });
 [
-	["border-x", ["border-left-width", "border-right-width"]],
-	["border-y", ["border-top-width", "border-bottom-width"]],
+	["border-x", ["border-inline-width"]],
+	["border-y", ["border-block-width"]],
 	["border-bs", ["border-block-start-width"]],
 	["border-be", ["border-block-end-width"]],
 	["border-s", ["border-inline-start-width"]],
@@ -6835,10 +6855,11 @@ var withBorderStyle = (props, width) => [
 			return null;
 		},
 		handle: (value, ctx, token, extra) => {
-			if (extra?.themeNamespace === "borderWidth") return withBorderStyle(propList, value);
+			if (extra?.themeNamespace === "borderWidth") return withBorderStyle(propList, borderWidthRef(value, extra));
 			if (extra?.realThemeValue) return propList.flatMap((prop) => themeColorDecls(prop.replace("width", "color"), value, extra));
 			if (parseColor(value)) return propList.map((prop) => decl(prop.replace("width", "color"), value));
 			if (token.arbitrary) return withBorderStyle(propList, value);
+			if (parseLength(value)) return withBorderStyle(propList, value);
 			return null;
 		},
 		handleCustomProperty: (value) => {
@@ -6884,8 +6905,10 @@ Object.entries({
 		name: `divide-${axis}`,
 		themeKeys: ["divideWidth", "borderWidth"],
 		supportsArbitrary: true,
+		supportsCustomProperty: true,
+		handleCustomProperty: (value) => divide(`var(${value.replace(/^length:/, "")})`),
 		handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
-		handle: (value) => divide(value),
+		handle: (value, _ctx, _token, extra) => divide(extra?.themeNamespace === "borderWidth" ? borderWidthRef(value, extra) : value),
 		description: `divide-${axis} width utility`,
 		category: "borders"
 	});
@@ -6897,7 +6920,7 @@ functionalUtility({
 	supportsCustomProperty: true,
 	supportsOpacity: true,
 	handle: (value, ctx, token, extra) => {
-		if (extra?.themeNamespace === "borderWidth") return withBorderStyle(["border-width"], value);
+		if (extra?.themeNamespace === "borderWidth") return withBorderStyle(["border-width"], borderWidthRef(value, extra));
 		if (extra?.realThemeValue) return themeColorDecls("border-color", value, extra);
 		if (token.arbitrary) {
 			if (parseLength(value)) return withBorderStyle(["border-width"], value);
@@ -7019,12 +7042,13 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsOpacity: true,
-	handle: (value, _ctx, _token, extra) => {
+	handle: (value, _ctx, token, extra) => {
+		if (token.prefix !== "divide") return null;
 		if (extra?.realThemeValue) return [rule(":where(& > :not(:last-child))", themeColorDecls("border-color", value, extra))];
 		if (parseColor(value)) return divideColor(value);
 		return null;
 	},
-	handleCustomProperty: (value) => divideColor(`var(${value})`),
+	handleCustomProperty: (value, _ctx, token) => token.prefix === "divide" ? divideColor(`var(${value})`) : [],
 	description: "divide-color utility (theme, alpha, arbitrary, custom property)",
 	category: "borders"
 });
@@ -7428,6 +7452,8 @@ functionalUtility({
 });
 //#endregion
 //#region src/presets/svg.ts
+var STROKE_WIDTH_HINT = /^(length|number|percentage):(.+)$/;
+var STROKE_LENGTH = /^(\d*\.)?\d+(px|em|rem|vh|vw|vmin|vmax|%|in|cm|mm|pt|pc|ex|ch|q|lh|rlh|svh|lvh|dvh|cqw|cqh)$/i;
 staticUtility("fill-inherit", [["fill", "inherit"]], { category: "svg" });
 staticUtility("fill-current", [["fill", "currentColor"]], { category: "svg" });
 staticUtility("fill-transparent", [["fill", "transparent"]], { category: "svg" });
@@ -7457,11 +7483,17 @@ functionalUtility({
 	supportsCustomProperty: true,
 	handle: (value, ctx, token, extra) => {
 		if (parseNumber(value) || extra?.themeNamespace === "strokeWidth") return [decl("stroke-width", value)];
+		if (token.arbitrary) {
+			const hint = STROKE_WIDTH_HINT.exec(value);
+			if (hint) return [decl("stroke-width", hint[2])];
+			if (!parseColor(value) && (STROKE_LENGTH.test(value) || /^calc\(/.test(value))) return [decl("stroke-width", value)];
+		}
 		if (extra?.realThemeValue) return [decl("stroke", `var(--color-${extra.realThemeValue})`)];
 		return [decl("stroke", value)];
 	},
 	handleCustomProperty: (value) => {
-		if (value.startsWith("length:")) return [decl("stroke-width", `var(${value.replace("length:", "")})`)];
+		const hint = STROKE_WIDTH_HINT.exec(value);
+		if (hint) return [decl("stroke-width", `var(${hint[2]})`)];
 		return [decl("stroke", `var(${value})`)];
 	},
 	description: "stroke utility (static, theme, arbitrary, custom property supported)",
@@ -7539,6 +7571,21 @@ staticModifier("prefers-contrast-less", ["&"], {
 	wrap: () => [atRule("media", "(prefers-contrast: less)", [], "media")],
 	source: "media"
 });
+staticModifier("contrast-more", ["&"], {
+	order: 5,
+	wrap: () => [atRule("media", "(prefers-contrast: more)", [], "media")],
+	source: "media"
+});
+staticModifier("contrast-less", ["&"], {
+	order: 5,
+	wrap: () => [atRule("media", "(prefers-contrast: less)", [], "media")],
+	source: "media"
+});
+staticModifier("noscript", ["&"], {
+	order: 5,
+	wrap: () => [atRule("media", "(scripting: none)", [], "media")],
+	source: "media"
+});
 staticModifier("forced-colors", ["&"], {
 	order: 5,
 	wrap: () => [atRule("media", "(forced-colors: active)", [], "media")],
@@ -7784,6 +7831,30 @@ function negatedAtRuleOf(name, ctx) {
 		nodes: []
 	};
 }
+/**
+* #354: the at-rule for `not-[@<name> <params>]` (`_` decoded to a space), as Tailwind 4.3.3 emits it:
+* `@media`/`@supports` → `not <params>` (a leading `not` is removed instead), `@container [name] <query>` →
+* `@container [name] not <query>`. Null for any other at-rule, an empty condition or a top-level comma list,
+* where Tailwind emits nothing or an invalid prelude.
+*/
+function negatedArbitraryAtRuleOf(value) {
+	const m = /^@(media|supports|container)(?:\s+|(?=\()|$)([\s\S]*)$/.exec(decodeArbitrarySelector(value).trim());
+	if (!m) return null;
+	const name = m[1];
+	let params = (m[2] ?? "").trim();
+	let prefix = "";
+	if (name === "container") {
+		const n = /^(?!not\b)([a-zA-Z_-][a-zA-Z0-9_-]*)\s+([\s\S]*)$/.exec(params);
+		if (n) {
+			prefix = `${n[1]} `;
+			params = n[2].trim();
+		}
+	}
+	if (!params || hasTopLevelComma(params)) return null;
+	const neg = /^not\s+/i.test(params) ? params.replace(/^not\s+/i, "") : `not ${params}`;
+	if (!neg) return null;
+	return atRule(name, `${prefix}${neg}`, [], name);
+}
 //#endregion
 //#region src/presets/variants/responsive.ts
 functionalModifier((mod, context) => {
@@ -8033,7 +8104,11 @@ functionalModifier((mod, context) => /^not-(?!@)/.test(mod) && !!negatedAtRuleOf
 	const node = negatedAtRuleOf(mod.type.slice(4), context);
 	return node ? [node] : [];
 });
-functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
+functionalModifier((mod) => /^not-\[@.*\]$/.test(mod) && !!negatedArbitraryAtRuleOf(mod.slice(5, -1)), () => "&", (mod) => {
+	const node = negatedArbitraryAtRuleOf(mod.type.slice(5, -1));
+	return node ? [node] : [];
+});
+functionalModifier((mod) => /^not-\[(?!@).*\]$/.test(mod), ({ selector, mod }) => {
 	const m = /^not-\[(.+)\]$/.exec(mod.type);
 	if (m) {
 		if (!/^[a-zA-Z0-9_-]+(=.+)?$/.test(m[1])) return {
@@ -8054,7 +8129,7 @@ functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
 		source: "attribute"
 	};
 });
-functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
+functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@") && !mod.startsWith("not-[@"), ({ selector, mod, context }) => {
 	const m = /^not-(.+)$/.exec(mod.type);
 	const inner = m ? negatableSelectorOf(m[1], context) : null;
 	if (m && !inner) return null;
@@ -8119,7 +8194,7 @@ functionalModifier((mod) => /^aria-/.test(mod), ({ selector, mod }) => {
 		source: "aria"
 	};
 }, void 0);
-functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
+functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@") && !mod.startsWith("not-[@"), ({ selector, mod, context }) => {
 	const pseudo = mod.type.replace("not-", "");
 	if (pseudo.startsWith("[")) {
 		const inner = pseudo.slice(1, -1);
@@ -8222,10 +8297,16 @@ functionalModifier((mod) => /^where-\[.*\]$/.test(mod), ({ selector, mod }) => {
 }, void 0);
 //#endregion
 //#region src/presets/variants/at-rules.ts
-functionalModifier((mod) => /^supports-\[.*\]$/.test(mod), void 0, (mod) => {
-	const m = /^supports-\[(.+)\]$/.exec(mod.type);
-	if (m) return [atRule("supports", `(${m[1]})`, [], "supports")];
-	return [];
+function supportsCondition(value) {
+	if (/^[\w-]*\s*\(/.test(value)) return value;
+	let v = value.includes(":") ? value : `${value}: var(--tw)`;
+	if (v[0] !== "(" || v[v.length - 1] !== ")") v = `(${v})`;
+	return v;
+}
+functionalModifier((mod) => /^supports-(?:\[.+\]|[a-zA-Z-][a-zA-Z0-9-]*)$/.test(mod), void 0, (mod) => {
+	const m = /^supports-(?:\[(.+)\]|([a-zA-Z-][a-zA-Z0-9-]*))$/.exec(mod.type);
+	if (!m) return [];
+	return [atRule("supports", supportsCondition(m[1] !== void 0 ? decodeArbitrarySelector(m[1]) : m[2]), [], "supports")];
 });
 functionalModifier((mod) => /^layer-\[.*\]$/.test(mod), void 0, (mod) => {
 	const m = /^layer-\[(.+)\]$/.exec(mod.type);
@@ -8253,6 +8334,7 @@ functionalModifier((mod) => /^(group|peer)-hover(\/[a-zA-Z0-9_-]+)?$/.test(mod),
 }, () => [atRule("media", "(hover: hover)", [])]);
 function negated(value, ctx) {
 	const v = value.slice(4);
+	if (v.startsWith("[@")) return null;
 	if (v.startsWith("[") && v.endsWith("]")) return `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))`;
 	const inner = negatableSelectorOf(v, ctx);
 	return inner ? `:not(${inner})` : null;