npm - @weapp-tailwindcss/postcss - Versions diffs - 2.2.1-next.2 → 2.2.1-next.4 - Mend

@weapp-tailwindcss/postcss 2.2.1-next.2 → 2.2.1-next.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/compat/color-mix.d.ts +10 -1
package/dist/compat/tailwindcss-v4.d.ts +5 -1
package/dist/index.d.ts +1 -1
package/dist/index.js +287 -38
package/dist/index.mjs +287 -39
package/package.json +5 -2

package/dist/compat/color-mix.d.ts CHANGED Viewed

@@ -2,4 +2,13 @@ export interface DynamicColorMixAlphaProtection {
     css: string;
     restore: (css: string) => string;
 }
-export declare function protectDynamicColorMixAlpha(css: string): DynamicColorMixAlphaProtection;
+export interface DynamicColorMixAlphaProtectionOptions {
+    customPropertyValues?: ReadonlyMap<string, string> | undefined;
+}
+export interface ModernColorValueNormalization {
+    value: string;
+    changed: boolean;
+    hasUnsupported: boolean;
+}
+export declare function normalizeModernColorValue(value: string, customPropertyValues?: ReadonlyMap<string, string>): ModernColorValueNormalization;
+export declare function protectDynamicColorMixAlpha(css: string, options?: DynamicColorMixAlphaProtectionOptions): DynamicColorMixAlphaProtection;

package/dist/compat/tailwindcss-v4.d.ts CHANGED Viewed

@@ -1,9 +1,13 @@
-import type { AtRule, Declaration, Rule } from 'postcss';
+import type { AtRule, Root, Rule } from 'postcss';
+import { Declaration } from 'postcss';
 export declare function isTailwindcssV4(options?: {
     majorVersion?: number;
 }): boolean;
 export declare function testIfRootHostForV4(node: Rule): boolean;
 export declare const cssVarsV4Nodes: Declaration[];
+export declare function collectUsedTailwindcssV4Variables(root: Root): Set<string>;
+export declare function usesTailwindcssV4ContentVariable(root: Root): boolean;
+export declare function createUsedCssVarsV4Nodes(usedProps: ReadonlySet<string>): Declaration[];
 export declare function isTailwindcssV4ModernCheck(atRule: AtRule): boolean;
 export declare function isTailwindcssV4LinearGradientSupports(atRule: AtRule): boolean;
 export declare function isTailwindcssV4DisplayP3Supports(atRule: AtRule): boolean;

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { type DynamicColorMixAlphaProtection, protectDynamicColorMixAlpha } from './compat/color-mix';
+export { type DynamicColorMixAlphaProtection, type DynamicColorMixAlphaProtectionOptions, type ModernColorValueNormalization, normalizeModernColorValue, protectDynamicColorMixAlpha, } from './compat/color-mix';
 export * from './handler';
 export { default as postcssHtmlTransform, type IOptions as PostcssHtmlTransformOptions } from './html-transform';
 export { createStylePipeline, type PipelineNodeContext, type PipelineNodeCursor, type PipelineStage, type ResolvedPipelineNode, type StyleProcessingPipeline, } from './pipeline';

package/dist/index.js CHANGED Viewed

@@ -1,6 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_html_transform = require("./html-transform-DuSRw6IH.js");
 require("./types.js");
+let _csstools_css_color_parser = require("@csstools/css-color-parser");
+let _csstools_css_parser_algorithms = require("@csstools/css-parser-algorithms");
+let _csstools_css_tokenizer = require("@csstools/css-tokenizer");
 let postcss = require("postcss");
 postcss = require_html_transform.__toESM(postcss);
 let postcss_value_parser = require("postcss-value-parser");
