@barocss/kit 0.9.0 → 0.10.1

package/dist/index.js

@@ -1082,7 +1082,13 @@ function parseUtility(value, ctx) {
 //#region src/core/astToCss.ts
 var isSafePrelude = (text) => {
 	const t = String(text ?? "");
-	return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t);
+	return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t) && !/url\s*\(/i.test(t);
+};
+var uniqueDescriptors = (node) => {
+	if (node.type !== "at-rule") return [];
+	if (node.name !== "property") return node.nodes;
+	const seen = /* @__PURE__ */ new Set();
+	return node.nodes.filter((c) => c.type !== "decl" || !seen.has(c.prop) && !!seen.add(c.prop));
 };
 var isSafeDecl = (prop, value) => isStructureSafeValue(String(prop)) && isStructureSafeValue(String(value ?? "")) && !hasHtmlEndTagOpener(String(prop)) && !hasHtmlEndTagOpener(String(value ?? ""));
 var importantPrefix = "!important";
@@ -1178,10 +1184,10 @@ function rootToCss(nodes, opts) {
 			if (isSafeDecl(node.prop, node.value)) list.push(minify ? `${node.prop}:${node.value};` : `${node.prop}: ${node.value};`);
 		} else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
 			if (minify) {
-				const body = node.nodes.filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
+				const body = uniqueDescriptors(node).filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
 				list.push(`@${node.name} ${node.params}{${body}}`);
 			} else list.push(`@${node.name} ${node.params} {
-${node.nodes.map((node) => {
+${uniqueDescriptors(node).map((node) => {
 				if (node.type === "decl" && isSafeDecl(node.prop, node.value)) return `\t${node.prop}: ${node.value};`;
 			}).join("\n")}
 }`);
