@weapp-tailwindcss/react-native 0.2.18 → 0.2.19

package/dist/babel.d.ts

@@ -1,5 +1,5 @@
-import { PluginObject, PluginPass } from "@babel/core";
 import * as t from "@babel/types";
+import { PluginObject, PluginPass } from "@babel/core";
 //#region src/babel.d.ts
 export interface WeappReactNativeBabelOptions {
   classNameSet?: Iterable<string> | undefined;

package/dist/compiler.cjs

@@ -1,343 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_rolldown_runtime = require("./rolldown-runtime-VH7oDXx4.cjs");
 let node_crypto = require("node:crypto");
-let postcss = require("postcss");
-postcss = require_rolldown_runtime.__toESM(postcss, 1);
+let _weapp_tailwindcss_postcss_native = require("@weapp-tailwindcss/postcss/native");
 //#region src/compiler.ts
-const CLASS_SELECTOR_RE = /\.((?:\\.|[^\s.#:[>+~])+)/g;
-const COLOR_PROPERTIES = /* @__PURE__ */ new Set([
-	"color",
-	"backgroundColor",
-	"borderColor",
-	"borderTopColor",
-	"borderRightColor",
-	"borderBottomColor",
-	"borderLeftColor",
-	"shadowColor",
-	"textDecorationColor"
-]);
-const NUMERIC_PROPERTIES = /* @__PURE__ */ new Set([
-	"aspectRatio",
-	"borderBottomWidth",
-	"borderLeftWidth",
-	"borderRadius",
-	"borderRightWidth",
-	"borderTopLeftRadius",
-	"borderTopRightRadius",
-	"borderTopWidth",
-	"borderWidth",
-	"bottom",
-	"elevation",
-	"flex",
-	"flexBasis",
-	"flexGrow",
-	"flexShrink",
-	"fontSize",
-	"gap",
-	"height",
-	"left",
-	"letterSpacing",
-	"lineHeight",
-	"margin",
-	"marginBottom",
-	"marginHorizontal",
-	"marginLeft",
-	"marginRight",
-	"marginTop",
-	"marginVertical",
-	"maxHeight",
-	"maxWidth",
-	"minHeight",
-	"minWidth",
-	"opacity",
-	"padding",
-	"paddingBottom",
-	"paddingHorizontal",
-	"paddingLeft",
-	"paddingRight",
-	"paddingTop",
-	"paddingVertical",
-	"right",
-	"top",
-	"width",
-	"zIndex"
-]);
-const STRING_PROPERTIES = /* @__PURE__ */ new Set([
-	"alignContent",
-	"alignItems",
-	"alignSelf",
-	"borderStyle",
-	"direction",
-	"display",
-	"flexDirection",
-	"flexWrap",
-	"fontFamily",
-	"fontStyle",
-	"fontWeight",
-	"justifyContent",
-	"overflow",
-	"position",
-	"textAlign",
-	"textDecorationLine",
-	"textDecorationStyle",
-	"textTransform",
-	"writingDirection"
-]);
-const SHORTHANDS = {
-	margin: [
-		"marginTop",
-		"marginRight",
-		"marginBottom",
-		"marginLeft"
-	],
-	padding: [
-		"paddingTop",
-		"paddingRight",
-		"paddingBottom",
-		"paddingLeft"
-	]
-};
-const UNSUPPORTED_PROPERTIES = /* @__PURE__ */ new Set([
-	"filter",
-	"backdropFilter",
-	"animation",
-	"transition",
-	"textShadow",
-	"backgroundImage",
-	"appearance",
-	"content",
-	"cursor",
-	"userSelect",
-	"whiteSpace",
-	"objectFit",
-	"listStyleType",
-	"outline"
-]);
-function decodeCssIdentifier(value) {
-	return value.replace(/\\([0-9a-f]{1,6})\s?/gi, (_, code) => String.fromCodePoint(Number.parseInt(code, 16))).replace(/\\(.)/g, "$1");
-}
-function splitClassName(className) {
-	const parts = [];
-	let current = "";
-	let bracketDepth = 0;
-	let escaped = false;
-	for (const character of className) {
-		if (escaped) {
-			current += character;
-			escaped = false;
-			continue;
-		}
-		if (character === "\\") {
-			current += character;
-			escaped = true;
-			continue;
-		}
-		if (character === "[") bracketDepth += 1;
-		if (character === "]") bracketDepth = Math.max(0, bracketDepth - 1);
-		if (character === ":" && bracketDepth === 0) {
-			parts.push(current);
-			current = "";
-			continue;
-		}
-		current += character;
-	}
-	parts.push(current);
-	return parts;
-}
-function baseClassName(className) {
-	return splitClassName(className).at(-1);
-}
-function unsupportedVariant(className) {
-	return splitClassName(className).slice(0, -1).find((variant) => ![
-		"dark",
-		"ios",
-		"android",
-		"native"
-	].includes(variant));
-}
-function propertyName(property) {
-	return {
-		"padding-inline": "paddingHorizontal",
-		"padding-inline-start": "paddingLeft",
-		"padding-inline-end": "paddingRight",
-		"padding-block": "paddingVertical",
-		"padding-block-start": "paddingTop",
-		"padding-block-end": "paddingBottom",
-		"margin-inline": "marginHorizontal",
-		"margin-inline-start": "marginLeft",
-		"margin-inline-end": "marginRight",
-		"margin-block": "marginVertical",
-		"margin-block-start": "marginTop",
-		"margin-block-end": "marginBottom"
-	}[property] ?? property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-}
-function splitValue(value) {
-	return value.trim().split(/\s+/).filter(Boolean);
-}
-function parseNumber(value, variables) {
-	const resolved = resolveVariables(value, variables);
-	const fraction = resolved.match(/^(-?(?:\d+\.\d+|\d+|\.\d+))\s*\/\s*(-?(?:\d+\.\d+|\d+|\.\d+))$/);
-	if (fraction && Number(fraction[2]) !== 0) return Number(fraction[1]) / Number(fraction[2]);
-	const calculated = resolved.match(/^calc\(\s*(-?(?:\d+\.\d+|\d+|\.\d+))(px|rem|em|%)?\s*\*\s*(-?(?:\d+\.\d+|\d+|\.\d+))\s*\)$/);
-	if (calculated) {
-		const base = parseNumber(`${calculated[1]}${calculated[2] ?? ""}`, variables);
-		return typeof base === "number" ? base * Number(calculated[3]) : void 0;
-	}
-	const match = resolved.match(/^(-?(?:\d+\.\d+|\d+|\.\d+))(px|rem|em|%)?$/);
-	if (!match) return;
-	const number = Number(match[1]);
-	if (match[2] === "%") return `${number}%`;
-	if (match[2] === "rem" || match[2] === "em") return number * 16;
-	return number;
-}
-function resolveVariables(value, variables) {
-	return value.replace(/var\((--[\w-]+)(?:,\s*([^)]*))?\)/g, (_, key, fallback) => variables[key] ?? fallback ?? `var(${key})`);
-}
-function isColor(value) {
-	return /^(?:#[\da-f]{3,8}|(?:rgb|rgba|hsl|hsla|oklch|oklab)\([^)]*\)|[a-z]+)$/i.test(value);
-}
-function oklchToHex(value) {
-	const match = value.match(/^oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s*([\d.]+))?\s*\)$/i);
-	if (!match) return;
-	const lightness = Number(match[1]) > 1 ? Number(match[1]) / 100 : Number(match[1]);
-	const chroma = Number(match[2]);
-	const hue = Number(match[3]) * Math.PI / 180;
-	const alpha = match[4] === void 0 ? 1 : Number(match[4]);
-	const a = chroma * Math.cos(hue);
-	const b = chroma * Math.sin(hue);
-	const l = lightness + .3963377774 * a + .2158037573 * b;
-	const m = lightness - .1055613458 * a - .0638541728 * b;
-	const s = lightness - .0894841775 * a - 1.291485548 * b;
-	const linear = (channel) => channel ** 3;
-	const red = 4.0767416621 * linear(l) - 3.3077115913 * linear(m) + .2309699292 * linear(s);
-	const green = -1.2684380046 * linear(l) + 2.6097574011 * linear(m) - .3413193965 * linear(s);
-	const blue = -.0041960863 * linear(l) - .7034186147 * linear(m) + 1.707614701 * linear(s);
-	const toByte = (channel) => Math.round(Math.max(0, Math.min(1, channel <= .0031308 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - .055)) * 255);
-	const hex = [
-		red,
-		green,
-		blue
-	].map((channel) => toByte(channel).toString(16).padStart(2, "0")).join("");
-	return alpha < 1 ? `#${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}` : `#${hex}`;
-}
-function normalizeColor(value) {
-	return /^oklch\(/i.test(value) ? oklchToHex(value) : value;
-}
-function parseTransform(value, variables) {
-	const transform = [];
-	for (const match of value.matchAll(/(translateX|translateY|translate|scaleX|scaleY|scale|rotate|skewX|skewY)\(([^)]*)\)/g)) {
-		const name = match[1];
-		const values = splitValue(resolveVariables(match[2] ?? "", variables).replace(",", " "));
-		if (!name || !values.length) continue;
-		if (name.startsWith("scale")) {
-			const number = Number(values[0] ?? "");
-			if (Number.isFinite(number)) transform.push({ [name]: number });
-			continue;
-		}
-		if (name === "translate") {
-			const x = parseNumber(values[0] ?? "", variables);
-			const y = parseNumber(values[1] ?? "0", variables);
-			if (x !== void 0 && y !== void 0) transform.push({ translateX: x }, { translateY: y });
-			continue;
-		}
-		const property = name.replace(/^translate$/, "translateX");
-		const parsed = name.startsWith("rotate") || name.startsWith("skew") ? values[0] : parseNumber(values[0] ?? "", variables);
-		if (parsed !== void 0) transform.push({ [property]: parsed });
-	}
-	return transform.length ? transform : void 0;
-}
-function parseShadow(value, variables) {
-	const resolved = resolveVariables(value, variables);
-	const color = resolved.match(/(?:rgba?|hsla?)\([^)]*\)|#[\da-f]{3,8}/i)?.[0];
-	const parts = splitValue(color ? resolved.replace(color, "") : resolved);
-	const lengths = parts.filter((part) => parseNumber(part, variables) !== void 0).slice(0, 3);
-	if (lengths.length < 2) return;
-	const [x = "0", y = "0", blur = "0"] = lengths;
-	const shadowColor = normalizeColor(color ?? parts.find((part) => isColor(part)) ?? "#000000") ?? "#000000";
-	const opacity = /rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)/i.exec(shadowColor)?.[1];
-	return {
-		shadowOffset: {
-			width: parseNumber(x, variables),
-			height: parseNumber(y, variables)
-		},
-		shadowRadius: parseNumber(blur, variables),
-		shadowColor,
-		...opacity ? { shadowOpacity: Number(opacity) } : {}
-	};
-}
-function parseValue(property, value, variables) {
-	const trimmed = value.trim();
-	if (UNSUPPORTED_PROPERTIES.has(property)) return;
-	if (trimmed.includes("linear-gradient(") || trimmed.includes("url(")) return;
-	if (COLOR_PROPERTIES.has(property)) {
-		const color = resolveVariables(trimmed, variables);
-		return isColor(color) ? normalizeColor(color) : void 0;
-	}
-	if (NUMERIC_PROPERTIES.has(property)) {
-		const number = parseNumber(trimmed, variables);
-		if (property === "opacity" && typeof number === "string" && number.endsWith("%")) return Number.parseFloat(number) / 100;
-		return number;
-	}
-	if (property === "transform") return parseTransform(trimmed, variables);
-	if (property === "boxShadow") return parseShadow(trimmed, variables);
-	if (property === "display" && !["flex", "none"].includes(trimmed)) return;
-	return STRING_PROPERTIES.has(property) ? trimmed : void 0;
-}
-function expandDeclaration(property, value, variables) {
-	if (property === "margin" || property === "padding") {
-		const parts = splitValue(value).map((item) => parseNumber(item, variables));
-		if (parts.includes(void 0)) return;
-		const [top, right = top, bottom = top, left = right] = parts;
-		return Object.fromEntries(SHORTHANDS[property].map((key, index) => [key, [
-			top,
-			right,
-			bottom,
-			left
-		][index]]));
-	}
-	if (property === "border") {
-		const width = splitValue(value).find((item) => /^\d/.test(item));
-		const color = splitValue(value).find((item) => isColor(item));
-		return {
-			...width ? { borderWidth: parseNumber(width, variables) } : {},
-			...color ? { borderColor: color } : {}
-		};
-	}
-	if (property === "boxShadow") return parseShadow(value, variables);
-	const parsed = parseValue(property, value, variables);
-	return parsed === void 0 ? void 0 : { [property]: parsed };
-}
-function walkClasses(selector) {
-	const classes = [];
-	for (const match of selector.matchAll(CLASS_SELECTOR_RE)) {
-		const token = decodeCssIdentifier(match[1]);
-		if (token && !classes.includes(token)) classes.push(token);
-	}
-	return classes;
-}
-function variantForClass(className) {
-	const result = {};
-	for (const variant of splitClassName(className).slice(0, -1)) {
-		if (variant === "dark") result.colorScheme = "dark";
-		if (variant === "ios" || variant === "android" || variant === "native") result.platform = variant;
-	}
-	return result;
-}
-function atRuleVariant(node) {
-	if (!node) return {};
-	const params = node.params.toLowerCase();
-	if (params.includes("prefers-color-scheme") && params.includes("dark")) return { colorScheme: "dark" };
-	if (params.includes("platform") && params.includes("ios")) return { platform: "ios" };
-	if (params.includes("platform") && params.includes("android")) return { platform: "android" };
-	return {};
-}
 function addNativeVariantRules(manifest, candidates) {
 	for (const candidate of candidates) {
-		const parts = splitClassName(candidate);
+		const parts = (0, _weapp_tailwindcss_postcss_native.splitClassName)(candidate);
 		if (parts.length < 2) continue;
 		const base = parts.at(-1);
 		if (!base || manifest.rules[candidate] || !manifest.rules[base]) continue;
-		const variant = variantForClass(candidate);
+		const variant = (0, _weapp_tailwindcss_postcss_native.variantForClass)(candidate);
 		if (!variant.colorScheme && !variant.platform) continue;
 		manifest.rules[candidate] = manifest.rules[base].map((rule) => ({
 			...rule,
@@ -347,69 +18,6 @@ function addNativeVariantRules(manifest, candidates) {
 		manifest.classSet.push(candidate);
 	}
 }
-function ancestors(node) {
-	const result = [];
-	let current = node.parent;
-	while (current && current.type !== "root") {
-		if (current.type === "atrule") result.unshift(current);
-		current = current.parent;
-	}
-	return result;
-}
-function collectVariables(root) {
-	const variables = {};
-	root.walkDecls((decl) => {
-		if (decl.prop.startsWith("--")) variables[decl.prop] = decl.value.trim();
-	});
-	return variables;
-}
-function addWarning(warnings, warning) {
-	if (!warnings.some((item) => item.message === warning.message && item.property === warning.property && item.className === warning.className)) warnings.push(warning);
-}
-function compileRule(rule, className, variables, warnings, order) {
-	const unsupported = unsupportedVariant(className);
-	if (unsupported) {
-		addWarning(warnings, {
-			className,
-			property: "variant",
-			message: `不支持将 ${unsupported}: 变体编译为 React Native 条件样式`
-		});
-		return [];
-	}
-	const styles = {
-		normal: {},
-		important: {}
-	};
-	rule.walkDecls((decl) => {
-		if (decl.prop.startsWith("--")) return;
-		const property = propertyName(decl.prop);
-		const important = decl.important || /!important\s*$/i.test(decl.value);
-		const value = decl.value.replace(/\s*!important\s*$/i, "");
-		const expanded = expandDeclaration(property, value, variables);
-		if (!expanded || Object.values(expanded).includes(void 0)) {
-			addWarning(warnings, {
-				className,
-				property,
-				message: `不支持将 ${decl.prop}: ${value} 编译为 React Native style`
-			});
-			return;
-		}
-		Object.assign(styles[important ? "important" : "normal"], expanded);
-	});
-	const variant = {
-		...variantForClass(className),
-		...ancestors(rule).reduce((result, node) => ({
-			...result,
-			...atRuleVariant(node)
-		}), {})
-	};
-	return ["normal", "important"].filter((kind) => Object.keys(styles[kind]).length > 0).map((kind) => ({
-		style: styles[kind],
-		...variant,
-		important: kind === "important" || void 0,
-		order
-	}));
-}
 /** 为 manifest 生成稳定的 StyleSheet ID 和 Babel 静态 lookup。 */
 function finalizeNativeManifest(manifest) {
 	const styleSheet = {};
@@ -430,30 +38,20 @@ function finalizeNativeManifest(manifest) {
 	return manifest;
 }
 function compileNativeStylesheet(css, options = {}) {
-	const root = postcss.default.parse(css);
-	const variables = collectVariables(root);
-	const allowed = options.classSet ? new Set(options.classSet) : void 0;
-	const rules = {};
-	const warnings = [];
-	let order = 0;
-	root.walkRules((rule) => {
-		if (options.ignorePreflight !== false && (rule.selector.includes(":root") || rule.selector.includes("*") || rule.selector.includes("::"))) return;
-		for (const selector of rule.selectors) for (const className of walkClasses(selector)) {
-			if (allowed && !allowed.has(className)) continue;
-			const compiled = compileRule(rule, className, variables, warnings, order++);
-			if (compiled.length) (rules[className] ??= []).push(...compiled);
-		}
-	});
+	const compiled = (0, _weapp_tailwindcss_postcss_native.compileNativeCss)(css, options);
 	return finalizeNativeManifest({
 		version: 1,
-		classSet: Object.keys(rules),
-		rules,
-		variables,
-		warnings
+		classSet: Object.keys(compiled.rules),
+		...compiled
 	});
 }
 //#endregion
 exports.addNativeVariantRules = addNativeVariantRules;
-exports.baseClassName = baseClassName;
+Object.defineProperty(exports, "baseClassName", {
+	enumerable: true,
+	get: function() {
+		return _weapp_tailwindcss_postcss_native.baseClassName;
+	}
+});
 exports.compileNativeStylesheet = compileNativeStylesheet;
 exports.finalizeNativeManifest = finalizeNativeManifest;

package/dist/compiler.d.ts

@@ -1,8 +1,9 @@
-import { o as NativeStyleManifest, t as CompileNativeStylesheetOptions } from "./types-BTxnqaRV.js";
+import { o as NativeStyleManifest, t as CompileNativeStylesheetOptions } from "./types-BKoPIarb.js";
+import { baseClassName } from "@weapp-tailwindcss/postcss/native";
 //#region src/compiler.d.ts
-export declare function baseClassName(className: string): string | undefined;
 export declare function addNativeVariantRules(manifest: NativeStyleManifest, candidates: Iterable<string>): void;
 /** 为 manifest 生成稳定的 StyleSheet ID 和 Babel 静态 lookup。 */
 export declare function finalizeNativeManifest(manifest: NativeStyleManifest): NativeStyleManifest;
 export declare function compileNativeStylesheet(css: string, options?: CompileNativeStylesheetOptions): NativeStyleManifest;
-//#endregion
+//#endregion
+export { baseClassName };

package/dist/compiler.js

@@ -1,333 +1,6 @@
 import { createHash } from "node:crypto";
-import postcss from "postcss";
+import { baseClassName, compileNativeCss, splitClassName, variantForClass } from "@weapp-tailwindcss/postcss/native";
 //#region src/compiler.ts
-const CLASS_SELECTOR_RE = /\.((?:\\.|[^\s.#:[>+~])+)/g;
-const COLOR_PROPERTIES = /* @__PURE__ */ new Set([
-	"color",
-	"backgroundColor",
-	"borderColor",
-	"borderTopColor",
-	"borderRightColor",
-	"borderBottomColor",
-	"borderLeftColor",
-	"shadowColor",
-	"textDecorationColor"
-]);
-const NUMERIC_PROPERTIES = /* @__PURE__ */ new Set([
-	"aspectRatio",
-	"borderBottomWidth",
-	"borderLeftWidth",
-	"borderRadius",
-	"borderRightWidth",
-	"borderTopLeftRadius",
-	"borderTopRightRadius",
-	"borderTopWidth",
-	"borderWidth",
-	"bottom",
-	"elevation",
-	"flex",
-	"flexBasis",
-	"flexGrow",
-	"flexShrink",
-	"fontSize",
-	"gap",
-	"height",
-	"left",
-	"letterSpacing",
-	"lineHeight",
-	"margin",
-	"marginBottom",
-	"marginHorizontal",
-	"marginLeft",
-	"marginRight",
-	"marginTop",
-	"marginVertical",
-	"maxHeight",
-	"maxWidth",
-	"minHeight",
-	"minWidth",
-	"opacity",
-	"padding",
-	"paddingBottom",
-	"paddingHorizontal",
-	"paddingLeft",
-	"paddingRight",
-	"paddingTop",
-	"paddingVertical",
-	"right",
-	"top",
-	"width",
-	"zIndex"
-]);
-const STRING_PROPERTIES = /* @__PURE__ */ new Set([
-	"alignContent",
-	"alignItems",
-	"alignSelf",
-	"borderStyle",
-	"direction",
-	"display",
-	"flexDirection",
-	"flexWrap",
-	"fontFamily",
-	"fontStyle",
-	"fontWeight",
-	"justifyContent",
-	"overflow",
-	"position",
-	"textAlign",
-	"textDecorationLine",
-	"textDecorationStyle",
-	"textTransform",
-	"writingDirection"
-]);
-const SHORTHANDS = {
-	margin: [
-		"marginTop",
-		"marginRight",
-		"marginBottom",
-		"marginLeft"
-	],
-	padding: [
-		"paddingTop",
-		"paddingRight",
-		"paddingBottom",
-		"paddingLeft"
-	]
-};
-const UNSUPPORTED_PROPERTIES = /* @__PURE__ */ new Set([
-	"filter",
-	"backdropFilter",
-	"animation",
-	"transition",
-	"textShadow",
-	"backgroundImage",
-	"appearance",
-	"content",
-	"cursor",
-	"userSelect",
-	"whiteSpace",
-	"objectFit",
-	"listStyleType",
-	"outline"
-]);
-function decodeCssIdentifier(value) {
-	return value.replace(/\\([0-9a-f]{1,6})\s?/gi, (_, code) => String.fromCodePoint(Number.parseInt(code, 16))).replace(/\\(.)/g, "$1");
-}
-function splitClassName(className) {
-	const parts = [];
-	let current = "";
-	let bracketDepth = 0;
-	let escaped = false;
-	for (const character of className) {
-		if (escaped) {
-			current += character;
-			escaped = false;
-			continue;
-		}
-		if (character === "\\") {
-			current += character;
-			escaped = true;
-			continue;
-		}
-		if (character === "[") bracketDepth += 1;
-		if (character === "]") bracketDepth = Math.max(0, bracketDepth - 1);
-		if (character === ":" && bracketDepth === 0) {
-			parts.push(current);
-			current = "";
-			continue;
-		}
-		current += character;
-	}
-	parts.push(current);
-	return parts;
-}
-function baseClassName(className) {
-	return splitClassName(className).at(-1);
-}
-function unsupportedVariant(className) {
-	return splitClassName(className).slice(0, -1).find((variant) => ![
-		"dark",
-		"ios",
-		"android",
-		"native"
-	].includes(variant));
-}
-function propertyName(property) {
-	return {
-		"padding-inline": "paddingHorizontal",
-		"padding-inline-start": "paddingLeft",
-		"padding-inline-end": "paddingRight",
-		"padding-block": "paddingVertical",
-		"padding-block-start": "paddingTop",
-		"padding-block-end": "paddingBottom",
-		"margin-inline": "marginHorizontal",
-		"margin-inline-start": "marginLeft",
-		"margin-inline-end": "marginRight",
-		"margin-block": "marginVertical",
-		"margin-block-start": "marginTop",
-		"margin-block-end": "marginBottom"
-	}[property] ?? property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-}
-function splitValue(value) {
-	return value.trim().split(/\s+/).filter(Boolean);
-}
-function parseNumber(value, variables) {
-	const resolved = resolveVariables(value, variables);
-	const fraction = resolved.match(/^(-?(?:\d+\.\d+|\d+|\.\d+))\s*\/\s*(-?(?:\d+\.\d+|\d+|\.\d+))$/);
-	if (fraction && Number(fraction[2]) !== 0) return Number(fraction[1]) / Number(fraction[2]);
-	const calculated = resolved.match(/^calc\(\s*(-?(?:\d+\.\d+|\d+|\.\d+))(px|rem|em|%)?\s*\*\s*(-?(?:\d+\.\d+|\d+|\.\d+))\s*\)$/);
-	if (calculated) {
-		const base = parseNumber(`${calculated[1]}${calculated[2] ?? ""}`, variables);
-		return typeof base === "number" ? base * Number(calculated[3]) : void 0;
-	}
-	const match = resolved.match(/^(-?(?:\d+\.\d+|\d+|\.\d+))(px|rem|em|%)?$/);
-	if (!match) return;
-	const number = Number(match[1]);
-	if (match[2] === "%") return `${number}%`;
-	if (match[2] === "rem" || match[2] === "em") return number * 16;
-	return number;
-}
-function resolveVariables(value, variables) {
-	return value.replace(/var\((--[\w-]+)(?:,\s*([^)]*))?\)/g, (_, key, fallback) => variables[key] ?? fallback ?? `var(${key})`);
-}
-function isColor(value) {
-	return /^(?:#[\da-f]{3,8}|(?:rgb|rgba|hsl|hsla|oklch|oklab)\([^)]*\)|[a-z]+)$/i.test(value);
-}
-function oklchToHex(value) {
-	const match = value.match(/^oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s*([\d.]+))?\s*\)$/i);
-	if (!match) return;
-	const lightness = Number(match[1]) > 1 ? Number(match[1]) / 100 : Number(match[1]);
-	const chroma = Number(match[2]);
-	const hue = Number(match[3]) * Math.PI / 180;
-	const alpha = match[4] === void 0 ? 1 : Number(match[4]);
-	const a = chroma * Math.cos(hue);
-	const b = chroma * Math.sin(hue);
-	const l = lightness + .3963377774 * a + .2158037573 * b;
-	const m = lightness - .1055613458 * a - .0638541728 * b;
-	const s = lightness - .0894841775 * a - 1.291485548 * b;
-	const linear = (channel) => channel ** 3;
-	const red = 4.0767416621 * linear(l) - 3.3077115913 * linear(m) + .2309699292 * linear(s);
-	const green = -1.2684380046 * linear(l) + 2.6097574011 * linear(m) - .3413193965 * linear(s);
-	const blue = -.0041960863 * linear(l) - .7034186147 * linear(m) + 1.707614701 * linear(s);
-	const toByte = (channel) => Math.round(Math.max(0, Math.min(1, channel <= .0031308 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - .055)) * 255);
-	const hex = [
-		red,
-		green,
-		blue
-	].map((channel) => toByte(channel).toString(16).padStart(2, "0")).join("");
-	return alpha < 1 ? `#${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}` : `#${hex}`;
-}
-function normalizeColor(value) {
-	return /^oklch\(/i.test(value) ? oklchToHex(value) : value;
-}
-function parseTransform(value, variables) {
-	const transform = [];
-	for (const match of value.matchAll(/(translateX|translateY|translate|scaleX|scaleY|scale|rotate|skewX|skewY)\(([^)]*)\)/g)) {
-		const name = match[1];
-		const values = splitValue(resolveVariables(match[2] ?? "", variables).replace(",", " "));
-		if (!name || !values.length) continue;
-		if (name.startsWith("scale")) {
-			const number = Number(values[0] ?? "");
-			if (Number.isFinite(number)) transform.push({ [name]: number });
-			continue;
-		}
-		if (name === "translate") {
-			const x = parseNumber(values[0] ?? "", variables);
-			const y = parseNumber(values[1] ?? "0", variables);
-			if (x !== void 0 && y !== void 0) transform.push({ translateX: x }, { translateY: y });
-			continue;
-		}
-		const property = name.replace(/^translate$/, "translateX");
-		const parsed = name.startsWith("rotate") || name.startsWith("skew") ? values[0] : parseNumber(values[0] ?? "", variables);
-		if (parsed !== void 0) transform.push({ [property]: parsed });
-	}
-	return transform.length ? transform : void 0;
-}
-function parseShadow(value, variables) {
-	const resolved = resolveVariables(value, variables);
-	const color = resolved.match(/(?:rgba?|hsla?)\([^)]*\)|#[\da-f]{3,8}/i)?.[0];
-	const parts = splitValue(color ? resolved.replace(color, "") : resolved);
-	const lengths = parts.filter((part) => parseNumber(part, variables) !== void 0).slice(0, 3);
-	if (lengths.length < 2) return;
-	const [x = "0", y = "0", blur = "0"] = lengths;
-	const shadowColor = normalizeColor(color ?? parts.find((part) => isColor(part)) ?? "#000000") ?? "#000000";
-	const opacity = /rgba\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)/i.exec(shadowColor)?.[1];
-	return {
-		shadowOffset: {
-			width: parseNumber(x, variables),
-			height: parseNumber(y, variables)
-		},
-		shadowRadius: parseNumber(blur, variables),
-		shadowColor,
-		...opacity ? { shadowOpacity: Number(opacity) } : {}
-	};
-}
-function parseValue(property, value, variables) {
-	const trimmed = value.trim();
-	if (UNSUPPORTED_PROPERTIES.has(property)) return;
-	if (trimmed.includes("linear-gradient(") || trimmed.includes("url(")) return;
-	if (COLOR_PROPERTIES.has(property)) {
-		const color = resolveVariables(trimmed, variables);
-		return isColor(color) ? normalizeColor(color) : void 0;
-	}
-	if (NUMERIC_PROPERTIES.has(property)) {
-		const number = parseNumber(trimmed, variables);
-		if (property === "opacity" && typeof number === "string" && number.endsWith("%")) return Number.parseFloat(number) / 100;
-		return number;
-	}
-	if (property === "transform") return parseTransform(trimmed, variables);
-	if (property === "boxShadow") return parseShadow(trimmed, variables);
-	if (property === "display" && !["flex", "none"].includes(trimmed)) return;
-	return STRING_PROPERTIES.has(property) ? trimmed : void 0;
-}
-function expandDeclaration(property, value, variables) {
-	if (property === "margin" || property === "padding") {
-		const parts = splitValue(value).map((item) => parseNumber(item, variables));
-		if (parts.includes(void 0)) return;
-		const [top, right = top, bottom = top, left = right] = parts;
-		return Object.fromEntries(SHORTHANDS[property].map((key, index) => [key, [
-			top,
-			right,
-			bottom,
-			left
-		][index]]));
-	}
-	if (property === "border") {
-		const width = splitValue(value).find((item) => /^\d/.test(item));
-		const color = splitValue(value).find((item) => isColor(item));
-		return {
-			...width ? { borderWidth: parseNumber(width, variables) } : {},
-			...color ? { borderColor: color } : {}
-		};
-	}
-	if (property === "boxShadow") return parseShadow(value, variables);
-	const parsed = parseValue(property, value, variables);
-	return parsed === void 0 ? void 0 : { [property]: parsed };
-}
-function walkClasses(selector) {
-	const classes = [];
-	for (const match of selector.matchAll(CLASS_SELECTOR_RE)) {
-		const token = decodeCssIdentifier(match[1]);
-		if (token && !classes.includes(token)) classes.push(token);
-	}
-	return classes;
-}
-function variantForClass(className) {
-	const result = {};
-	for (const variant of splitClassName(className).slice(0, -1)) {
-		if (variant === "dark") result.colorScheme = "dark";
-		if (variant === "ios" || variant === "android" || variant === "native") result.platform = variant;
-	}
-	return result;
-}
-function atRuleVariant(node) {
-	if (!node) return {};
-	const params = node.params.toLowerCase();
-	if (params.includes("prefers-color-scheme") && params.includes("dark")) return { colorScheme: "dark" };
-	if (params.includes("platform") && params.includes("ios")) return { platform: "ios" };
-	if (params.includes("platform") && params.includes("android")) return { platform: "android" };
-	return {};
-}
 function addNativeVariantRules(manifest, candidates) {
 	for (const candidate of candidates) {
 		const parts = splitClassName(candidate);
@@ -344,69 +17,6 @@ function addNativeVariantRules(manifest, candidates) {
 		manifest.classSet.push(candidate);
 	}
 }
-function ancestors(node) {
-	const result = [];
-	let current = node.parent;
-	while (current && current.type !== "root") {
-		if (current.type === "atrule") result.unshift(current);
-		current = current.parent;
-	}
-	return result;
-}
-function collectVariables(root) {
-	const variables = {};
-	root.walkDecls((decl) => {
-		if (decl.prop.startsWith("--")) variables[decl.prop] = decl.value.trim();
-	});
-	return variables;
-}
-function addWarning(warnings, warning) {
-	if (!warnings.some((item) => item.message === warning.message && item.property === warning.property && item.className === warning.className)) warnings.push(warning);
-}
-function compileRule(rule, className, variables, warnings, order) {
-	const unsupported = unsupportedVariant(className);
-	if (unsupported) {
-		addWarning(warnings, {
-			className,
-			property: "variant",
-			message: `不支持将 ${unsupported}: 变体编译为 React Native 条件样式`
-		});
-		return [];
-	}
-	const styles = {
-		normal: {},
-		important: {}
-	};
-	rule.walkDecls((decl) => {
-		if (decl.prop.startsWith("--")) return;
-		const property = propertyName(decl.prop);
-		const important = decl.important || /!important\s*$/i.test(decl.value);
-		const value = decl.value.replace(/\s*!important\s*$/i, "");
-		const expanded = expandDeclaration(property, value, variables);
-		if (!expanded || Object.values(expanded).includes(void 0)) {
-			addWarning(warnings, {
-				className,
-				property,
-				message: `不支持将 ${decl.prop}: ${value} 编译为 React Native style`
-			});
-			return;
-		}
-		Object.assign(styles[important ? "important" : "normal"], expanded);
-	});
-	const variant = {
-		...variantForClass(className),
-		...ancestors(rule).reduce((result, node) => ({
-			...result,
-			...atRuleVariant(node)
-		}), {})
-	};
-	return ["normal", "important"].filter((kind) => Object.keys(styles[kind]).length > 0).map((kind) => ({
-		style: styles[kind],
-		...variant,
-		important: kind === "important" || void 0,
-		order
-	}));
-}
 /** 为 manifest 生成稳定的 StyleSheet ID 和 Babel 静态 lookup。 */
 function finalizeNativeManifest(manifest) {
 	const styleSheet = {};
@@ -427,26 +37,11 @@ function finalizeNativeManifest(manifest) {
 	return manifest;
 }
 function compileNativeStylesheet(css, options = {}) {
-	const root = postcss.parse(css);
-	const variables = collectVariables(root);
-	const allowed = options.classSet ? new Set(options.classSet) : void 0;
-	const rules = {};
-	const warnings = [];
-	let order = 0;
-	root.walkRules((rule) => {
-		if (options.ignorePreflight !== false && (rule.selector.includes(":root") || rule.selector.includes("*") || rule.selector.includes("::"))) return;
-		for (const selector of rule.selectors) for (const className of walkClasses(selector)) {
-			if (allowed && !allowed.has(className)) continue;
-			const compiled = compileRule(rule, className, variables, warnings, order++);
-			if (compiled.length) (rules[className] ??= []).push(...compiled);
-		}
-	});
+	const compiled = compileNativeCss(css, options);
 	return finalizeNativeManifest({
 		version: 1,
-		classSet: Object.keys(rules),
-		rules,
-		variables,
-		warnings
+		classSet: Object.keys(compiled.rules),
+		...compiled
 	});
 }
 //#endregion

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import weappReactNativeBabel from "./babel.js";
-import { a as NativeStyleEnvironment, c as NativeStyleRuntime, i as NativePlatform, l as NativeStyleValue, n as NativeClassValue, o as NativeStyleManifest, r as NativeCompilerWarning, s as NativeStyleRule, t as CompileNativeStylesheetOptions } from "./types-BTxnqaRV.js";
+import { a as NativeStyleEnvironment, c as NativeStyleRuntime, i as NativePlatform, l as NativeStyleValue, n as NativeClassValue, o as NativeStyleManifest, r as NativeCompilerWarning, s as NativeStyleRule, t as CompileNativeStylesheetOptions } from "./types-BKoPIarb.js";
 import { compileNativeStylesheet } from "./compiler.js";
 import { VIRTUAL_MANIFEST_MODULE, getRegisteredManifest, getVirtualModuleCode, getVirtualModuleCodeAsync, withWeappTailwindcss } from "./metro.js";
 import { composeStyle, createNativeStyleRuntime, getManifest, getStaticStyle, setEnvironment, setManifest, setStyleSheetFactory, tw } from "./runtime.js";

package/dist/metro.d.ts

@@ -1,4 +1,4 @@
-import { o as NativeStyleManifest } from "./types-BTxnqaRV.js";
+import { o as NativeStyleManifest } from "./types-BKoPIarb.js";
 //#region src/metro.d.ts
 export declare const VIRTUAL_MANIFEST_MODULE = "@weapp-tailwindcss/react-native/virtual";
 export interface MetroConfigLike {

package/dist/runtime.d.ts

@@ -1,4 +1,4 @@
-import { a as NativeStyleEnvironment, c as NativeStyleRuntime, i as NativePlatform, l as NativeStyleValue, n as NativeClassValue, o as NativeStyleManifest } from "./types-BTxnqaRV.js";
+import { a as NativeStyleEnvironment, c as NativeStyleRuntime, i as NativePlatform, l as NativeStyleValue, n as NativeClassValue, o as NativeStyleManifest } from "./types-BKoPIarb.js";
 //#region src/runtime.d.ts
 interface StyleValue {
   [key: string]: unknown;

package/dist/tailwind.cjs

@@ -4,6 +4,7 @@ const require_compiler = require("./compiler.cjs");
 let node_process = require("node:process");
 node_process = require_rolldown_runtime.__toESM(node_process, 1);
 let weapp_tailwindcss_generator = require("weapp-tailwindcss/generator");
+let _weapp_tailwindcss_postcss_native = require("@weapp-tailwindcss/postcss/native");
 //#region src/tailwind.ts
 /**
 * 使用 weapp-tailwindcss 的 Tailwind v4 generator 生成原始 CSS，再编译为 RN manifest。
@@ -21,7 +22,7 @@ async function generateNativeStylesheet(options = {}) {
 	}));
 	const generatorCandidates = new Set(options.candidates ?? []);
 	for (const candidate of generatorCandidates) {
-		const base = require_compiler.baseClassName(candidate);
+		const base = (0, _weapp_tailwindcss_postcss_native.baseClassName)(candidate);
 		if (base && /^(?:ios|android|native):/.test(candidate)) generatorCandidates.add(base);
 	}
 	let generated = await generator.generate({
@@ -31,7 +32,7 @@ async function generateNativeStylesheet(options = {}) {
 	});
 	const platformBases = /* @__PURE__ */ new Set();
 	for (const candidate of generated.rawCandidates ?? []) {
-		const base = require_compiler.baseClassName(candidate);
+		const base = (0, _weapp_tailwindcss_postcss_native.baseClassName)(candidate);
 		if (base && /^(?:ios|android|native):/.test(candidate) && !generated.classSet.has(base)) platformBases.add(base);
 	}
 	if (platformBases.size) generated = await generator.generate({
@@ -42,7 +43,7 @@ async function generateNativeStylesheet(options = {}) {
 	const classSet = new Set(generated.classSet);
 	const requestedCandidates = new Set(options.candidates ?? []);
 	for (const candidate of generated.rawCandidates ?? []) {
-		const base = require_compiler.baseClassName(candidate);
+		const base = (0, _weapp_tailwindcss_postcss_native.baseClassName)(candidate);
 		if (base && generated.classSet.has(base) && /^(?:dark|ios|android|native):/.test(candidate)) requestedCandidates.add(candidate);
 	}
 	for (const candidate of requestedCandidates) classSet.add(candidate);

package/dist/tailwind.d.ts

@@ -1,4 +1,4 @@
-import { o as NativeStyleManifest } from "./types-BTxnqaRV.js";
+import { o as NativeStyleManifest } from "./types-BKoPIarb.js";
 import { TailwindV4SourceOptions } from "weapp-tailwindcss/generator";
 //#region src/tailwind.d.ts
 export interface GenerateNativeStylesheetOptions extends TailwindV4SourceOptions {

package/dist/{types-BTxnqaRV.d.ts → types-BKoPIarb.d.ts}

@@ -1,22 +1,9 @@
+import { CompileNativeStylesheetOptions, NativeCompilerWarning, NativeCompilerWarning as NativeCompilerWarning$1, NativePlatform, NativePlatform as NativePlatform$1, NativeStyleRule, NativeStyleRule as NativeStyleRule$1 } from "@weapp-tailwindcss/postcss/native";
 //#region src/types.d.ts
-type NativePlatform = 'android' | 'ios' | 'native' | 'web';
 interface NativeStyleEnvironment {
   colorScheme?: 'light' | 'dark' | undefined;
   platform?: NativePlatform | undefined;
 }
-interface NativeStyleRule {
-  style: Record<string, unknown>;
-  colorScheme?: 'dark' | undefined;
-  platform?: NativePlatform | undefined;
-  important?: boolean | undefined;
-  order?: number | undefined;
-  id?: string | undefined;
-}
-interface NativeCompilerWarning {
-  className?: string | undefined;
-  property?: string | undefined;
-  message: string;
-}
 interface NativeStyleManifest {
   version: 1;
   classSet: string[];
@@ -30,10 +17,6 @@ interface NativeStyleManifest {
   variables: Record<string, string>;
   warnings: NativeCompilerWarning[];
 }
-interface CompileNativeStylesheetOptions {
-  classSet?: Iterable<string> | undefined;
-  ignorePreflight?: boolean | undefined;
-}
 type NativeClassValue = string | false | null | undefined | NativeClassValue[] | Record<string, boolean>;
 type NativeStyleValue = Record<string, unknown> | number | readonly NativeStyleValue[];
 interface NativeStyleRuntime {
@@ -45,4 +28,4 @@ interface NativeStyleRuntime {
   getManifest: () => NativeStyleManifest | undefined;
 }
 //#endregion
-export { NativeStyleEnvironment as a, NativeStyleRuntime as c, NativePlatform as i, NativeStyleValue as l, NativeClassValue as n, NativeStyleManifest as o, NativeCompilerWarning as r, NativeStyleRule as s, CompileNativeStylesheetOptions as t };
+export { NativeStyleEnvironment as a, NativeStyleRuntime as c, NativePlatform$1 as i, NativeStyleValue as l, NativeClassValue as n, NativeStyleManifest as o, NativeCompilerWarning$1 as r, NativeStyleRule$1 as s, CompileNativeStylesheetOptions as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weapp-tailwindcss/react-native",
   "type": "module",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Tailwind CSS compiler and Expo Metro integration for cross-platform React Native apps. 面向跨端 React Native 应用的 Tailwind CSS 编译器与 Expo Metro 集成。",
   "license": "MIT",
   "homepage": "https://tw.weapp.dev/docs/quick-start/react-native-expo",
@@ -92,8 +92,8 @@
   },
   "dependencies": {
     "@babel/types": "^8.0.5",
-    "postcss": "^8.5.28",
-    "weapp-tailwindcss": "5.5.6"
+    "@weapp-tailwindcss/postcss": "3.3.6",
+    "weapp-tailwindcss": "5.5.7"
   },
   "devDependencies": {
     "@babel/core": "^8.0.5",