@@ -24,9 +27,19 @@ postcss_rule_unit_converter = require_html_transform.__toESM(postcss_rule_unit_c
 let _weapp_core_escape = require("@weapp-core/escape");
 //#region src/compat/color-mix.ts
 const COLOR_MIX_NAME = "color-mix";
-const PLACEHOLDER_PREFIX = "__weapp_tw_dynamic_color_mix_";
+const MODERN_COLOR_FUNCTION_NAMES = new Set([
+	"oklch",
+	"oklab",
+	"lch",
+	"lab"
+]);
+const PLACEHOLDER_PREFIX = "__weapp_tw_color_mix_";
 const DYNAMIC_ALPHA_RE = /\b(?:var|env)\(|--[\w-]+\b/;
 const INTERNAL_TAILWIND_ALPHA_RE = /var\(\s*--tw-[^)]+-alpha\s*\)/;
+const TRANSPARENT_COLOR_RE = /^transparent$/i;
+const CURRENT_COLOR_RE = /^currentcolor$/i;
+const CSS_WIDE_KEYWORD_RE = /^(?:inherit|initial|unset|revert|revert-layer)$/i;
+const CUSTOM_PROPERTY_RE = /^--[\w-]+$/;
 function splitArguments(nodes) {
 	const args = [];
 	let current = [];
@@ -57,15 +70,147 @@ function splitStopSegments(nodes) {
 	if (current.length > 0) segments.push(current);
 	return segments;
 }
-function hasDynamicStopAlpha(nodes) {
-	const segments = splitStopSegments(nodes);
-	if (segments.length < 2) return false;
-	const alpha = postcss_value_parser.default.stringify(segments[segments.length - 1]).trim();
-	if (INTERNAL_TAILWIND_ALPHA_RE.test(alpha)) return false;
-	return DYNAMIC_ALPHA_RE.test(alpha);
+function trimNodes$1(nodes) {
+	let start = 0;
+	let end = nodes.length;
+	while (start < end && nodes[start]?.type === "space") start += 1;
+	while (end > start && nodes[end - 1]?.type === "space") end -= 1;
+	return nodes.slice(start, end);
+}
+function getParsedColorData(colorSource) {
+	try {
+		return (0, _csstools_css_color_parser.color)((0, _csstools_css_parser_algorithms.parseComponentValue)((0, _csstools_css_tokenizer.tokenize)({ css: colorSource })));
+	} catch {
+		return false;
+	}
+}
+function parseAlphaValue(alphaSource) {
+	const parsed = Number.parseFloat(alphaSource);
+	if (Number.isFinite(parsed)) return alphaSource.trim().endsWith("%") ? parsed / 100 : parsed;
+}
+function resolveVarColor(colorSource, customPropertyValues, depth = 0) {
+	if (depth > 5) return;
+	const parsed = (0, postcss_value_parser.default)(colorSource.trim());
+	const node = parsed.nodes.length === 1 ? parsed.nodes[0] : void 0;
+	if (node?.type !== "function" || node.value.toLowerCase() !== "var") return;
+	const args = splitArguments(node.nodes);
+	const propertyName = postcss_value_parser.default.stringify(trimNodes$1(args[0] ?? [])).trim();
+	if (!CUSTOM_PROPERTY_RE.test(propertyName)) return;
+	const resolved = customPropertyValues.get(propertyName);
+	if (!resolved) {
+		const fallback = args[1] ? postcss_value_parser.default.stringify(trimNodes$1(args[1])).trim() : void 0;
+		return fallback ? resolveColorData(fallback, customPropertyValues, depth + 1) : void 0;
+	}
+	return resolveColorData(resolved, customPropertyValues, depth + 1);
+}
+function resolveColorData(colorSource, customPropertyValues, depth = 0) {
+	if (typeof colorSource !== "string") return;
+	const trimmed = colorSource.trim();
+	if (TRANSPARENT_COLOR_RE.test(trimmed)) return getParsedColorData(trimmed) || void 0;
+	if (CURRENT_COLOR_RE.test(trimmed) || CSS_WIDE_KEYWORD_RE.test(trimmed)) return;
+	const resolvedVar = resolveVarColor(trimmed, customPropertyValues, depth);
+	if (resolvedVar) return resolvedVar;
+	return getParsedColorData(trimmed) || void 0;
+}
+function normalizeColorFunctionName(colorSource, alpha, customPropertyValues) {
+	const resolvedColor = resolveColorData(colorSource, customPropertyValues);
+	if (!resolvedColor) return;
+	resolvedColor.alpha = alpha;
+	return (0, _csstools_css_color_parser.serializeRGB)(resolvedColor).toString();
+}
+function normalizeStandaloneColorFunction(colorSource) {
+	const resolvedColor = getParsedColorData(colorSource);
+	return resolvedColor ? (0, _csstools_css_color_parser.serializeRGB)(resolvedColor).toString() : void 0;
+}
+function isDisplayP3ColorFunction(colorSource) {
+	return /^color\(\s*display-p3\b/i.test(colorSource.trim());
+}
+function hasUnsupportedModernColorFunction(value) {
+	const parsed = (0, postcss_value_parser.default)(value);
+	let hasUnsupported = false;
+	parsed.walk((node) => {
+		if (node.type !== "function") return;
+		const name = node.value.toLowerCase();
+		if (name === COLOR_MIX_NAME || MODERN_COLOR_FUNCTION_NAMES.has(name) || name === "color" && isDisplayP3ColorFunction(postcss_value_parser.default.stringify(node))) {
+			hasUnsupported = true;
+			return false;
+		}
+	});
+	return hasUnsupported;
+}
+function normalizeModernColorValue(value, customPropertyValues = /* @__PURE__ */ new Map()) {
+	if (!hasUnsupportedModernColorFunction(value)) return {
+		value,
+		changed: false,
+		hasUnsupported: false
+	};
+	const parsed = (0, postcss_value_parser.default)(value);
+	let changed = false;
+	parsed.walk((node) => {
+		if (node.type !== "function") return;
+		const name = node.value.toLowerCase();
+		const source = postcss_value_parser.default.stringify(node);
+		let normalized;
+		if (MODERN_COLOR_FUNCTION_NAMES.has(name) || name === "color" && isDisplayP3ColorFunction(source)) normalized = normalizeStandaloneColorFunction(source);
+		else if (name === COLOR_MIX_NAME) normalized = tryResolveColorMix(node, customPropertyValues)?.value;
+		if (!normalized) return;
+		const mutableNode = node;
+		mutableNode.type = "word";
+		mutableNode.value = normalized;
+		delete mutableNode.nodes;
+		changed = true;
+	});
+	const nextValue = changed ? parsed.toString() : value;
+	return {
+		value: nextValue,
+		changed,
+		hasUnsupported: hasUnsupportedModernColorFunction(nextValue)
+	};
 }
-function shouldProtectColorMix(node) {
-	return splitArguments(node.nodes).slice(1).some(hasDynamicStopAlpha);
+function createRgbaWithAlpha(colorSource, alphaSource, customPropertyValues) {
+	const resolvedColor = resolveColorData(colorSource, customPropertyValues);
+	if (!resolvedColor) return;
+	const [red, green, blue] = resolvedColor.channels.map((channel) => Math.round(Math.min(1, Math.max(0, channel)) * 255));
+	const alpha = alphaSource.trim();
+	return `rgba(${red}, ${green}, ${blue}, ${CUSTOM_PROPERTY_RE.test(alpha) ? `var(${alpha})` : alpha})`;
+}
+function tryResolveColorMix(node, customPropertyValues) {
+	const args = splitArguments(node.nodes);
+	if (args.length < 3) return;
+	const colorStopNodes = splitStopSegments(args[1] ?? []);
+	if (colorStopNodes.length < 2) return;
+	const colorNodes = trimNodes$1(colorStopNodes[0] ?? []);
+	const alphaNodes = trimNodes$1(colorStopNodes[1] ?? []);
+	const trailingNodes = trimNodes$1(args[2] ?? []);
+	if (!colorNodes.length || !alphaNodes.length || postcss_value_parser.default.stringify(trailingNodes).trim().toLowerCase() !== "transparent") return;
+	const colorSource = postcss_value_parser.default.stringify(colorNodes).trim();
+	const alphaSource = postcss_value_parser.default.stringify(alphaNodes).trim();
+	if (!colorSource || !alphaSource || INTERNAL_TAILWIND_ALPHA_RE.test(alphaSource)) return;
+	if (CURRENT_COLOR_RE.test(colorSource)) return {
+		value: colorSource,
+		deferred: false
+	};
+	if (DYNAMIC_ALPHA_RE.test(alphaSource)) {
+		const normalized = createRgbaWithAlpha(colorSource, alphaSource, customPropertyValues);
+		return normalized ? {
+			value: normalized,
+			deferred: true
+		} : {
+			value: colorSource,
+			deferred: true
+		};
+	}
+	const alpha = parseAlphaValue(alphaSource);
+	if (alpha === void 0) return;
+	const normalized = normalizeColorFunctionName(colorSource, alpha, customPropertyValues);
+	if (normalized) return {
+		value: normalized,
+		deferred: false
+	};
+	return {
+		value: colorSource,
+		deferred: false
+	};
 }
 function createPlaceholder(index) {
 	return `${PLACEHOLDER_PREFIX}${index}__`;
@@ -76,40 +221,54 @@ function unwrapProtectedSupports(cssRoot) {
 		atRule.replaceWith(atRule.nodes);
 	});
 }
-function protectDynamicColorMixAlpha(css) {
+function protectDynamicColorMixAlpha(css, options = {}) {
 	if (!css.includes(COLOR_MIX_NAME)) return {
 		css,
 		restore: (value) => value
 	};
 	const replacements = /* @__PURE__ */ new Map();
 	const root = postcss.default.parse(css);
+	const customPropertyValues = new Map(options.customPropertyValues);
+	let changed = false;
+	root.walkDecls((decl) => {
+		if (decl.prop.startsWith("--") && !decl.value.includes(COLOR_MIX_NAME)) customPropertyValues.set(decl.prop, decl.value.trim());
+	});
 	root.walkDecls((decl) => {
 		if (!decl.value.includes(COLOR_MIX_NAME)) return;
 		const parsed = (0, postcss_value_parser.default)(decl.value);
 		let mutated = false;
 		parsed.walk((node) => {
 			if (node.type !== "function" || node.value.toLowerCase() !== COLOR_MIX_NAME) return;
-			if (!shouldProtectColorMix(node)) return;
-			const placeholder = createPlaceholder(replacements.size);
-			replacements.set(placeholder, postcss_value_parser.default.stringify(node));
-			const mutableNode = node;
-			mutableNode.type = "word";
-			mutableNode.value = placeholder;
-			delete mutableNode.nodes;
-			mutated = true;
+			const resolved = tryResolveColorMix(node, customPropertyValues);
+			if (resolved) {
+				if (resolved.deferred) {
+					const placeholder = createPlaceholder(replacements.size);
+					replacements.set(placeholder, resolved.value);
+					const mutableNode = node;
+					mutableNode.type = "word";
+					mutableNode.value = placeholder;
+					delete mutableNode.nodes;
+					mutated = true;
+					return;
+				}
+				const mutableNode = node;
+				mutableNode.type = "word";
+				mutableNode.value = resolved.value;
+				delete mutableNode.nodes;
+				mutated = true;
+			}
 		});
-		if (mutated) decl.value = parsed.toString();
+		if (mutated) {
+			decl.value = parsed.toString();
+			changed = true;
+		}
 	});
-	if (replacements.size === 0) return {
-		css,
-		restore: (value) => value
-	};
-	unwrapProtectedSupports(root);
+	if (replacements.size > 0) unwrapProtectedSupports(root);
 	return {
-		css: root.toString(),
+		css: changed ? root.toString() : css,
 		restore(value) {
 			let restored = value;
-			for (const [placeholder, original] of replacements) restored = restored.split(placeholder).join(original);
+			for (const [placeholder, replacement] of replacements) restored = restored.split(placeholder).join(replacement);
 			return restored;
 		}
 	};
@@ -141,7 +300,7 @@ function isBaseCarrierSelector(selector) {
 function isBaseCarrierRule(rule) {
 	return Array.isArray(rule.selectors) && rule.selectors.length > 0 && rule.selectors.every(isBaseCarrierSelector);
 }
-function hasClassSelector(rule) {
+function hasClassSelector$1(rule) {
 	return Array.isArray(rule.selectors) && rule.selectors.some((selector) => CLASS_SELECTOR_RE.test(selector));
 }
 function collectRequiredTwVars(value) {
@@ -171,7 +330,7 @@ function extractUniAppXBaseDefaults(result) {
 function injectUniAppXBaseDefaults(result, defaults) {
 	if (defaults.size === 0) return;
 	result.root.walkRules((rule) => {
-		if (!hasClassSelector(rule)) return;
+		if (!hasClassSelector$1(rule)) return;
 		const declaredProps = /* @__PURE__ */ new Set();
 		const requiredProps = /* @__PURE__ */ new Set();
 		rule.walkDecls((decl) => {
@@ -532,6 +691,7 @@ const WEAPP_AUTOPREFIXER_BROWSERS = [
 	"Android >= 4.4",
 	"ChromeAndroid >= 37"
 ];
+const WEAPP_AUTOPREFIXER_DEFAULT_OPTIONS = { flexbox: false };
 const AUTOPREFIXER_PLUGIN_NAME = "autoprefixer";
 function isAutoprefixerPlugin(plugin) {
 	return plugin?.postcssPlugin === AUTOPREFIXER_PLUGIN_NAME;
@@ -540,6 +700,7 @@ function resolveAutoprefixerPlugin(option) {
 	if (option === false) return;
 	const userOptions = option === true || option === void 0 ? {} : option;
 	return (0, autoprefixer.default)({
+		...WEAPP_AUTOPREFIXER_DEFAULT_OPTIONS,
 		...userOptions,
 		overrideBrowserslist: userOptions.overrideBrowserslist ?? WEAPP_AUTOPREFIXER_BROWSERS
 	});
@@ -821,6 +982,8 @@ const nodes = [
 	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"),
@@ -945,13 +1108,46 @@ 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");
 }
-const cssVarsV4Nodes = createCssVarNodes(nodes);
+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,
@@ -1772,6 +1968,21 @@ const DEFAULT_ROOT_SELECTORS$1 = [
 	".tw-root",
 	"wx-root-portal-content"
 ];
+const LEGACY_FLEXBOX_DECLARATION_PROPS = new Set([
+	"-webkit-align-content",
+	"-webkit-align-items",
+	"-webkit-align-self",
+	"-webkit-flex",
+	"-webkit-flex-basis",
+	"-webkit-flex-direction",
+	"-webkit-flex-flow",
+	"-webkit-flex-grow",
+	"-webkit-flex-shrink",
+	"-webkit-flex-wrap",
+	"-webkit-justify-content",
+	"-webkit-order"
+]);
+const LEGACY_FLEXBOX_DISPLAY_VALUES = new Set(["-webkit-flex", "-webkit-inline-flex"]);
 function normalizeRootSelectors(value) {
 	if (value === void 0 || value === false) return [];
 	return Array.isArray(value) ? value.filter(Boolean) : [value];
@@ -1785,6 +1996,13 @@ function createHostSelectorAppender(options) {
 		return DEFAULT_ROOT_SELECTORS$1.every((selector) => selectors.includes(selector));
 	};
 }
+function removeLegacyFlexboxPrefix(decl) {
+	if (decl.prop === "display" && LEGACY_FLEXBOX_DISPLAY_VALUES.has(decl.value)) {
+		decl.remove();
+		return;
+	}
+	if (LEGACY_FLEXBOX_DECLARATION_PROPS.has(decl.prop)) decl.remove();
+}
 const postcssWeappTailwindcssPostPlugin = (options) => {
 	const opts = (0, _weapp_tailwindcss_shared.defu)(options, { isMainChunk: true });
 	const p = { postcssPlugin };
@@ -1813,6 +2031,7 @@ const postcssWeappTailwindcssPostPlugin = (options) => {
 		if (opts.majorVersion === void 0) normalizeTailwindcssRpxDeclaration(decl);
 		else normalizeTailwindcssRpxDeclaration(decl, { majorVersion: opts.majorVersion });
 		if (enableMainChunkTransforms) normalizeTailwindcssV4Declaration(decl);
+		removeLegacyFlexboxPrefix(decl);
 	};
 	if (enableMainChunkTransforms) p.AtRuleExit = (atRule) => {
 		/**
@@ -2091,6 +2310,20 @@ function makePseudoVarRule() {
 	}));
 	return pseudoVarRule;
 }
+function isEmptyContentInitDeclaration(decl) {
+	return decl.prop === "--tw-content" && (decl.value === "\"\"" || decl.value === "''");
+}
+function removeTailwindV4EmptyContentInit(node) {
+	node.walkDecls((decl) => {
+		if (isEmptyContentInitDeclaration(decl)) decl.remove();
+	});
+}
+function hasClassSelector(node) {
+	return node.selectors.some((selector) => selector.includes("."));
+}
+function isRootThemeScopeRule(node) {
+	return node.selectors.length > 0 && node.selectors.every((selector) => selector === ":root" || selector === ":host" || DEFAULT_ROOT_SELECTORS.includes(selector));
+}
 function remakeCssVarSelector(selectors, options) {
 	const { cssPreflightRange, cssSelectorReplacement } = options;
 	if (cssPreflightRange === "all" && !selectors.includes(":not(not)")) selectors.push(":not(not)");
@@ -2112,6 +2345,7 @@ function resolveUniAppXVariableScopeSelectors(options) {
 function commonChunkPreflight(node, options) {
 	const { ctx, cssInjectPreflight, injectAdditionalCssVarScope } = options;
 	const uniAppXEnabled = isUniAppXEnabled(options);
+	const isTailwindcss4 = isTailwindcssV4(options);
 	const rootOption = options.cssSelectorReplacement?.root;
 	const rootSelectors = rootOption === false || rootOption === void 0 ? [] : Array.isArray(rootOption) ? rootOption.filter(Boolean) : [rootOption];
 	const hasHostSelector = node.selectors.some((selector) => selector.includes(":host"));
@@ -2121,31 +2355,33 @@ function commonChunkPreflight(node, options) {
 		phase: "pre",
 		reason: "append-host-selector"
 	});
+	if (isTailwindcss4 && !usesTailwindcssV4ContentVariable(node.root()) && (!hasClassSelector(node) || isRootThemeScopeRule(node))) removeTailwindV4EmptyContentInit(node);
 	if (testIfVariablesScope(node) || uniAppXEnabled && node.selectors.includes("*") && hasTwVars(node, 2)) {
 		ctx?.markVariablesScope(node);
 		assignRuleSelectors(node, uniAppXEnabled ? resolveUniAppXVariableScopeSelectors(options) : remakeCssVarSelector(node.selectors, options), {
 			phase: "pre",
 			reason: "rewrite-variable-scope"
 		});
-		if (!uniAppXEnabled) node.before(makePseudoVarRule());
+		if (!uniAppXEnabled && !isTailwindcss4) node.before(makePseudoVarRule());
 		if (typeof cssInjectPreflight === "function") node.append(...cssInjectPreflight());
 	}
-	const isTailwindcss4 = isTailwindcssV4(options);
 	if (injectAdditionalCssVarScope && (isTailwindcss4 ? testIfRootHostForV4(node) : testIfTwBackdrop(node))) {
+		const nodes = isTailwindcss4 ? createUsedCssVarsV4Nodes(collectUsedTailwindcssV4Variables(node.root())) : cssVarsV3Nodes;
+		if (nodes.length === 0) return;
 		const syntheticRule = new postcss.Rule({
 			selectors: uniAppXEnabled ? resolveUniAppXVariableScopeSelectors(options) : [
 				"*",
 				"::after",
 				"::before"
 			],
-			nodes: isTailwindcss4 ? cssVarsV4Nodes : cssVarsV3Nodes
+			nodes
 		});
 		if (!uniAppXEnabled) assignRuleSelectors(syntheticRule, remakeCssVarSelector(syntheticRule.selectors, options), {
 			phase: "pre",
 			reason: "rewrite-synthetic-variable-scope"
 		});
 		node.before(syntheticRule);
-		if (!uniAppXEnabled) node.before(makePseudoVarRule());
+		if (!uniAppXEnabled && !isTailwindcss4) node.before(makePseudoVarRule());
 		if (typeof cssInjectPreflight === "function") syntheticRule.append(...cssInjectPreflight());
 	}
 }
@@ -2253,7 +2489,7 @@ function shouldUseDefaultAutoprefixer(options, userPlugins) {
 	if (options.autoprefixer === false) return false;
 	if (hasUserAutoprefixerPlugin(options.postcssOptions?.plugins, userPlugins)) return false;
 	if (options.autoprefixer === true || typeof options.autoprefixer === "object") return true;
-	return options.majorVersion === 4;
+	return options.majorVersion === 3 || options.majorVersion === 4;
 }
 function createPreparedNodes(options, signal) {
 	const preparedNodes = [];
@@ -2480,19 +2716,31 @@ function createStyleHandler(options) {
 	const hasUserPlugins = Boolean(cachedOptions.postcssOptions?.plugins && (Array.isArray(cachedOptions.postcssOptions.plugins) ? cachedOptions.postcssOptions.plugins.length > 0 : typeof cachedOptions.postcssOptions.plugins === "object" && Object.keys(cachedOptions.postcssOptions.plugins).length > 0));
 	const handler = ((rawSource, opt) => {
 		const resolvedOptions = resolver.resolve(opt);
+		const protectedColorMix = resolvedOptions.majorVersion === 4 ? protectDynamicColorMixAlpha(rawSource) : void 0;
+		const source = protectedColorMix?.css ?? rawSource;
 		let signal;
 		if (!hasUserPlugins) try {
-			signal = probeFeatures(rawSource);
+			signal = probeFeatures(source);
 		} catch {
 			signal = void 0;
 		}
-		const cacheKey = `${getOptionsFingerprint(resolvedOptions)}|${signal ? signalToCacheKey(signal) : ""}|${simpleHash(rawSource)}`;
+		const cacheKey = `${getOptionsFingerprint(resolvedOptions)}|${signal ? signalToCacheKey(signal) : ""}|${simpleHash(source)}`;
 		const cachedResult = resultCache.get(cacheKey);
 		if (cachedResult) return Promise.resolve(cachedResult);
 		const processor = processorCache.getProcessor(resolvedOptions, signal);
 		const processOptions = processorCache.getProcessOptions(resolvedOptions);
-		return processor.process(rawSource, processOptions).async().then((result) => {
-			const finalResult = applyUniAppXUvueCompatibility(applyUniAppXBaseCompatibility(result, resolvedOptions), resolvedOptions);
+		return processor.process(source, processOptions).async().then((result) => {
+			let finalResult = applyUniAppXUvueCompatibility(applyUniAppXBaseCompatibility(result, resolvedOptions), resolvedOptions);
+			if (protectedColorMix) {
+				const restoredCss = protectedColorMix.restore(finalResult.css);
+				if (restoredCss !== finalResult.css) {
+					const nextResult = finalResult.root.clone().toResult(finalResult.opts);
+					nextResult.css = restoredCss;
+					nextResult.root = postcss.default.parse(restoredCss, finalResult.opts);
+					nextResult.messages.push(...finalResult.messages);
+					finalResult = nextResult;
+				}
+			}
 			resultCache.set(cacheKey, finalResult);
 			return finalResult;
 		});
@@ -2509,5 +2757,6 @@ exports.createInjectPreflight = createInjectPreflight;
 exports.createStyleHandler = createStyleHandler;
 exports.createStylePipeline = createStylePipeline;
 exports.internalCssSelectorReplacer = internalCssSelectorReplacer;
+exports.normalizeModernColorValue = normalizeModernColorValue;
 exports.postcssHtmlTransform = require_html_transform.postcssHtmlTransform;
 exports.protectDynamicColorMixAlpha = protectDynamicColorMixAlpha;

package/dist/index.mjs CHANGED Viewed

@@ -1,5 +1,8 @@
 import postcssHtmlTransform from "./html-transform.mjs";
 import "./types.mjs";
+import { color, serializeRGB } from "@csstools/css-color-parser";
+import { parseComponentValue } from "@csstools/css-parser-algorithms";
+import { tokenize } from "@csstools/css-tokenizer";
 import postcss, { Declaration, Rule } from "postcss";
 import valueParser from "postcss-value-parser";
 import { defu, defuOverrideArray, regExpTest } from "@weapp-tailwindcss/shared";
@@ -14,9 +17,19 @@ import postcssUnitConverter, { presets } from "postcss-rule-unit-converter";
 import { MappingChars2String, escape } from "@weapp-core/escape";
 //#region src/compat/color-mix.ts
 const COLOR_MIX_NAME = "color-mix";
-const PLACEHOLDER_PREFIX = "__weapp_tw_dynamic_color_mix_";
+const MODERN_COLOR_FUNCTION_NAMES = new Set([
+	"oklch",
+	"oklab",
+	"lch",
+	"lab"
+]);
+const PLACEHOLDER_PREFIX = "__weapp_tw_color_mix_";
 const DYNAMIC_ALPHA_RE = /\b(?:var|env)\(|--[\w-]+\b/;
 const INTERNAL_TAILWIND_ALPHA_RE = /var\(\s*--tw-[^)]+-alpha\s*\)/;
+const TRANSPARENT_COLOR_RE = /^transparent$/i;
+const CURRENT_COLOR_RE = /^currentcolor$/i;
+const CSS_WIDE_KEYWORD_RE = /^(?:inherit|initial|unset|revert|revert-layer)$/i;
+const CUSTOM_PROPERTY_RE = /^--[\w-]+$/;
 function splitArguments(nodes) {
 	const args = [];
 	let current = [];
@@ -47,15 +60,147 @@ function splitStopSegments(nodes) {
 	if (current.length > 0) segments.push(current);
 	return segments;
 }
-function hasDynamicStopAlpha(nodes) {
-	const segments = splitStopSegments(nodes);
-	if (segments.length < 2) return false;
-	const alpha = valueParser.stringify(segments[segments.length - 1]).trim();
-	if (INTERNAL_TAILWIND_ALPHA_RE.test(alpha)) return false;
-	return DYNAMIC_ALPHA_RE.test(alpha);
+function trimNodes$1(nodes) {
+	let start = 0;
+	let end = nodes.length;
+	while (start < end && nodes[start]?.type === "space") start += 1;
+	while (end > start && nodes[end - 1]?.type === "space") end -= 1;
+	return nodes.slice(start, end);
+}
+function getParsedColorData(colorSource) {
+	try {
+		return color(parseComponentValue(tokenize({ css: colorSource })));
+	} catch {
+		return false;
+	}
+}
+function parseAlphaValue(alphaSource) {
+	const parsed = Number.parseFloat(alphaSource);
+	if (Number.isFinite(parsed)) return alphaSource.trim().endsWith("%") ? parsed / 100 : parsed;
+}
+function resolveVarColor(colorSource, customPropertyValues, depth = 0) {
+	if (depth > 5) return;
+	const parsed = valueParser(colorSource.trim());
+	const node = parsed.nodes.length === 1 ? parsed.nodes[0] : void 0;
+	if (node?.type !== "function" || node.value.toLowerCase() !== "var") return;
+	const args = splitArguments(node.nodes);
+	const propertyName = valueParser.stringify(trimNodes$1(args[0] ?? [])).trim();
+	if (!CUSTOM_PROPERTY_RE.test(propertyName)) return;
+	const resolved = customPropertyValues.get(propertyName);
+	if (!resolved) {
+		const fallback = args[1] ? valueParser.stringify(trimNodes$1(args[1])).trim() : void 0;
+		return fallback ? resolveColorData(fallback, customPropertyValues, depth + 1) : void 0;
+	}
+	return resolveColorData(resolved, customPropertyValues, depth + 1);
+}
+function resolveColorData(colorSource, customPropertyValues, depth = 0) {
+	if (typeof colorSource !== "string") return;
+	const trimmed = colorSource.trim();
+	if (TRANSPARENT_COLOR_RE.test(trimmed)) return getParsedColorData(trimmed) || void 0;
+	if (CURRENT_COLOR_RE.test(trimmed) || CSS_WIDE_KEYWORD_RE.test(trimmed)) return;
+	const resolvedVar = resolveVarColor(trimmed, customPropertyValues, depth);
+	if (resolvedVar) return resolvedVar;
+	return getParsedColorData(trimmed) || void 0;
+}
+function normalizeColorFunctionName(colorSource, alpha, customPropertyValues) {
+	const resolvedColor = resolveColorData(colorSource, customPropertyValues);
+	if (!resolvedColor) return;
+	resolvedColor.alpha = alpha;
+	return serializeRGB(resolvedColor).toString();
+}
+function normalizeStandaloneColorFunction(colorSource) {
+	const resolvedColor = getParsedColorData(colorSource);
+	return resolvedColor ? serializeRGB(resolvedColor).toString() : void 0;
+}
+function isDisplayP3ColorFunction(colorSource) {
+	return /^color\(\s*display-p3\b/i.test(colorSource.trim());
+}
+function hasUnsupportedModernColorFunction(value) {
+	const parsed = valueParser(value);
+	let hasUnsupported = false;
+	parsed.walk((node) => {
+		if (node.type !== "function") return;
+		const name = node.value.toLowerCase();
+		if (name === COLOR_MIX_NAME || MODERN_COLOR_FUNCTION_NAMES.has(name) || name === "color" && isDisplayP3ColorFunction(valueParser.stringify(node))) {
+			hasUnsupported = true;
+			return false;
+		}
+	});
+	return hasUnsupported;
+}
+function normalizeModernColorValue(value, customPropertyValues = /* @__PURE__ */ new Map()) {
+	if (!hasUnsupportedModernColorFunction(value)) return {
+		value,
+		changed: false,
+		hasUnsupported: false
+	};
+	const parsed = valueParser(value);
+	let changed = false;
+	parsed.walk((node) => {
+		if (node.type !== "function") return;
+		const name = node.value.toLowerCase();
+		const source = valueParser.stringify(node);
+		let normalized;
+		if (MODERN_COLOR_FUNCTION_NAMES.has(name) || name === "color" && isDisplayP3ColorFunction(source)) normalized = normalizeStandaloneColorFunction(source);
+		else if (name === COLOR_MIX_NAME) normalized = tryResolveColorMix(node, customPropertyValues)?.value;
+		if (!normalized) return;
+		const mutableNode = node;
+		mutableNode.type = "word";
+		mutableNode.value = normalized;
+		delete mutableNode.nodes;
+		changed = true;
+	});
+	const nextValue = changed ? parsed.toString() : value;
+	return {
+		value: nextValue,
+		changed,
+		hasUnsupported: hasUnsupportedModernColorFunction(nextValue)
+	};
 }
-function shouldProtectColorMix(node) {
-	return splitArguments(node.nodes).slice(1).some(hasDynamicStopAlpha);
+function createRgbaWithAlpha(colorSource, alphaSource, customPropertyValues) {
+	const resolvedColor = resolveColorData(colorSource, customPropertyValues);
+	if (!resolvedColor) return;
+	const [red, green, blue] = resolvedColor.channels.map((channel) => Math.round(Math.min(1, Math.max(0, channel)) * 255));
+	const alpha = alphaSource.trim();
+	return `rgba(${red}, ${green}, ${blue}, ${CUSTOM_PROPERTY_RE.test(alpha) ? `var(${alpha})` : alpha})`;
+}
+function tryResolveColorMix(node, customPropertyValues) {
+	const args = splitArguments(node.nodes);
+	if (args.length < 3) return;
+	const colorStopNodes = splitStopSegments(args[1] ?? []);
+	if (colorStopNodes.length < 2) return;
+	const colorNodes = trimNodes$1(colorStopNodes[0] ?? []);
+	const alphaNodes = trimNodes$1(colorStopNodes[1] ?? []);
+	const trailingNodes = trimNodes$1(args[2] ?? []);
+	if (!colorNodes.length || !alphaNodes.length || valueParser.stringify(trailingNodes).trim().toLowerCase() !== "transparent") return;
+	const colorSource = valueParser.stringify(colorNodes).trim();
+	const alphaSource = valueParser.stringify(alphaNodes).trim();
+	if (!colorSource || !alphaSource || INTERNAL_TAILWIND_ALPHA_RE.test(alphaSource)) return;
+	if (CURRENT_COLOR_RE.test(colorSource)) return {
+		value: colorSource,
+		deferred: false
+	};
+	if (DYNAMIC_ALPHA_RE.test(alphaSource)) {
+		const normalized = createRgbaWithAlpha(colorSource, alphaSource, customPropertyValues);
+		return normalized ? {
+			value: normalized,
+			deferred: true
+		} : {
+			value: colorSource,
+			deferred: true
+		};
+	}
+	const alpha = parseAlphaValue(alphaSource);
+	if (alpha === void 0) return;
+	const normalized = normalizeColorFunctionName(colorSource, alpha, customPropertyValues);
+	if (normalized) return {
+		value: normalized,
+		deferred: false
+	};
+	return {
+		value: colorSource,
+		deferred: false
+	};
 }
 function createPlaceholder(index) {
 	return `${PLACEHOLDER_PREFIX}${index}__`;
@@ -66,40 +211,54 @@ function unwrapProtectedSupports(cssRoot) {
 		atRule.replaceWith(atRule.nodes);
 	});
 }
-function protectDynamicColorMixAlpha(css) {
+function protectDynamicColorMixAlpha(css, options = {}) {
 	if (!css.includes(COLOR_MIX_NAME)) return {
 		css,
 		restore: (value) => value
 	};
 	const replacements = /* @__PURE__ */ new Map();
 	const root = postcss.parse(css);
+	const customPropertyValues = new Map(options.customPropertyValues);
+	let changed = false;
+	root.walkDecls((decl) => {
+		if (decl.prop.startsWith("--") && !decl.value.includes(COLOR_MIX_NAME)) customPropertyValues.set(decl.prop, decl.value.trim());
+	});
 	root.walkDecls((decl) => {
 		if (!decl.value.includes(COLOR_MIX_NAME)) return;
 		const parsed = valueParser(decl.value);
 		let mutated = false;
 		parsed.walk((node) => {
 			if (node.type !== "function" || node.value.toLowerCase() !== COLOR_MIX_NAME) return;
-			if (!shouldProtectColorMix(node)) return;
-			const placeholder = createPlaceholder(replacements.size);
-			replacements.set(placeholder, valueParser.stringify(node));
-			const mutableNode = node;
-			mutableNode.type = "word";
-			mutableNode.value = placeholder;
-			delete mutableNode.nodes;
-			mutated = true;
+			const resolved = tryResolveColorMix(node, customPropertyValues);
+			if (resolved) {
+				if (resolved.deferred) {
+					const placeholder = createPlaceholder(replacements.size);
+					replacements.set(placeholder, resolved.value);
+					const mutableNode = node;
+					mutableNode.type = "word";
+					mutableNode.value = placeholder;
+					delete mutableNode.nodes;
+					mutated = true;
+					return;
+				}
+				const mutableNode = node;
+				mutableNode.type = "word";
+				mutableNode.value = resolved.value;
+				delete mutableNode.nodes;
+				mutated = true;
+			}
 		});
-		if (mutated) decl.value = parsed.toString();
+		if (mutated) {
+			decl.value = parsed.toString();
+			changed = true;
+		}
 	});
-	if (replacements.size === 0) return {
-		css,
-		restore: (value) => value
-	};
-	unwrapProtectedSupports(root);
+	if (replacements.size > 0) unwrapProtectedSupports(root);
 	return {
-		css: root.toString(),
+		css: changed ? root.toString() : css,
 		restore(value) {
 			let restored = value;
-			for (const [placeholder, original] of replacements) restored = restored.split(placeholder).join(original);
+			for (const [placeholder, replacement] of replacements) restored = restored.split(placeholder).join(replacement);
 			return restored;
 		}
 	};
@@ -131,7 +290,7 @@ function isBaseCarrierSelector(selector) {
 function isBaseCarrierRule(rule) {
 	return Array.isArray(rule.selectors) && rule.selectors.length > 0 && rule.selectors.every(isBaseCarrierSelector);
 }
-function hasClassSelector(rule) {
+function hasClassSelector$1(rule) {
 	return Array.isArray(rule.selectors) && rule.selectors.some((selector) => CLASS_SELECTOR_RE.test(selector));
 }
 function collectRequiredTwVars(value) {
@@ -161,7 +320,7 @@ function extractUniAppXBaseDefaults(result) {
 function injectUniAppXBaseDefaults(result, defaults) {
 	if (defaults.size === 0) return;
 	result.root.walkRules((rule) => {
-		if (!hasClassSelector(rule)) return;
+		if (!hasClassSelector$1(rule)) return;
 		const declaredProps = /* @__PURE__ */ new Set();
 		const requiredProps = /* @__PURE__ */ new Set();
 		rule.walkDecls((decl) => {
@@ -522,6 +681,7 @@ const WEAPP_AUTOPREFIXER_BROWSERS = [
 	"Android >= 4.4",
 	"ChromeAndroid >= 37"
 ];
+const WEAPP_AUTOPREFIXER_DEFAULT_OPTIONS = { flexbox: false };
 const AUTOPREFIXER_PLUGIN_NAME = "autoprefixer";
 function isAutoprefixerPlugin(plugin) {
 	return plugin?.postcssPlugin === AUTOPREFIXER_PLUGIN_NAME;
@@ -530,6 +690,7 @@ function resolveAutoprefixerPlugin(option) {
 	if (option === false) return;
 	const userOptions = option === true || option === void 0 ? {} : option;
 	return autoprefixerPlugin({
+		...WEAPP_AUTOPREFIXER_DEFAULT_OPTIONS,
 		...userOptions,
 		overrideBrowserslist: userOptions.overrideBrowserslist ?? WEAPP_AUTOPREFIXER_BROWSERS
 	});
@@ -811,6 +972,8 @@ const nodes = [
 	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"),
@@ -935,13 +1098,46 @@ 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");
 }
-const cssVarsV4Nodes = createCssVarNodes(nodes);
+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 Declaration({
+		prop: def.prop,
+		value: def.value
+	}));
+}
 function isTailwindcssV4ModernCheck(atRule) {
 	return atRule.name === "supports" && [
 		MODERN_CHECK_WEBKIT_HYPHENS_RE,
@@ -1762,6 +1958,21 @@ const DEFAULT_ROOT_SELECTORS$1 = [
 	".tw-root",
 	"wx-root-portal-content"
 ];
+const LEGACY_FLEXBOX_DECLARATION_PROPS = new Set([
+	"-webkit-align-content",
+	"-webkit-align-items",
+	"-webkit-align-self",
+	"-webkit-flex",
+	"-webkit-flex-basis",
+	"-webkit-flex-direction",
+	"-webkit-flex-flow",
+	"-webkit-flex-grow",
+	"-webkit-flex-shrink",
+	"-webkit-flex-wrap",
+	"-webkit-justify-content",
+	"-webkit-order"
+]);
+const LEGACY_FLEXBOX_DISPLAY_VALUES = new Set(["-webkit-flex", "-webkit-inline-flex"]);
 function normalizeRootSelectors(value) {
 	if (value === void 0 || value === false) return [];
 	return Array.isArray(value) ? value.filter(Boolean) : [value];
@@ -1775,6 +1986,13 @@ function createHostSelectorAppender(options) {
 		return DEFAULT_ROOT_SELECTORS$1.every((selector) => selectors.includes(selector));
 	};
 }
+function removeLegacyFlexboxPrefix(decl) {
+	if (decl.prop === "display" && LEGACY_FLEXBOX_DISPLAY_VALUES.has(decl.value)) {
+		decl.remove();
+		return;
+	}
+	if (LEGACY_FLEXBOX_DECLARATION_PROPS.has(decl.prop)) decl.remove();
+}
 const postcssWeappTailwindcssPostPlugin = (options) => {
 	const opts = defu(options, { isMainChunk: true });
 	const p = { postcssPlugin };
@@ -1803,6 +2021,7 @@ const postcssWeappTailwindcssPostPlugin = (options) => {
 		if (opts.majorVersion === void 0) normalizeTailwindcssRpxDeclaration(decl);
 		else normalizeTailwindcssRpxDeclaration(decl, { majorVersion: opts.majorVersion });
 		if (enableMainChunkTransforms) normalizeTailwindcssV4Declaration(decl);
+		removeLegacyFlexboxPrefix(decl);
 	};
 	if (enableMainChunkTransforms) p.AtRuleExit = (atRule) => {
 		/**
@@ -2081,6 +2300,20 @@ function makePseudoVarRule() {
 	}));
 	return pseudoVarRule;
 }
+function isEmptyContentInitDeclaration(decl) {
+	return decl.prop === "--tw-content" && (decl.value === "\"\"" || decl.value === "''");
+}
+function removeTailwindV4EmptyContentInit(node) {
+	node.walkDecls((decl) => {
+		if (isEmptyContentInitDeclaration(decl)) decl.remove();
+	});
+}
+function hasClassSelector(node) {
+	return node.selectors.some((selector) => selector.includes("."));
+}
+function isRootThemeScopeRule(node) {
+	return node.selectors.length > 0 && node.selectors.every((selector) => selector === ":root" || selector === ":host" || DEFAULT_ROOT_SELECTORS.includes(selector));
+}
 function remakeCssVarSelector(selectors, options) {
 	const { cssPreflightRange, cssSelectorReplacement } = options;
 	if (cssPreflightRange === "all" && !selectors.includes(":not(not)")) selectors.push(":not(not)");
@@ -2102,6 +2335,7 @@ function resolveUniAppXVariableScopeSelectors(options) {
 function commonChunkPreflight(node, options) {
 	const { ctx, cssInjectPreflight, injectAdditionalCssVarScope } = options;
 	const uniAppXEnabled = isUniAppXEnabled(options);
+	const isTailwindcss4 = isTailwindcssV4(options);
 	const rootOption = options.cssSelectorReplacement?.root;
 	const rootSelectors = rootOption === false || rootOption === void 0 ? [] : Array.isArray(rootOption) ? rootOption.filter(Boolean) : [rootOption];
 	const hasHostSelector = node.selectors.some((selector) => selector.includes(":host"));
@@ -2111,31 +2345,33 @@ function commonChunkPreflight(node, options) {
 		phase: "pre",
 		reason: "append-host-selector"
 	});
+	if (isTailwindcss4 && !usesTailwindcssV4ContentVariable(node.root()) && (!hasClassSelector(node) || isRootThemeScopeRule(node))) removeTailwindV4EmptyContentInit(node);
 	if (testIfVariablesScope(node) || uniAppXEnabled && node.selectors.includes("*") && hasTwVars(node, 2)) {
 		ctx?.markVariablesScope(node);
 		assignRuleSelectors(node, uniAppXEnabled ? resolveUniAppXVariableScopeSelectors(options) : remakeCssVarSelector(node.selectors, options), {
 			phase: "pre",
 			reason: "rewrite-variable-scope"
 		});
-		if (!uniAppXEnabled) node.before(makePseudoVarRule());
+		if (!uniAppXEnabled && !isTailwindcss4) node.before(makePseudoVarRule());
 		if (typeof cssInjectPreflight === "function") node.append(...cssInjectPreflight());
 	}
-	const isTailwindcss4 = isTailwindcssV4(options);
 	if (injectAdditionalCssVarScope && (isTailwindcss4 ? testIfRootHostForV4(node) : testIfTwBackdrop(node))) {
+		const nodes = isTailwindcss4 ? createUsedCssVarsV4Nodes(collectUsedTailwindcssV4Variables(node.root())) : cssVarsV3Nodes;
+		if (nodes.length === 0) return;
 		const syntheticRule = new Rule({
 			selectors: uniAppXEnabled ? resolveUniAppXVariableScopeSelectors(options) : [
 				"*",
 				"::after",
 				"::before"
 			],
-			nodes: isTailwindcss4 ? cssVarsV4Nodes : cssVarsV3Nodes
+			nodes
 		});
 		if (!uniAppXEnabled) assignRuleSelectors(syntheticRule, remakeCssVarSelector(syntheticRule.selectors, options), {
 			phase: "pre",
 			reason: "rewrite-synthetic-variable-scope"
 		});
 		node.before(syntheticRule);
-		if (!uniAppXEnabled) node.before(makePseudoVarRule());
+		if (!uniAppXEnabled && !isTailwindcss4) node.before(makePseudoVarRule());
 		if (typeof cssInjectPreflight === "function") syntheticRule.append(...cssInjectPreflight());
 	}
 }
@@ -2243,7 +2479,7 @@ function shouldUseDefaultAutoprefixer(options, userPlugins) {
 	if (options.autoprefixer === false) return false;
 	if (hasUserAutoprefixerPlugin(options.postcssOptions?.plugins, userPlugins)) return false;
 	if (options.autoprefixer === true || typeof options.autoprefixer === "object") return true;
-	return options.majorVersion === 4;
+	return options.majorVersion === 3 || options.majorVersion === 4;
 }
 function createPreparedNodes(options, signal) {
 	const preparedNodes = [];
@@ -2470,19 +2706,31 @@ function createStyleHandler(options) {
 	const hasUserPlugins = Boolean(cachedOptions.postcssOptions?.plugins && (Array.isArray(cachedOptions.postcssOptions.plugins) ? cachedOptions.postcssOptions.plugins.length > 0 : typeof cachedOptions.postcssOptions.plugins === "object" && Object.keys(cachedOptions.postcssOptions.plugins).length > 0));
 	const handler = ((rawSource, opt) => {
 		const resolvedOptions = resolver.resolve(opt);
+		const protectedColorMix = resolvedOptions.majorVersion === 4 ? protectDynamicColorMixAlpha(rawSource) : void 0;
+		const source = protectedColorMix?.css ?? rawSource;
 		let signal;
 		if (!hasUserPlugins) try {
-			signal = probeFeatures(rawSource);
+			signal = probeFeatures(source);
 		} catch {
 			signal = void 0;
 		}
-		const cacheKey = `${getOptionsFingerprint(resolvedOptions)}|${signal ? signalToCacheKey(signal) : ""}|${simpleHash(rawSource)}`;
+		const cacheKey = `${getOptionsFingerprint(resolvedOptions)}|${signal ? signalToCacheKey(signal) : ""}|${simpleHash(source)}`;
 		const cachedResult = resultCache.get(cacheKey);
 		if (cachedResult) return Promise.resolve(cachedResult);
 		const processor = processorCache.getProcessor(resolvedOptions, signal);
 		const processOptions = processorCache.getProcessOptions(resolvedOptions);
-		return processor.process(rawSource, processOptions).async().then((result) => {
-			const finalResult = applyUniAppXUvueCompatibility(applyUniAppXBaseCompatibility(result, resolvedOptions), resolvedOptions);
+		return processor.process(source, processOptions).async().then((result) => {
+			let finalResult = applyUniAppXUvueCompatibility(applyUniAppXBaseCompatibility(result, resolvedOptions), resolvedOptions);
+			if (protectedColorMix) {
+				const restoredCss = protectedColorMix.restore(finalResult.css);
+				if (restoredCss !== finalResult.css) {
+					const nextResult = finalResult.root.clone().toResult(finalResult.opts);
+					nextResult.css = restoredCss;
+					nextResult.root = postcss.parse(restoredCss, finalResult.opts);
+					nextResult.messages.push(...finalResult.messages);
+					finalResult = nextResult;
+				}
+			}
 			resultCache.set(cacheKey, finalResult);
 			return finalResult;
 		});
@@ -2494,4 +2742,4 @@ function createStyleHandler(options) {
 	return handler;
 }
 //#endregion
-export { createFallbackPlaceholderReplacer, createInjectPreflight, createStyleHandler, createStylePipeline, internalCssSelectorReplacer, postcssHtmlTransform, protectDynamicColorMixAlpha };
+export { createFallbackPlaceholderReplacer, createInjectPreflight, createStyleHandler, createStylePipeline, internalCssSelectorReplacer, normalizeModernColorValue, postcssHtmlTransform, protectDynamicColorMixAlpha };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@weapp-tailwindcss/postcss",
-  "version": "2.2.1-next.2",
+  "version": "2.2.1-next.4",
   "description": "@weapp-tailwindcss/postcss",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",
@@ -56,11 +56,14 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "dependencies": {
+    "@csstools/css-color-parser": "^4.1.1",
+    "@csstools/css-parser-algorithms": "^4.0.0",
+    "@csstools/css-tokenizer": "^4.0.0",
     "@weapp-core/escape": "~7.0.0",
     "@weapp-tailwindcss/postcss-calc": "^1.0.0",
     "autoprefixer": "^10.5.0",
     "lru-cache": "10.4.3",
-    "postcss": "^8.5.14",
+    "postcss": "^8.5.15",
     "postcss-preset-env": "^10.6.1",
     "postcss-pxtrans": "^1.0.4",
     "postcss-rem-to-responsive-pixel": "^7.0.4",