@@ -1441,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({
@@ -1736,6 +1743,11 @@ function parseClassToAst(fullClassName, ctx) {
 				variantChain: modifiers,
 				index: i
 			});
+			if (result == null) {
+				debugWarn(`[BAROCSS] Unknown variant: "${variant.type}" in "${fullClassName}"`);
+				failures.add(fullClassName);
+				return [];
+			}
 			if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) continue;
 			if (typeof result === "string" && result.includes("&")) wrappers.push({
 				type: "rule",
@@ -1822,10 +1834,11 @@ function getAstCacheStats(ctx) {
 * @example
 *   const css = generateCss('sm:dark:hover:bg-red-500 sm:focus:bg-blue-500', ctx);
 */
+var CLASS_SEPARATOR = /[ \t\n\f\r]+/;
 function generateCss(classList, ctx, opts) {
 	const seen = /* @__PURE__ */ new Set();
 	const allAtRootNodes = [];
-	const results = classList.split(/\s+/).filter((cls) => {
+	const results = classList.split(CLASS_SEPARATOR).filter((cls) => {
 		if (!cls) return false;
 		if (opts?.dedup) {
 			if (seen.has(cls)) return false;
@@ -1885,7 +1898,7 @@ function generateCss(classList, ctx, opts) {
 */
 function generateCssRules(classList, ctx, opts) {
 	const seen = /* @__PURE__ */ new Set();
-	return classList.split(/\s+/).filter((cls) => {
+	return classList.split(CLASS_SEPARATOR).filter((cls) => {
 		if (!cls) return false;
 		if (opts?.dedup) {
 			if (seen.has(cls)) return false;
@@ -3124,6 +3137,7 @@ function jsonToAst(input, ctx) {
 					variantChain: [],
 					index: i
 				});
+				if (result == null) continue;
 				if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) {} else if (typeof result === "string" && result.includes("&")) wrappers.push({
 					type: "rule",
 					selector: result
@@ -6658,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]
@@ -6675,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);
@@ -6685,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"
 });
@@ -6770,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)")),
@@ -6789,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"]],
@@ -6822,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) => {
@@ -6871,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"
 	});
@@ -6884,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);
@@ -7006,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"
 });
@@ -7415,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" });
@@ -7444,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)",
@@ -7526,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")],
@@ -7609,19 +7669,14 @@ staticModifier("after", ["&::after"], {
 	source: "pseudo",
 	astHandler: withPseudoContent
 });
-staticModifier("placeholder", [
-	"&::placeholder",
-	"&::-webkit-input-placeholder",
-	"&::-moz-placeholder",
-	"&:-ms-input-placeholder"
-], { source: "pseudo" });
-staticModifier("selection", ["&::selection", "&::-moz-selection"], { source: "pseudo" });
-staticModifier("file", ["&::file-selector-button", "&::-webkit-file-upload-button"], { source: "pseudo" });
+staticModifier("placeholder", ["&::placeholder"], { source: "pseudo" });
+staticModifier("selection", ["& *::selection", "&::selection"], { source: "pseudo" });
+staticModifier("file", ["&::file-selector-button"], { source: "pseudo" });
 staticModifier("marker", [
+	"& *::marker",
 	"&::marker",
-	"&::-webkit-details-marker",
-	"&::-moz-list-bullet",
-	"&::-moz-list-number"
+	"& *::-webkit-details-marker",
+	"&::-webkit-details-marker"
 ], { source: "pseudo" });
 staticModifier("details-content", ["&::details-content"], { source: "pseudo" });
 staticModifier("first-line", ["&::first-line"], { source: "pseudo" });
@@ -7679,7 +7734,9 @@ function attributeVariantSelector(variant) {
 		return `[${kind}-${key}=${/^(["']).*\1$/.test(raw) ? raw : `"${decodeArbitrarySelector(raw)}"`}]`;
 	}
 	const bare = /^data-([a-zA-Z0-9_-]+)$/.exec(variant);
-	return bare ? `[data-${bare[1]}]` : void 0;
+	if (bare) return `[data-${bare[1]}]`;
+	const aria = /^aria-([a-zA-Z0-9_-]+)$/.exec(variant);
+	return aria ? `[aria-${aria[1]}="true"]` : void 0;
 }
 /**
 * The argument of a `:has()`/`:not()` built from an arbitrary value: a selector list is wrapped as `*:is(…)`
@@ -7700,6 +7757,104 @@ function hasTopLevelComma(value) {
 	}
 	return false;
 }
+/**
+* #335: the pseudo-class selector (`:hover`, `:first-child`, `:nth-child(odd)`) of a registered static
+* variant, for compounding in not-/group-/peer-/has- forms, or null when the variant is unknown or is not a
+* single pseudo-class (pseudo-elements, at-rules, multi-selector variants). Tailwind 4.3.3 emits nothing
+* for a compound variant whose inner variant it cannot compound (`not-foo`, `group-before`, `peer-has-foo`).
+*/
+function pseudoClassOf(name, ctx) {
+	const plugin = getModifier(ctx).find((p) => p.name === name && p.match(name, ctx));
+	if (!plugin?.modifySelector) return null;
+	const r = plugin.modifySelector({
+		selector: "&",
+		fullClassName: "",
+		mod: { type: name },
+		context: ctx
+	});
+	const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
+	if (list.length !== 1) return null;
+	const m = /^&(:(?!:)[a-zA-Z-]+(?:\(.*\))?)$/.exec(list[0].selector);
+	return m ? m[1] : null;
+}
+/**
+* #352: the selector `not-<v>` / `group-not-<v>` negates: an attribute variant (`data-*`, `aria-*`), a
+* pseudo-class (#335), or a wrap-free `has-*` variant (`has-[…]`, `has-aria-*`), as Tailwind 4.3.3 compounds
+* them. Null when `<v>` is unknown or is not a single compound on `&`.
+*/
+function negatableSelectorOf(name, ctx) {
+	const attr = attributeVariantSelector(name);
+	if (attr) return attr;
+	const pc = pseudoClassOf(name, ctx);
+	if (pc || !name.startsWith("has-")) return pc;
+	const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
+	if (!plugin?.modifySelector || plugin.wrap || plugin.astHandler) return null;
+	const r = plugin.modifySelector({
+		selector: "&",
+		fullClassName: "",
+		mod: { type: name },
+		context: ctx
+	});
+	const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
+	if (list.length !== 1) return null;
+	const m = /^&(:has\(.+\))$/.exec(list[0].selector);
+	return m && !m[1].includes("&") ? m[1] : null;
+}
+/**
+* #352: `not-<v>` for a wrap-only at-rule variant (`md`, `max-md`, `min-[…]`, `print`, `motion-safe`,
+* `supports-[…]`, `dark` in media mode): the same at-rule with its condition negated (`@media not (…)`,
+* `@supports not (…)`), as Tailwind 4.3.3 emits it. Null for anything else, and for a prelude that is a list
+* or already combines conditions, where a leading `not` would not negate the whole query.
+*/
+function negatedAtRuleOf(name, ctx) {
+	if (name.startsWith("not-")) return null;
+	const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
+	if (!plugin?.wrap || plugin.astHandler) return null;
+	if (plugin.modifySelector) {
+		const r = plugin.modifySelector({
+			selector: "&",
+			fullClassName: "",
+			mod: { type: name },
+			context: ctx
+		});
+		if ((typeof r === "string" ? r : Array.isArray(r) ? r.length === 1 ? r[0].selector : null : r?.selector) !== "&") return null;
+	}
+	const items = plugin.wrap({ type: name }, ctx);
+	if (items.length !== 1) return null;
+	const node = items[0];
+	if (node.type !== "at-rule" || node.name !== "media" && node.name !== "supports" || node.nodes?.length) return null;
+	const params = (node.params ?? "").trim();
+	if (!params || /^not\b|,|\s(and|or)\s/i.test(params)) return null;
+	return {
+		...node,
+		params: `not ${params}`,
+		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) => {
@@ -7850,6 +8005,7 @@ function innerCompound(variant, ctx) {
 		mod: { type: variant },
 		context: ctx
 	});
+	if (out == null) return void 0;
 	const list = typeof out === "string" ? [{ selector: out }] : Array.isArray(out) ? out : [out];
 	if (list.length !== 1) return void 0;
 	const sel = list[0].selector;
@@ -7944,7 +8100,15 @@ functionalModifier((mod, ctx) => {
 }, groupHasSelector);
 //#endregion
 //#region src/presets/variants/negation-variants.ts
-functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
+functionalModifier((mod, context) => /^not-(?!@)/.test(mod) && !!negatedAtRuleOf(mod.slice(4), context), () => "&", (mod, context) => {
+	const node = negatedAtRuleOf(mod.type.slice(4), context);
+	return node ? [node] : [];
+});
+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 {
@@ -7965,10 +8129,12 @@ functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
 		source: "attribute"
 	};
 });
-functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod }) => {
+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;
 	return {
-		selector: m ? `&:not(:${m[1]})` : selector,
+		selector: inner ? `&:not(${inner})` : selector,
 		flatten: false,
 		wrappingType: "rule",
 		source: "attribute"
@@ -8028,7 +8194,7 @@ functionalModifier((mod) => /^aria-/.test(mod), ({ selector, mod }) => {
 		source: "aria"
 	};
 }, void 0);
-functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod }) => {
+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);
@@ -8040,10 +8206,14 @@ functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"),
 			selector: `&:not(${functionalArgument(inner)})`,
 			source: "attribute"
 		};
