@weapp-tailwindcss/postcss 3.0.0-next.9 → 3.0.1

package/dist/index.js

@@ -6929,20 +6929,309 @@ function removeUnsupportedMiniProgramPrefixedAtRule(atRule) {
 	if (atRule.name.toLowerCase() === "-webkit-keyframes") atRule.remove();
 }
 //#endregion
-//#region src/compat/mini-program-css/color-gamut.ts
+//#region src/cssVarsV4.ts
+function property(ident, initialValue, _syntax) {
+	return {
+		prop: ident,
+		value: initialValue || ""
+	};
+}
+const nullShadow = "0 0 #0000";
+const nodes = [
+	property("--tw-border-spacing-x", "0", "<length>"),
+	property("--tw-border-spacing-y", "0", "<length>"),
+	property("--tw-translate-x", "0"),
+	property("--tw-translate-y", "0"),
+	property("--tw-translate-z", "0"),
+	property("--tw-scale-x", "1"),
+	property("--tw-scale-y", "1"),
+	property("--tw-scale-z", "1"),
+	property("--tw-rotate-x"),
+	property("--tw-rotate-y"),
+	property("--tw-rotate-z"),
+	property("--tw-skew-x"),
+	property("--tw-skew-y"),
+	property("--tw-pan-x"),
+	property("--tw-pan-y"),
+	property("--tw-pinch-zoom"),
+	property("--tw-scroll-snap-strictness", "proximity", "*"),
+	property("--tw-space-x-reverse", "0"),
+	property("--tw-space-y-reverse", "0"),
+	property("--tw-scrollbar-thumb", "#0000", "<color>"),
+	property("--tw-scrollbar-track", "#0000", "<color>"),
+	property("--tw-border-style", "solid"),
+	property("--tw-divide-x-reverse", "0"),
+	property("--tw-divide-y-reverse", "0"),
+	property("--tw-gradient-position", "initial"),
+	property("--tw-gradient-from", "#0000", "<color>"),
+	property("--tw-gradient-via", "#0000", "<color>"),
+	property("--tw-gradient-to", "#0000", "<color>"),
+	property("--tw-gradient-stops", "initial"),
+	property("--tw-gradient-via-stops", "initial"),
+	property("--tw-gradient-from-position", "0%", "<length-percentage>"),
+	property("--tw-gradient-via-position", "50%", "<length-percentage>"),
+	property("--tw-gradient-to-position", "100%", "<length-percentage>"),
+	property("--tw-mask-linear", "linear-gradient(#fff, #fff)"),
+	property("--tw-mask-radial", "linear-gradient(#fff, #fff)"),
+	property("--tw-mask-conic", "linear-gradient(#fff, #fff)"),
+	property("--tw-mask-left", "linear-gradient(#fff, #fff)"),
+	property("--tw-mask-right", "linear-gradient(#fff, #fff)"),
+	property("--tw-mask-bottom", "linear-gradient(#fff, #fff)"),
+	property("--tw-mask-top", "linear-gradient(#fff, #fff)"),
+	property("--tw-mask-linear-position", "0deg"),
+	property("--tw-mask-linear-from-position", "0%"),
+	property("--tw-mask-linear-to-position", "100%"),
+	property("--tw-mask-linear-from-color", "black"),
+	property("--tw-mask-linear-to-color", "transparent"),
+	property("--tw-mask-radial-from-position", "0%"),
+	property("--tw-mask-radial-to-position", "100%"),
+	property("--tw-mask-radial-from-color", "black"),
+	property("--tw-mask-radial-to-color", "transparent"),
+	property("--tw-mask-radial-shape", "ellipse"),
+	property("--tw-mask-radial-size", "farthest-corner"),
+	property("--tw-mask-radial-position", "center"),
+	property("--tw-mask-conic-position", "0deg"),
+	property("--tw-mask-conic-from-position", "0%"),
+	property("--tw-mask-conic-to-position", "100%"),
+	property("--tw-mask-conic-from-color", "black"),
+	property("--tw-mask-conic-to-color", "transparent"),
+	property("--tw-font-weight"),
+	property("--tw-blur"),
+	property("--tw-brightness"),
+	property("--tw-contrast"),
+	property("--tw-grayscale"),
+	property("--tw-hue-rotate"),
+	property("--tw-invert"),
+	property("--tw-opacity"),
+	property("--tw-saturate"),
+	property("--tw-sepia"),
+	property("--tw-drop-shadow"),
+	property("--tw-drop-shadow-color"),
+	property("--tw-drop-shadow-alpha", "100%", "<percentage>"),
+	property("--tw-drop-shadow-size"),
+	property("--tw-backdrop-blur"),
+	property("--tw-backdrop-brightness"),
+	property("--tw-backdrop-contrast"),
+	property("--tw-backdrop-grayscale"),
+	property("--tw-backdrop-hue-rotate"),
+	property("--tw-backdrop-invert"),
+	property("--tw-backdrop-opacity"),
+	property("--tw-backdrop-saturate"),
+	property("--tw-backdrop-sepia"),
+	property("--tw-duration", "initial"),
+	property("--tw-ease", "initial"),
+	property("--tw-content", "\"\""),
+	property("--tw-contain-size"),
+	property("--tw-contain-layout"),
+	property("--tw-contain-paint"),
+	property("--tw-contain-style"),
+	property("--tw-leading"),
+	property("--tw-tracking"),
+	property("--tw-ordinal"),
+	property("--tw-slashed-zero"),
+	property("--tw-numeric-figure"),
+	property("--tw-numeric-spacing"),
+	property("--tw-numeric-fraction"),
+	property("--tw-outline-style", "solid"),
+	property("--tw-text-shadow-color", "initial"),
+	property("--tw-text-shadow-alpha", "100%", "<percentage>"),
+	property("--tw-shadow", nullShadow),
+	property("--tw-shadow-color", "initial"),
+	property("--tw-shadow-alpha", "100%", "<percentage>"),
+	property("--tw-inset-shadow", nullShadow),
+	property("--tw-inset-shadow-color", "initial"),
+	property("--tw-inset-shadow-alpha", "100%", "<percentage>"),
+	property("--tw-ring-color"),
+	property("--tw-ring-shadow", nullShadow),
+	property("--tw-inset-ring-color"),
+	property("--tw-inset-ring-shadow", nullShadow),
+	property("--tw-ring-inset"),
+	property("--tw-ring-offset-width", "0px", "<length>"),
+	property("--tw-ring-offset-color", "#fff"),
+	property("--tw-ring-offset-shadow", nullShadow)
+];
+for (const edge of [
+	"top",
+	"right",
+	"bottom",
+	"left"
+]) nodes.push(property(`--tw-mask-${edge}-from-position`, "0%"), property(`--tw-mask-${edge}-to-position`, "100%"), property(`--tw-mask-${edge}-from-color`, "black"), property(`--tw-mask-${edge}-to-color`, "transparent"));
+//#endregion
+//#region src/utils/css-vars.ts
+/**
+* 将 CSS 变量定义转换为可直接插入的 Declaration 节点列表。
+*/
+function createCssVarNodes(definitions) {
+	return definitions.map((def) => new postcss.Declaration({
+		prop: def.prop,
+		value: def.value
+	}));
+}
+//#endregion
+//#region src/compat/tailwindcss-v4.ts
+const OKLAB_SUFFIX = "in oklab";
+const INFINITY_CALC_REGEXP = /calc\(\s*infinity\s*\*\s*(?:\d+(?:\.\d*)?|\.\d+)r?px/;
+const RADIUS_THRESHOLD = 1e5;
+const CLAMP_PX = 9999;
+const MODERN_CHECK_WEBKIT_HYPHENS_RE = /-webkit-hyphens\s*:\s*none/;
+const MODERN_CHECK_MARGIN_TRIM_RE = /margin-trim\s*:\s*inline/;
+const MODERN_CHECK_MOZ_ORIENT_RE = /-moz-orient\s*:\s*inline/;
+const MODERN_CHECK_COLOR_RGB_RE = /color\s*:\s*rgb\(\s*from\s+red\s+r\s+g\s+b\s*\)/;
+const LINEAR_GRADIENT_LAB_RE = /background-image\s*:\s*linear-gradient\(\s*in\s+lab\s*,\s*red\s*,\s*red\s*\)/;
+const DISPLAY_P3_COLOR_RE = /color\s*:\s*color\(\s*display-p3\s+0\s+0\s+0%\s*\)/;
 const DISPLAY_P3_VALUE_RE$1 = /color\(\s*display-p3\b/i;
 const COLOR_GAMUT_P3_RE$1 = /\(\s*color-gamut\s*:\s*p3\s*\)/i;
-function isDisplayP3MediaRule(atRule) {
+const RADIUS_VALUE_RE = /\b([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)\s*(r?px)\b/gi;
+const SCIENTIFIC_NOTATION_RE = /e/i;
+const TW_VAR_FUNCTION_RE = /var\(\s*(--tw-[\w-]+)\b/g;
+const TW_CONTENT_VAR_RE$1 = /var\(\s*--tw-content\b/;
+const DEFAULT_VARIABLE_SCOPE_SELECTORS = new Set([
+	"*",
+	":root",
+	":host",
+	"page",
+	".tw-root",
+	"wx-root-portal-content",
+	"view",
+	"text",
+	":before",
+	":after",
+	"::before",
+	"::after",
+	"::backdrop"
+]);
+function isTailwindcssV4(options) {
+	return options?.majorVersion === 4;
+}
+function testIfRootHostForV4(node) {
+	return node.type === "rule" && node.selector.includes(":root") && node.selector.includes(":host");
+}
+createCssVarNodes(nodes);
+function collectUsedTailwindcssV4Variables(root) {
+	const props = /* @__PURE__ */ new Set();
+	root.walkDecls((decl) => {
+		if (decl.prop.startsWith("--tw-")) props.add(decl.prop);
+		TW_VAR_FUNCTION_RE.lastIndex = 0;
+		let match = TW_VAR_FUNCTION_RE.exec(decl.value);
+		while (match !== null) {
+			const prop = match[1];
+			if (prop) props.add(prop);
+			match = TW_VAR_FUNCTION_RE.exec(decl.value);
+		}
+	});
+	root.walkAtRules("property", (atRule) => {
+		const prop = atRule.params.trim();
+		if (prop.startsWith("--tw-")) props.add(prop);
+	});
+	return props;
+}
+function usesTailwindcssV4ContentVariable(root) {
+	let used = false;
+	root.walkDecls((decl) => {
+		if (TW_CONTENT_VAR_RE$1.test(decl.value)) used = true;
+	});
+	return used;
+}
+function createUsedCssVarsV4Nodes(usedProps) {
+	return nodes.filter((def) => usedProps.has(def.prop)).map((def) => new postcss.Declaration({
+		prop: def.prop,
+		value: def.value
+	}));
+}
+function isInsideAtRule(decl, name) {
+	let parent = decl.parent;
+	while (parent) {
+		if (parent.type === "atrule" && parent.name === name) return true;
+		parent = parent.parent;
+	}
+	return false;
+}
+function isDefaultVariableScopeRule(rule) {
+	if (!rule.selectors.every((selector) => DEFAULT_VARIABLE_SCOPE_SELECTORS.has(selector.trim()))) return false;
+	let hasDeclaration = false;
+	let onlyCustomProperties = true;
+	rule.each((node) => {
+		if (node.type !== "decl") return;
+		hasDeclaration = true;
+		if (!node.prop.startsWith("--")) onlyCustomProperties = false;
+	});
+	return hasDeclaration && onlyCustomProperties;
+}
+function collectScopedTailwindcssV4DefaultVariables(root) {
+	const props = /* @__PURE__ */ new Set();
+	root.walkDecls((decl) => {
+		if (!decl.prop.startsWith("--tw-")) return;
+		if (isInsideAtRule(decl, "supports")) return;
+		if (decl.parent?.type === "rule" && isDefaultVariableScopeRule(decl.parent)) props.add(decl.prop);
+	});
+	return props;
+}
+function createMissingCssVarsV4Nodes(root, usedProps) {
+	const scopedProps = collectScopedTailwindcssV4DefaultVariables(root);
+	return nodes.filter((def) => usedProps.has(def.prop) && !scopedProps.has(def.prop)).map((def) => new postcss.Declaration({
+		prop: def.prop,
+		value: def.value
+	}));
+}
+function isTailwindcssV4ModernCheck(atRule) {
+	return atRule.name === "supports" && [
+		MODERN_CHECK_WEBKIT_HYPHENS_RE,
+		MODERN_CHECK_MARGIN_TRIM_RE,
+		MODERN_CHECK_MOZ_ORIENT_RE,
+		MODERN_CHECK_COLOR_RGB_RE
+	].every((regex) => regex.test(atRule.params));
+}
+function isTailwindcssV4LinearGradientSupports(atRule) {
+	return atRule.name === "supports" && LINEAR_GRADIENT_LAB_RE.test(atRule.params);
+}
+function isTailwindcssV4DisplayP3Supports(atRule) {
+	return atRule.name === "supports" && DISPLAY_P3_COLOR_RE.test(atRule.params);
+}
+function isTailwindcssV4DisplayP3Media(atRule) {
 	return atRule.name === "media" && COLOR_GAMUT_P3_RE$1.test(atRule.params);
 }
-function isDisplayP3Declaration(decl) {
+function isTailwindcssV4DisplayP3Declaration(decl) {
 	return DISPLAY_P3_VALUE_RE$1.test(decl.value);
 }
+function normalizeTailwindcssV4Declaration(decl) {
+	if (decl.prop === "--tw-gradient-position" && decl.value.endsWith(OKLAB_SUFFIX)) {
+		decl.value = decl.value.slice(0, decl.value.length - 8);
+		return true;
+	}
+	if (INFINITY_CALC_REGEXP.test(decl.value)) {
+		decl.value = `${CLAMP_PX}px`;
+		return true;
+	}
+	if (decl.prop.includes("radius")) {
+		RADIUS_VALUE_RE.lastIndex = 0;
+		const next = decl.value.replace(RADIUS_VALUE_RE, (m, num) => {
+			const n = Number(num);
+			if (!Number.isFinite(n)) return `${CLAMP_PX}px`;
+			if (SCIENTIFIC_NOTATION_RE.test(String(num)) || n > RADIUS_THRESHOLD) return `${CLAMP_PX}px`;
+			return m;
+		});
+		if (next !== decl.value) {
+			decl.value = next;
+			return true;
+		}
+	}
+	return false;
+}
+//#endregion
+//#region src/compat/mini-program-css/color-gamut.ts
+const DISPLAY_P3_VALUE_RE = /color\(\s*display-p3\b/i;
+const COLOR_GAMUT_P3_RE = /\(\s*color-gamut\s*:\s*p3\s*\)/i;
+function isDisplayP3MediaRule(atRule) {
+	return atRule.name === "media" && COLOR_GAMUT_P3_RE.test(atRule.params);
+}
+function isDisplayP3Declaration(decl) {
+	return DISPLAY_P3_VALUE_RE.test(decl.value);
+}
 //#endregion
 //#region src/compat/mini-program-css/selectors.ts
 const MINI_PROGRAM_THEME_SCOPE_SELECTOR = ":host,page,.tw-root,wx-root-portal-content";
-const MINI_PROGRAM_PREFLIGHT_SELECTORS = new Set([
-	"*",
+const MINI_PROGRAM_ELEMENT_SCOPE_SELECTOR = "view,text,::after,::before";
+const MINI_PROGRAM_ELEMENT_SCOPE_SELECTORS = new Set([
 	"view",
 	"text",
 	":before",
@@ -6950,6 +7239,7 @@ const MINI_PROGRAM_PREFLIGHT_SELECTORS = new Set([
 	"::before",
 	"::after"
 ]);
+const MINI_PROGRAM_PREFLIGHT_SELECTORS = new Set(["*", ...MINI_PROGRAM_ELEMENT_SCOPE_SELECTORS]);
 const MINI_PROGRAM_THEME_SCOPE_SELECTORS = new Set([
 	":host",
 	":root",
@@ -7028,8 +7318,14 @@ const MINI_PROGRAM_UNSUPPORTED_BROWSER_TAG_SELECTORS = new Set([
 function normalizeSelector$1(selector) {
 	return selector.trim().replace(/\s+/g, "");
 }
+function normalizePseudoElementSelector(selector) {
+	return normalizeSelector$1(selector).replace(/^:(before|after)$/, "::$1");
+}
 function getRuleSelectors(rule) {
-	return rule.selector.split(",").map(normalizeSelector$1).filter(Boolean);
+	return rule.selector.split(",").map(normalizePseudoElementSelector).filter(Boolean);
+}
+function getSortedRuleSelectorKey(rule) {
+	return getRuleSelectors(rule).sort().join(",");
 }
 function isUnsupportedBrowserSelector(selector) {
 	const normalized = normalizeSelector$1(selector);
@@ -7053,7 +7349,7 @@ const PREFLIGHT_RESET_PROPS = new Set([
 	"padding"
 ]);
 const PSEUDO_CONTENT_SELECTOR_RE = /^(?:::before|::after|:before|:after)(?:,(?:::before|::after|:before|:after))*$/;
-const TW_CONTENT_VAR_RE$1 = /var\(\s*--tw-content\b/;
+const TW_CONTENT_VAR_RE = /var\(\s*--tw-content\b/;
 function hasTailwindPreflightDeclaration(rule) {
 	let hasTailwindVar = false;
 	let hasResetProp = false;
@@ -7063,13 +7359,6 @@ function hasTailwindPreflightDeclaration(rule) {
 	});
 	return hasTailwindVar || hasResetProp;
 }
-function hasTwContentDeclaration(rule) {
-	let hasContentInit = false;
-	rule.walkDecls("--tw-content", () => {
-		hasContentInit = true;
-	});
-	return hasContentInit;
-}
 function isCustomPropertyRule(rule) {
 	let hasDeclaration = false;
 	let allCustomProperties = true;
@@ -7099,7 +7388,7 @@ function isPseudoContentInitRule(rule) {
 function usesTwContentVariable(root) {
 	let used = false;
 	root.walkDecls((decl) => {
-		if (TW_CONTENT_VAR_RE$1.test(decl.value)) used = true;
+		if (TW_CONTENT_VAR_RE.test(decl.value)) used = true;
 	});
 	return used;
 }
@@ -7182,8 +7471,11 @@ function removeUnsupportedModernColorDeclarations(root) {
 //#endregion
 //#region src/compat/mini-program-css/finalize.ts
 const HOIST_ANCHOR_COMMENT = "__weapp_tailwindcss_base_anchor__";
+const TAILWIND_V4_BANNER_RE = /\/\*!\s*tailwindcss v4\./;
+const MINI_PROGRAM_PSEUDO_CONTENT_SCOPE_SELECTOR = "::before,\n::after";
+const MINI_PROGRAM_PSEUDO_CONTENT_SELECTORS = new Set(["::before", "::after"]);
 function createPseudoContentInitRule() {
-	const rule = postcss.default.rule({ selector: "::before,\n::after" });
+	const rule = postcss.default.rule({ selector: MINI_PROGRAM_PSEUDO_CONTENT_SCOPE_SELECTOR });
 	rule.append({
 		prop: "--tw-content",
 		value: "''"
@@ -7192,22 +7484,29 @@ function createPseudoContentInitRule() {
 }
 function collectPreflightRules(root, options = {}) {
 	const preflightNodes = [];
-	let hasContentInit = false;
-	for (const node of root.nodes ?? []) if (isMiniProgramPreflightRule(node)) {
-		preflightNodes.push(node);
-		if (hasTwContentDeclaration(node)) hasContentInit = true;
-	}
+	for (const node of root.nodes ?? []) if (isMiniProgramPreflightRule(node)) preflightNodes.push(node);
 	if (preflightNodes.length === 0) return [];
-	const clonedPreflightRules = preflightNodes.map((node) => node.clone());
-	const contentInitRules = options.preservePseudoContentInit ? clonedPreflightRules.filter((rule) => hasTwContentDeclaration(rule)) : [];
-	const otherPreflightRules = clonedPreflightRules.filter((rule) => !hasTwContentDeclaration(rule));
-	const preflightRules = hasContentInit ? [...contentInitRules, ...otherPreflightRules] : [...options.preservePseudoContentInit ? [createPseudoContentInitRule()] : [], ...otherPreflightRules];
+	const clonedPreflightRules = preflightNodes.map((node) => {
+		const rule = node.clone();
+		rule.walkDecls("--tw-content", (decl) => {
+			if (isEmptyTwContentDeclaration(decl)) decl.remove();
+		});
+		return rule;
+	});
+	for (const rule of clonedPreflightRules) {
+		const selectors = getRuleSelectors(rule);
+		const hasElementSelector = selectors.some((selector) => selector === "view" || selector === "text");
+		if (selectors.length > 0 && selectors.every((selector) => MINI_PROGRAM_PSEUDO_CONTENT_SELECTORS.has(selector))) rule.selector = MINI_PROGRAM_PSEUDO_CONTENT_SCOPE_SELECTOR;
+		else if (hasElementSelector && selectors.every((selector) => MINI_PROGRAM_ELEMENT_SCOPE_SELECTORS.has(selector))) rule.selector = MINI_PROGRAM_ELEMENT_SCOPE_SELECTOR;
+	}
+	const nonEmptyPreflightRules = clonedPreflightRules.filter((rule) => (rule.nodes?.length ?? 0) > 0);
+	const preflightRules = [...options.preservePseudoContentInit ? [createPseudoContentInitRule()] : [], ...nonEmptyPreflightRules];
 	for (const node of preflightNodes) node.remove();
 	return preflightRules;
 }
 function createPreflightResetRule(cssPreflight) {
 	if (!cssPreflight || typeof cssPreflight !== "object") return;
-	const rule = postcss.default.rule({ selector: "view,text,:after,:before" });
+	const rule = postcss.default.rule({ selector: MINI_PROGRAM_ELEMENT_SCOPE_SELECTOR });
 	for (const [prop, value] of Object.entries(cssPreflight)) {
 		if (value === false) continue;
 		rule.append({
@@ -7236,6 +7535,18 @@ function collectThemeVariableRule(root, options = {}) {
 	for (const decl of declarations.values()) rule.append(decl);
 	return rule;
 }
+function hasTailwindcssV4Signal(css) {
+	if (TAILWIND_V4_BANNER_RE.test(css)) return true;
+	const root = postcss.default.parse(css);
+	let hasProperty = false;
+	root.walkAtRules("property", (atRule) => {
+		if (atRule.params.trim().startsWith("--tw-")) {
+			hasProperty = true;
+			return false;
+		}
+	});
+	return hasProperty;
+}
 function getTopDirectiveTail(root) {
 	let tail;
 	for (const node of root.nodes ?? []) {
@@ -7273,12 +7584,28 @@ function insertHoistedRules(root, rules, anchor) {
 	if (topDirectiveTail) topDirectiveTail.after(rules);
 	else root.prepend(rules);
 }
+function mergeEquivalentHoistedRules(rules) {
+	const mergedRules = [];
+	const ruleBySelector = /* @__PURE__ */ new Map();
+	for (const rule of rules) {
+		const key = getSortedRuleSelectorKey(rule);
+		const existingRule = ruleBySelector.get(key);
+		if (existingRule) {
+			existingRule.append(...(rule.nodes ?? []).map((node) => node.clone()));
+			continue;
+		}
+		ruleBySelector.set(key, rule);
+		mergedRules.push(rule);
+	}
+	return mergedRules;
+}
 function unwrapTailwindSourceMedia(root) {
 	root.walkAtRules("media", (atRule) => {
 		if (atRule.params.startsWith("source(") && atRule.nodes && atRule.nodes.length > 0) atRule.replaceWith(...atRule.nodes);
 	});
 }
 function finalizeMiniProgramCssRoot(root, options = {}) {
+	const tailwindcssV4DefaultNodes = options.isTailwindcssV4 === true ? createMissingCssVarsV4Nodes(root, collectUsedTailwindcssV4Variables(root)) : [];
 	removeUnsupportedCascadeLayers(root);
 	unwrapTailwindSourceMedia(root);
 	root.walkAtRules("property", (atRule) => {
@@ -7300,8 +7627,12 @@ function finalizeMiniProgramCssRoot(root, options = {}) {
 		const resetRule = createPreflightResetRule(options.cssPreflight);
 		if (resetRule) preflightRules.push(resetRule);
 	}
+	if (tailwindcssV4DefaultNodes.length > 0) preflightRules.push(postcss.default.rule({
+		selector: MINI_PROGRAM_ELEMENT_SCOPE_SELECTOR,
+		nodes: tailwindcssV4DefaultNodes
+	}));
 	const themeRule = collectThemeVariableRule(root, options);
-	insertHoistedRules(root, themeRule ? [...preflightRules, themeRule] : preflightRules, hoistAnchor);
+	insertHoistedRules(root, mergeEquivalentHoistedRules(themeRule ? [...preflightRules, themeRule] : preflightRules), hoistAnchor);
 }
 function hoistTailwindPreflightBase(css) {
 	try {
@@ -7313,10 +7644,19 @@ function hoistTailwindPreflightBase(css) {
 	}
 }
 function finalizeMiniProgramCss(css, options = {}) {
+	let isTailwindcssV4 = options.isTailwindcssV4;
+	if (isTailwindcssV4 === void 0) try {
+		isTailwindcssV4 = hasTailwindcssV4Signal(css);
+	} catch {
+		isTailwindcssV4 = TAILWIND_V4_BANNER_RE.test(css);
+	}
 	const cleanedCss = removeUnsupportedMiniProgramAtRules(css);
 	try {
 		const root = postcss.default.parse(cleanedCss);
-		finalizeMiniProgramCssRoot(root, options);
+		finalizeMiniProgramCssRoot(root, {
+			...options,
+			isTailwindcssV4
+		});
 		return root.toString();
 	} catch {
 		return cleanedCss;
@@ -7325,16 +7665,7 @@ function finalizeMiniProgramCss(css, options = {}) {
 //#endregion
 //#region src/compat/mini-program-css/prune-generated.ts
 const DEFAULT_WEAPP_VARIABLE_SCOPE = "page,.tw-root,wx-root-portal-content,:host";
-const DEFAULT_WEAPP_ELEMENT_VARIABLE_SCOPE = "view,text,:before,:after";
 const CLASS_SELECTOR_RE$1 = /(?:^|[^\w-])\.[_a-z\u00A0-\uFFFF\\-]/i;
-const MINI_PROGRAM_ELEMENT_VARIABLE_SCOPE_SELECTORS = new Set([
-	"view",
-	"text",
-	":before",
-	":after",
-	"::before",
-	"::after"
-]);
 function isConditionalCompilationComment(text) {
 	return /#(?:ifn?def|endif)\b/.test(text);
 }
@@ -7348,7 +7679,7 @@ function removeEmptyContentInitDeclarations(rule) {
 }
 function isMiniProgramElementVariableScopeRule(rule) {
 	const selectors = getRuleSelectors(rule);
-	return selectors.length > 0 && selectors.every((selector) => MINI_PROGRAM_ELEMENT_VARIABLE_SCOPE_SELECTORS.has(selector));
+	return selectors.length > 0 && selectors.every((selector) => MINI_PROGRAM_ELEMENT_SCOPE_SELECTORS.has(selector));
 }
 function isTailwindV4GradientRuntimeDeclaration(decl) {
 	return decl.prop.startsWith("--tw-gradient-");
@@ -7362,7 +7693,7 @@ function moveTailwindV4GradientRuntimeDeclarations(rule) {
 		}
 	});
 	if (gradientDeclarations.length > 0) rule.before(new postcss.default.Rule({
-		selector: DEFAULT_WEAPP_ELEMENT_VARIABLE_SCOPE,
+		selector: MINI_PROGRAM_ELEMENT_SCOPE_SELECTOR,
 		nodes: gradientDeclarations
 	}));
 	if (rule.nodes.length === 0) rule.remove();
@@ -7399,7 +7730,7 @@ function pruneMiniProgramGeneratedCss(css, options = {}) {
 	root.walkRules((rule) => {
 		if (isKeyframesRule(rule)) return;
 		if (isCustomPropertyRule(rule) && isMiniProgramElementVariableScopeRule(rule)) {
-			rule.selector = DEFAULT_WEAPP_ELEMENT_VARIABLE_SCOPE;
+			rule.selector = MINI_PROGRAM_ELEMENT_SCOPE_SELECTOR;
 			return;
 		}
 		if (isMiniProgramThemeVariableRule(rule)) {
@@ -52483,245 +52814,6 @@ function normalizeTailwindcssRpxDeclaration(decl, options) {
 	return false;
 }
 //#endregion
-//#region src/cssVarsV4.ts
-function property(ident, initialValue, _syntax) {
-	return {
-		prop: ident,
-		value: initialValue || ""
-	};
-}
-const nullShadow = "0 0 #0000";
-const nodes = [
-	property("--tw-border-spacing-x", "0", "<length>"),
-	property("--tw-border-spacing-y", "0", "<length>"),
-	property("--tw-translate-x", "0"),
-	property("--tw-translate-y", "0"),
-	property("--tw-translate-z", "0"),
-	property("--tw-scale-x", "1"),
-	property("--tw-scale-y", "1"),
-	property("--tw-scale-z", "1"),
-	property("--tw-rotate-x"),
-	property("--tw-rotate-y"),
-	property("--tw-rotate-z"),
-	property("--tw-skew-x"),
-	property("--tw-skew-y"),
-	property("--tw-pan-x"),
-	property("--tw-pan-y"),
-	property("--tw-pinch-zoom"),
-	property("--tw-scroll-snap-strictness", "proximity", "*"),
-	property("--tw-space-x-reverse", "0"),
-	property("--tw-space-y-reverse", "0"),
-	property("--tw-scrollbar-thumb", "#0000", "<color>"),
-	property("--tw-scrollbar-track", "#0000", "<color>"),
-	property("--tw-border-style", "solid"),
-	property("--tw-divide-x-reverse", "0"),
-	property("--tw-divide-y-reverse", "0"),
-	property("--tw-gradient-position", "initial"),
-	property("--tw-gradient-from", "#0000", "<color>"),
-	property("--tw-gradient-via", "#0000", "<color>"),
-	property("--tw-gradient-to", "#0000", "<color>"),
-	property("--tw-gradient-stops", "initial"),
-	property("--tw-gradient-via-stops", "initial"),
-	property("--tw-gradient-from-position", "0%", "<length-percentage>"),
-	property("--tw-gradient-via-position", "50%", "<length-percentage>"),
-	property("--tw-gradient-to-position", "100%", "<length-percentage>"),
-	property("--tw-mask-linear", "linear-gradient(#fff, #fff)"),
-	property("--tw-mask-radial", "linear-gradient(#fff, #fff)"),
-	property("--tw-mask-conic", "linear-gradient(#fff, #fff)"),
-	property("--tw-mask-left", "linear-gradient(#fff, #fff)"),
-	property("--tw-mask-right", "linear-gradient(#fff, #fff)"),
-	property("--tw-mask-bottom", "linear-gradient(#fff, #fff)"),
-	property("--tw-mask-top", "linear-gradient(#fff, #fff)"),
-	property("--tw-mask-linear-position", "0deg"),
-	property("--tw-mask-linear-from-position", "0%"),
-	property("--tw-mask-linear-to-position", "100%"),
-	property("--tw-mask-linear-from-color", "black"),
-	property("--tw-mask-linear-to-color", "transparent"),
-	property("--tw-mask-radial-from-position", "0%"),
-	property("--tw-mask-radial-to-position", "100%"),
-	property("--tw-mask-radial-from-color", "black"),
-	property("--tw-mask-radial-to-color", "transparent"),
-	property("--tw-mask-radial-shape", "ellipse"),
-	property("--tw-mask-radial-size", "farthest-corner"),
-	property("--tw-mask-radial-position", "center"),
-	property("--tw-mask-conic-position", "0deg"),
-	property("--tw-mask-conic-from-position", "0%"),
-	property("--tw-mask-conic-to-position", "100%"),
-	property("--tw-mask-conic-from-color", "black"),
-	property("--tw-mask-conic-to-color", "transparent"),
-	property("--tw-font-weight"),
-	property("--tw-blur"),
-	property("--tw-brightness"),
-	property("--tw-contrast"),
-	property("--tw-grayscale"),
-	property("--tw-hue-rotate"),
-	property("--tw-invert"),
-	property("--tw-opacity"),
-	property("--tw-saturate"),
-	property("--tw-sepia"),
-	property("--tw-drop-shadow"),
-	property("--tw-drop-shadow-color"),
-	property("--tw-drop-shadow-alpha", "100%", "<percentage>"),
-	property("--tw-drop-shadow-size"),
-	property("--tw-backdrop-blur"),
-	property("--tw-backdrop-brightness"),
-	property("--tw-backdrop-contrast"),
-	property("--tw-backdrop-grayscale"),
-	property("--tw-backdrop-hue-rotate"),
-	property("--tw-backdrop-invert"),
-	property("--tw-backdrop-opacity"),
-	property("--tw-backdrop-saturate"),
-	property("--tw-backdrop-sepia"),
-	property("--tw-duration", "initial"),
-	property("--tw-ease", "initial"),
-	property("--tw-content", "\"\""),
-	property("--tw-contain-size"),
-	property("--tw-contain-layout"),
-	property("--tw-contain-paint"),
-	property("--tw-contain-style"),
-	property("--tw-leading"),
-	property("--tw-tracking"),
-	property("--tw-ordinal"),
-	property("--tw-slashed-zero"),
-	property("--tw-numeric-figure"),
-	property("--tw-numeric-spacing"),
-	property("--tw-numeric-fraction"),
-	property("--tw-outline-style", "solid"),
-	property("--tw-text-shadow-color", "initial"),
-	property("--tw-text-shadow-alpha", "100%", "<percentage>"),
-	property("--tw-shadow", nullShadow),
-	property("--tw-shadow-color", "initial"),
-	property("--tw-shadow-alpha", "100%", "<percentage>"),
-	property("--tw-inset-shadow", nullShadow),
-	property("--tw-inset-shadow-color", "initial"),
-	property("--tw-inset-shadow-alpha", "100%", "<percentage>"),
-	property("--tw-ring-color"),
-	property("--tw-ring-shadow", nullShadow),
-	property("--tw-inset-ring-color"),
-	property("--tw-inset-ring-shadow", nullShadow),
-	property("--tw-ring-inset"),
-	property("--tw-ring-offset-width", "0px", "<length>"),
-	property("--tw-ring-offset-color", "#fff"),
-	property("--tw-ring-offset-shadow", nullShadow)
-];
-for (const edge of [
-	"top",
-	"right",
-	"bottom",
-	"left"
-]) nodes.push(property(`--tw-mask-${edge}-from-position`, "0%"), property(`--tw-mask-${edge}-to-position`, "100%"), property(`--tw-mask-${edge}-from-color`, "black"), property(`--tw-mask-${edge}-to-color`, "transparent"));
-//#endregion
-//#region src/utils/css-vars.ts
-/**
-* 将 CSS 变量定义转换为可直接插入的 Declaration 节点列表。
-*/
-function createCssVarNodes(definitions) {
-	return definitions.map((def) => new postcss.Declaration({
-		prop: def.prop,
-		value: def.value
-	}));
-}
-//#endregion
-//#region src/compat/tailwindcss-v4.ts
-const OKLAB_SUFFIX = "in oklab";
-const INFINITY_CALC_REGEXP = /calc\(\s*infinity\s*\*\s*(?:\d+(?:\.\d*)?|\.\d+)r?px/;
-const RADIUS_THRESHOLD = 1e5;
-const CLAMP_PX = 9999;
-const MODERN_CHECK_WEBKIT_HYPHENS_RE = /-webkit-hyphens\s*:\s*none/;
-const MODERN_CHECK_MARGIN_TRIM_RE = /margin-trim\s*:\s*inline/;
-const MODERN_CHECK_MOZ_ORIENT_RE = /-moz-orient\s*:\s*inline/;
-const MODERN_CHECK_COLOR_RGB_RE = /color\s*:\s*rgb\(\s*from\s+red\s+r\s+g\s+b\s*\)/;
-const LINEAR_GRADIENT_LAB_RE = /background-image\s*:\s*linear-gradient\(\s*in\s+lab\s*,\s*red\s*,\s*red\s*\)/;
-const DISPLAY_P3_COLOR_RE = /color\s*:\s*color\(\s*display-p3\s+0\s+0\s+0%\s*\)/;
-const DISPLAY_P3_VALUE_RE = /color\(\s*display-p3\b/i;
-const COLOR_GAMUT_P3_RE = /\(\s*color-gamut\s*:\s*p3\s*\)/i;
-const RADIUS_VALUE_RE = /\b([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)\s*(r?px)\b/gi;
-const SCIENTIFIC_NOTATION_RE = /e/i;
-const TW_VAR_FUNCTION_RE = /var\(\s*(--tw-[\w-]+)\b/g;
-const TW_CONTENT_VAR_RE = /var\(\s*--tw-content\b/;
-function isTailwindcssV4(options) {
-	return options?.majorVersion === 4;
-}
-function testIfRootHostForV4(node) {
-	return node.type === "rule" && node.selector.includes(":root") && node.selector.includes(":host");
-}
-createCssVarNodes(nodes);
-function collectUsedTailwindcssV4Variables(root) {
-	const props = /* @__PURE__ */ new Set();
-	root.walkDecls((decl) => {
-		if (decl.prop.startsWith("--tw-")) props.add(decl.prop);
-		TW_VAR_FUNCTION_RE.lastIndex = 0;
-		let match = TW_VAR_FUNCTION_RE.exec(decl.value);
-		while (match !== null) {
-			const prop = match[1];
-			if (prop) props.add(prop);
-			match = TW_VAR_FUNCTION_RE.exec(decl.value);
-		}
-	});
-	root.walkAtRules("property", (atRule) => {
-		const prop = atRule.params.trim();
-		if (prop.startsWith("--tw-")) props.add(prop);
-	});
-	return props;
-}
-function usesTailwindcssV4ContentVariable(root) {
-	let used = false;
-	root.walkDecls((decl) => {
-		if (TW_CONTENT_VAR_RE.test(decl.value)) used = true;
-	});
-	return used;
-}
-function createUsedCssVarsV4Nodes(usedProps) {
-	return nodes.filter((def) => usedProps.has(def.prop)).map((def) => new postcss.Declaration({
-		prop: def.prop,
-		value: def.value
-	}));
-}
-function isTailwindcssV4ModernCheck(atRule) {
-	return atRule.name === "supports" && [
-		MODERN_CHECK_WEBKIT_HYPHENS_RE,
-		MODERN_CHECK_MARGIN_TRIM_RE,
-		MODERN_CHECK_MOZ_ORIENT_RE,
-		MODERN_CHECK_COLOR_RGB_RE
-	].every((regex) => regex.test(atRule.params));
-}
-function isTailwindcssV4LinearGradientSupports(atRule) {
-	return atRule.name === "supports" && LINEAR_GRADIENT_LAB_RE.test(atRule.params);
-}
-function isTailwindcssV4DisplayP3Supports(atRule) {
-	return atRule.name === "supports" && DISPLAY_P3_COLOR_RE.test(atRule.params);
-}
-function isTailwindcssV4DisplayP3Media(atRule) {
-	return atRule.name === "media" && COLOR_GAMUT_P3_RE.test(atRule.params);
-}
-function isTailwindcssV4DisplayP3Declaration(decl) {
-	return DISPLAY_P3_VALUE_RE.test(decl.value);
-}
-function normalizeTailwindcssV4Declaration(decl) {
-	if (decl.prop === "--tw-gradient-position" && decl.value.endsWith(OKLAB_SUFFIX)) {
-		decl.value = decl.value.slice(0, decl.value.length - 8);
-		return true;
-	}
-	if (INFINITY_CALC_REGEXP.test(decl.value)) {
-		decl.value = `${CLAMP_PX}px`;
-		return true;
-	}
-	if (decl.prop.includes("radius")) {
-		RADIUS_VALUE_RE.lastIndex = 0;
-		const next = decl.value.replace(RADIUS_VALUE_RE, (m, num) => {
-			const n = Number(num);
-			if (!Number.isFinite(n)) return `${CLAMP_PX}px`;
-			if (SCIENTIFIC_NOTATION_RE.test(String(num)) || n > RADIUS_THRESHOLD) return `${CLAMP_PX}px`;
-			return m;
-		});
-		if (next !== decl.value) {
-			decl.value = next;
-			return true;
-		}
-	}
-	return false;
-}
-//#endregion
 //#region src/constants.ts
 const postcssPlugin = "postcss-weapp-tailwindcss-rename-plugin";
 //#endregion
@@ -53111,6 +53203,7 @@ const MINI_PROGRAM_UNSUPPORTED_PSEUDO_ELEMENT_SELECTOR_SET = new Set([
 	"::-webkit-backdrop",
 	"::file-selector-button"
 ]);
+const NORMALIZED_PSEUDO_ELEMENT_SELECTOR = new Map([[":before", "::before"], [":after", "::after"]]);
 function shouldRemoveUnsupportedPseudoElementSelector(selector, options) {
 	if (!isUniAppXEnabled(options)) return selector.nodes.some((node) => node.type === "pseudo" && MINI_PROGRAM_UNSUPPORTED_PSEUDO_ELEMENT_SELECTOR_SET.has(node.value));
 	return selector.nodes.some((node) => node.type === "pseudo" && UNSUPPORTED_PSEUDO_ELEMENT_SELECTOR_SET.has(node.value));
@@ -53147,6 +53240,11 @@ function handlePseudoNode(node, index, context, parent) {
 		node.value = context.rootReplacement;
 		return;
 	}
+	const normalizedPseudoElement = NORMALIZED_PSEUDO_ELEMENT_SELECTOR.get(node.value);
+	if (normalizedPseudoElement) {
+		node.value = normalizedPseudoElement;
+		return;
+	}
 	if (node.value === ":where") flattenWherePseudo(node, context, index, parent);
 }
 function handleTagOrAttribute(node, context) {
@@ -53605,12 +53703,21 @@ function removeLegacyFlexboxPrefix(decl) {
 	}
 	if (LEGACY_FLEXBOX_DECLARATION_PROPS.has(decl.prop)) decl.remove();
 }
+function injectMissingTailwindcssV4Defaults(root) {
+	const nodes = createMissingCssVarsV4Nodes(root, collectUsedTailwindcssV4Variables(root));
+	if (nodes.length === 0) return;
+	root.append({
+		selector: MINI_PROGRAM_ELEMENT_SCOPE_SELECTOR,
+		nodes
+	});
+}
 const postcssWeappTailwindcssPostPlugin = (options) => {
 	const opts = (0, _weapp_tailwindcss_shared.defu)(options, { isMainChunk: true });
 	const p = { postcssPlugin };
 	const cleanRootSpecificity = createRootSpecificityCleaner(opts);
 	const cleanFallbackPlaceholder = createFallbackPlaceholderCleaner();
 	const shouldAppendHostSelector = createHostSelectorAppender(opts);
+	let shouldInjectTailwindcssV4Defaults = false;
 	const enableMainChunkTransforms = opts.isMainChunk !== false;
 	if (enableMainChunkTransforms || cleanRootSpecificity) {
 		const fallbackRemove = enableMainChunkTransforms ? getFallbackRemove(void 0, opts) : void 0;
@@ -53647,13 +53754,17 @@ const postcssWeappTailwindcssPostPlugin = (options) => {
 			root.walkAtRules((atRule) => {
 				removeUnsupportedMiniProgramPrefixedAtRule(atRule);
 			});
+			if (shouldInjectTailwindcssV4Defaults) injectMissingTailwindcssV4Defaults(root);
 		};
 		p.AtRuleExit = (atRule) => {
 			removeUnsupportedMiniProgramPrefixedAtRule(atRule);
 			/**
 			* @description 移除 property
 			*/
-			if (opts.cssRemoveProperty && atRule.name === "property") atRule.remove();
+			if (opts.cssRemoveProperty && atRule.name === "property") {
+				if (opts.majorVersion === 4 && atRule.params.trim().startsWith("--tw-")) shouldInjectTailwindcssV4Defaults = true;
+				atRule.remove();
+			}
 			/**
 			* 清除空节点
 			*/