@weapp-tailwindcss/postcss 2.2.1-next.1 → 2.2.1-next.3

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

@@ -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

@@ -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

@@ -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

@@ -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) => {
@@ -821,6 +980,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 +1106,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,
@@ -2091,6 +2285,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 +2320,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 +2330,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());
 	}
 }
@@ -2480,19 +2691,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 +2732,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

@@ -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) => {
@@ -811,6 +970,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 +1096,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,
@@ -2081,6 +2275,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 +2310,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 +2320,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());
 	}
 }
@@ -2470,19 +2681,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 +2717,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/dist/types.d.ts

@@ -23,13 +23,13 @@ export type RequiredStyleHandlerOptions = {
     /**
      * @description 默认为 true，此时会对样式主文件，进行猜测
      */
-    isMainChunk?: boolean;
-    cssPreflight?: CssPreflightOptions;
-    cssInjectPreflight?: InjectPreflight;
-    escapeMap?: Record<string, string>;
+    isMainChunk?: boolean | undefined;
+    cssPreflight?: CssPreflightOptions | undefined;
+    cssInjectPreflight?: InjectPreflight | undefined;
+    escapeMap?: Record<string, string> | undefined;
 } & Pick<UserDefinedPostcssOptions, 'cssPreflightRange' | 'cssChildCombinatorReplaceValue' | 'injectAdditionalCssVarScope' | 'cssSelectorReplacement' | 'rem2rpx' | 'px2rpx' | 'unitsToPx'>;
 export interface InternalCssSelectorReplacerOptions {
-    escapeMap?: Record<string, string>;
+    escapeMap?: Record<string, string> | undefined;
 }
 interface CssCalcOptions extends PostCssCalcOptions {
     includeCustomProperties?: (string | RegExp)[];
@@ -41,43 +41,43 @@ export interface UnitsToPxOptions extends Pick<UnitConverterOptions, 'disabled'
     transform?: GlobalUnitTransform | false;
 }
 export type IStyleHandlerOptions = {
-    ctx?: PostcssContext;
-    postcssOptions?: LoadedPostcssOptions;
-    cssRemoveProperty?: boolean;
-    cssRemoveHoverPseudoClass?: boolean;
-    cssPresetEnv?: PresetEnvOptions;
-    autoprefixer?: WeappAutoprefixerOptions;
-    cssCalc?: boolean | CssCalcOptions | (string | RegExp)[];
+    ctx?: PostcssContext | undefined;
+    postcssOptions?: LoadedPostcssOptions | undefined;
+    cssRemoveProperty?: boolean | undefined;
+    cssRemoveHoverPseudoClass?: boolean | undefined;
+    cssPresetEnv?: PresetEnvOptions | undefined;
+    autoprefixer?: WeappAutoprefixerOptions | undefined;
+    cssCalc?: boolean | CssCalcOptions | (string | RegExp)[] | undefined;
     atRules?: {
-        property?: boolean;
-        supports?: boolean;
-        media?: boolean;
-    };
-    uniAppX?: boolean;
-    uniAppXCssTarget?: UniAppXCssTarget;
-    uniAppXUnsupported?: UniAppXUnsupportedMode;
-    majorVersion?: number;
+        property?: boolean | undefined;
+        supports?: boolean | undefined;
+        media?: boolean | undefined;
+    } | undefined;
+    uniAppX?: boolean | undefined;
+    uniAppXCssTarget?: UniAppXCssTarget | undefined;
+    uniAppXUnsupported?: UniAppXUnsupportedMode | undefined;
+    majorVersion?: number | undefined;
 } & RequiredStyleHandlerOptions;
 export interface UserDefinedPostcssOptions {
-    cssPreflight?: CssPreflightOptions;
-    cssPreflightRange?: 'all';
-    cssChildCombinatorReplaceValue?: string | string[];
-    cssPresetEnv?: PresetEnvOptions;
-    autoprefixer?: WeappAutoprefixerOptions;
-    injectAdditionalCssVarScope?: boolean;
+    cssPreflight?: CssPreflightOptions | undefined;
+    cssPreflightRange?: 'all' | undefined;
+    cssChildCombinatorReplaceValue?: string | string[] | undefined;
+    cssPresetEnv?: PresetEnvOptions | undefined;
+    autoprefixer?: WeappAutoprefixerOptions | undefined;
+    injectAdditionalCssVarScope?: boolean | undefined;
     cssSelectorReplacement?: {
-        root?: string | string[] | false;
-        universal?: string | string[] | false;
-    };
-    rem2rpx?: boolean | Rem2rpxOptions;
-    px2rpx?: boolean | Px2rpxOptions;
-    unitsToPx?: boolean | UnitsToPxOptions;
-    postcssOptions?: LoadedPostcssOptions;
-    cssRemoveHoverPseudoClass?: boolean;
-    cssRemoveProperty?: boolean;
-    uniAppX?: boolean;
-    uniAppXCssTarget?: UniAppXCssTarget;
-    uniAppXUnsupported?: UniAppXUnsupportedMode;
+        root?: string | string[] | false | undefined;
+        universal?: string | string[] | false | undefined;
+    } | undefined;
+    rem2rpx?: boolean | Rem2rpxOptions | undefined;
+    px2rpx?: boolean | Px2rpxOptions | undefined;
+    unitsToPx?: boolean | UnitsToPxOptions | undefined;
+    postcssOptions?: LoadedPostcssOptions | undefined;
+    cssRemoveHoverPseudoClass?: boolean | undefined;
+    cssRemoveProperty?: boolean | undefined;
+    uniAppX?: boolean | undefined;
+    uniAppXCssTarget?: UniAppXCssTarget | undefined;
+    uniAppXUnsupported?: UniAppXUnsupportedMode | undefined;
 }
 export type { CssCalcOptions, PresetEnvOptions, Px2rpxOptions, Rem2rpxOptions, WeappAutoprefixerOptions, };
 export interface StyleHandler {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weapp-tailwindcss/postcss",
-  "version": "2.2.1-next.1",
+  "version": "2.2.1-next.3",
   "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",