-	} else return {
-		selector: `&:not(:${pseudo})`,
-		source: "attribute"
-	};
+	} else {
+		const inner = negatableSelectorOf(pseudo, context);
+		if (!inner) return null;
+		return {
+			selector: `&:not(${inner})`,
+			source: "attribute"
+		};
+	}
 }, void 0);
 functionalModifier((mod) => /^data-/.test(mod), ({ selector, mod }) => {
 	const bracket = /^data-\[([a-zA-Z0-9_-]+)(?:=([^\]]+))?\]$/.exec(mod.type);
@@ -8127,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);
@@ -8156,11 +8332,14 @@ functionalModifier((mod) => /^(group|peer)-hover(\/[a-zA-Z0-9_-]+)?$/.test(mod),
 		source: kind
 	};
 }, () => [atRule("media", "(hover: hover)", [])]);
-function negated(value) {
+function negated(value, ctx) {
 	const v = value.slice(4);
-	return v.startsWith("[") && v.endsWith("]") ? `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))` : `:not(:${v})`;
+	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;
 }
-functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
+functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
 	const raw = /^group-(.+)$/.exec(mod.type);
 	const [variant, base] = splitGroupName("group", raw?.[1] ?? "");
 	const m = raw ? [raw[0], variant] : null;
@@ -8176,11 +8355,14 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
 		wrappingType: "rule",
 		source: "group"
 	};
-	if (m?.[1]?.startsWith("not-")) return {
-		selector: `&:is(${g}${negated(m[1])} *)`,
-		wrappingType: "rule",
-		source: "group"
-	};
+	if (m?.[1]?.startsWith("not-")) {
+		const neg = negated(m[1], context);
+		return neg ? {
+			selector: `&:is(${g}${neg} *)`,
+			wrappingType: "rule",
+			source: "group"
+		} : null;
+	}
 	if (m?.[1]?.startsWith("has-")) {
 		const pattern = /^has-\[([a-zA-Z0-9_-]+)\]$/.exec(m?.[1]);
 		if (pattern) return {
@@ -8206,8 +8388,10 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
 			};
 		}
 	}
+	const pc = m ? pseudoClassOf(m[1], context) : null;
+	if (m && !pc) return null;
 	return m ? {
-		selector: `&:is(${g}:${m[1]} *)`,
+		selector: `&:is(${g}${pc} *)`,
 		wrappingType: "rule",
 		source: "group"
 	} : {
@@ -8215,7 +8399,7 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
 		source: "group"
 	};
 }, void 0);
-functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
+functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
 	const raw = /^peer-(.+)$/.exec(mod.type);
 	const [variant, base] = splitGroupName("peer", raw?.[1] ?? "");
 	const m = raw ? [raw[0], variant] : null;
@@ -8236,14 +8420,22 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
 		selector: `&:is(${g}:has(${functionalArgument(value.slice(5, -1))}) ~ *)`,
 		source: "peer"
 	};
-	if (value?.startsWith("has-")) return {
-		selector: `&:is(${g}:has(:${value.slice(4)})~*)`,
-		source: "peer"
-	};
-	if (value?.startsWith("not-")) return {
-		selector: `&:is(${g}${negated(value)} ~ *)`,
-		source: "peer"
-	};
+	if (value?.startsWith("has-")) {
+		const pc = pseudoClassOf(value.slice(4), context);
+		if (!pc) return null;
+		return {
+			selector: `&:is(${g}:has(${pc})~*)`,
+			source: "peer"
+		};
+	}
+	if (value?.startsWith("not-")) {
+		const neg = negated(value, context);
+		if (!neg) return null;
+		return {
+			selector: `&:is(${g}${neg} ~ *)`,
+			source: "peer"
+		};
+	}
 	if (value?.startsWith("aria-")) {
 		let pattern = /^aria-([a-zA-Z0-9_]+)$/.exec(value);
 		if (pattern) return {
@@ -8264,8 +8456,10 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
 			};
 		}
 	}
+	const pc = m ? pseudoClassOf(value, context) : null;
+	if (m && !pc) return null;
 	return m ? {
-		selector: `&:is(${g}:${value}~*)`,
+		selector: `&:is(${g}${pc}~*)`,
 		source: "peer"
 	} : {
 		selector,
@@ -8314,6 +8508,7 @@ function toPx(n, unit) {
 }
 function preludeKey(kind, prelude) {
 	const container = kind === "container";
+	if (!container && /^\s*not\b/i.test(prelude)) return [0, 0];
 	const min = MIN_W.exec(prelude);
 	if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
 	const max = MAX_W.exec(prelude);