@weapp-tailwindcss/react-native 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 ice breaker
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @weapp-tailwindcss/react-native
+
+面向 React Native 与 Expo 的 Tailwind CSS v4 编译器。它复用 `weapp-tailwindcss` 的 source 扫描与候选生成，将原始 CSS 编译为可序列化的 React Native style manifest，不引入 NativeWind 或 `react-native-css` 运行时。
+
+## Expo 配置
+
+```bash
+pnpm add @weapp-tailwindcss/react-native tailwindcss
+```
+
+```js
+// metro.config.js
+const { getDefaultConfig } = require('expo/metro-config')
+const { withWeappTailwindcss } = require('@weapp-tailwindcss/react-native/metro')
+
+const config = getDefaultConfig(__dirname)
+
+module.exports = withWeappTailwindcss(config, {
+  input: './global.css',
+  sourceGlobs: ['./src/**/*.{js,jsx,ts,tsx}'],
+})
+```
+
+Expo 只需要配置一次 Metro。Metro 会扫描 source、生成精确候选集合和 manifest，并自动把 Babel JSX transform 注入原有 Expo transformer；不需要再维护第二份 `classNameSet`。非 Expo 或定制 Metro 场景仍可显式使用 `@weapp-tailwindcss/react-native/babel`。
+
+静态 `className` 会编译为预生成的 StyleSheet lookup，不在 render 中调用 `tw()`；动态值才使用 `tw(value)`。普通 inline `style` 覆盖 Tailwind class，`!important` class 覆盖 inline style。不支持的 CSS 声明会写入 manifest 的 `warnings`，不会静默产出错误的 RN style。
+
+公开入口：`compiler`、`babel`、`metro`、`runtime`、`tailwind` 与中性类型入口 `env`。

package/dist/babel.cjs

@@ -0,0 +1,112 @@
+const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
+let _babel_types = require("@babel/types");
+_babel_types = require_rolldown_runtime.__toESM(_babel_types, 1);
+//#region src/babel.ts
+function classTokens(value) {
+	return value.split(/\s+/).filter(Boolean);
+}
+function ensureRuntimeIdentifier(program, state, kind) {
+	const identifiers = state.runtimeIdentifiers ??= {};
+	if (identifiers[kind]) return identifiers[kind];
+	const moduleName = state.opts.runtimeModule ?? "@weapp-tailwindcss/react-native/runtime";
+	const local = program.scope.generateUidIdentifier(kind === "static" ? "twStatic" : kind === "compose" ? "twCompose" : "tw");
+	identifiers[kind] = local;
+	if (!state.virtualImported) {
+		program.unshiftContainer("body", _babel_types.importDeclaration([], _babel_types.stringLiteral("@weapp-tailwindcss/react-native/virtual")));
+		state.virtualImported = true;
+	}
+	program.unshiftContainer("body", _babel_types.importDeclaration([_babel_types.importSpecifier(local, _babel_types.identifier(kind === "static" ? "getStaticStyle" : kind === "compose" ? "composeStyle" : "tw"))], _babel_types.stringLiteral(moduleName)));
+	return local;
+}
+function shouldSkipFile(filename) {
+	if (!filename) return false;
+	const normalized = filename.replaceAll("\\", "/");
+	const basename = normalized.slice(normalized.lastIndexOf("/") + 1).toLowerCase();
+	return normalized.includes("/node_modules/") || /^(?:react|react-native)(?:[.-]|$)/.test(basename);
+}
+function hasKnownStaticTokens(value, classNameSet) {
+	if (!classNameSet) return false;
+	return classTokens(value).every((token) => classNameSet.has(token));
+}
+function styleExpression(attribute) {
+	if (!attribute) return;
+	const value = attribute.value;
+	if (!value) return;
+	if (_babel_types.isJSXExpressionContainer(value)) return _babel_types.isJSXEmptyExpression(value.expression) ? void 0 : value.expression;
+	if (_babel_types.isStringLiteral(value)) return value;
+}
+function composeExpression(program, state, tailwind, inline) {
+	if (!inline) return tailwind;
+	return _babel_types.callExpression(ensureRuntimeIdentifier(program, state, "compose"), [tailwind, inline]);
+}
+function staticStyleExpression(program, state, value) {
+	const ids = classTokens(value).flatMap((token) => state.opts.staticStyleMap?.[token] ?? [token]);
+	const staticIdentifier = ensureRuntimeIdentifier(program, state, "static");
+	return _babel_types.callExpression(staticIdentifier, [_babel_types.arrayExpression(ids.map((id) => _babel_types.stringLiteral(id)))]);
+}
+function dynamicStyleExpression(program, state, value) {
+	return _babel_types.callExpression(ensureRuntimeIdentifier(program, state, "tw"), [value]);
+}
+function applyStyleAttribute(opening, expression) {
+	const existing = opening.node.attributes.find((attribute) => _babel_types.isJSXAttribute(attribute) && attribute.name.name === "style");
+	if (existing && _babel_types.isJSXAttribute(existing)) {
+		existing.value = _babel_types.jsxExpressionContainer(expression);
+		return;
+	}
+	opening.node.attributes.push(_babel_types.jsxAttribute(_babel_types.jsxIdentifier("style"), _babel_types.jsxExpressionContainer(expression)));
+}
+function propertyName(node) {
+	if (_babel_types.isIdentifier(node.key) && !node.computed) return node.key.name;
+	if (_babel_types.isStringLiteral(node.key)) return node.key.value;
+}
+function applyCreateElementProps(props, program, state) {
+	const classProperty = props.properties.find((property) => _babel_types.isObjectProperty(property) && propertyName(property) === "className");
+	if (!classProperty || !_babel_types.isObjectProperty(classProperty)) return;
+	const value = classProperty.value;
+	const classSet = state.opts.classNameSet ? new Set(state.opts.classNameSet) : void 0;
+	const styleProperty = props.properties.find((property) => _babel_types.isObjectProperty(property) && propertyName(property) === "style");
+	const inline = styleProperty && _babel_types.isObjectProperty(styleProperty) ? styleProperty.value : void 0;
+	let style;
+	if (_babel_types.isStringLiteral(value)) {
+		if (!hasKnownStaticTokens(value.value, classSet)) return;
+		style = composeExpression(program, state, staticStyleExpression(program, state, value.value), inline);
+	} else if (_babel_types.isExpression(value)) style = composeExpression(program, state, dynamicStyleExpression(program, state, value), inline);
+	else return;
+	if (styleProperty && _babel_types.isObjectProperty(styleProperty)) styleProperty.value = style;
+	else props.properties.push(_babel_types.objectProperty(_babel_types.identifier("style"), style));
+	props.properties = props.properties.filter((property) => property !== classProperty);
+}
+function weappReactNativeBabel() {
+	return {
+		name: "weapp-tailwindcss-react-native",
+		visitor: {
+			JSXOpeningElement(path, state) {
+				if (shouldSkipFile(state.filename)) return;
+				const program = path.findParent((parent) => parent.isProgram());
+				if (!program?.isProgram()) return;
+				const classAttribute = path.node.attributes.find((attribute) => _babel_types.isJSXAttribute(attribute) && attribute.name.name === "className");
+				if (!classAttribute || !_babel_types.isJSXAttribute(classAttribute)) return;
+				if (_babel_types.isStringLiteral(classAttribute.value)) {
+					if (!hasKnownStaticTokens(classAttribute.value.value, state.opts.classNameSet ? new Set(state.opts.classNameSet) : void 0)) return;
+					applyStyleAttribute(path, composeExpression(program, state, staticStyleExpression(program, state, classAttribute.value.value), styleExpression(path.node.attributes.find((attribute) => _babel_types.isJSXAttribute(attribute) && attribute.name.name === "style"))));
+					path.node.attributes = path.node.attributes.filter((attribute) => attribute !== classAttribute);
+					return;
+				}
+				if (_babel_types.isJSXExpressionContainer(classAttribute.value) && classAttribute.value.expression) {
+					const existing = path.node.attributes.find((attribute) => _babel_types.isJSXAttribute(attribute) && attribute.name.name === "style");
+					applyStyleAttribute(path, composeExpression(program, state, dynamicStyleExpression(program, state, classAttribute.value.expression), styleExpression(existing)));
+					path.node.attributes = path.node.attributes.filter((attribute) => attribute !== classAttribute);
+				}
+			},
+			CallExpression(path, state) {
+				if (shouldSkipFile(state.filename)) return;
+				const callee = path.node.callee;
+				if (!(_babel_types.isMemberExpression(callee) && !callee.computed && _babel_types.isIdentifier(callee.object, { name: "React" }) && _babel_types.isIdentifier(callee.property, { name: "createElement" })) || !_babel_types.isObjectExpression(path.node.arguments[1])) return;
+				const program = path.findParent((parent) => parent.isProgram());
+				if (program?.isProgram()) applyCreateElementProps(path.node.arguments[1], program, state);
+			}
+		}
+	};
+}
+//#endregion
+module.exports = weappReactNativeBabel;

package/dist/babel.d.ts

@@ -0,0 +1,21 @@
+import { PluginObject, PluginPass } from "@babel/core";
+import * as t from "@babel/types";
+//#region src/babel.d.ts
+interface WeappReactNativeBabelOptions {
+  classNameSet?: Iterable<string> | undefined;
+  /** Metro 生成的 token -> StyleSheet ID lookup。 */
+  staticStyleMap?: Record<string, string[]> | undefined;
+  runtimeModule?: string | undefined;
+}
+interface PluginState extends PluginPass {
+  opts: WeappReactNativeBabelOptions;
+  runtimeIdentifiers?: {
+    tw?: t.Identifier;
+    static?: t.Identifier;
+    compose?: t.Identifier;
+  };
+  virtualImported?: boolean;
+}
+declare function weappReactNativeBabel(): PluginObject<PluginState>;
+//#endregion
+export { WeappReactNativeBabelOptions, weappReactNativeBabel as default };

package/dist/babel.js

@@ -0,0 +1,110 @@
+import * as t from "@babel/types";
+//#region src/babel.ts
+function classTokens(value) {
+	return value.split(/\s+/).filter(Boolean);
+}
+function ensureRuntimeIdentifier(program, state, kind) {
+	const identifiers = state.runtimeIdentifiers ??= {};
+	if (identifiers[kind]) return identifiers[kind];
+	const moduleName = state.opts.runtimeModule ?? "@weapp-tailwindcss/react-native/runtime";
+	const local = program.scope.generateUidIdentifier(kind === "static" ? "twStatic" : kind === "compose" ? "twCompose" : "tw");
+	identifiers[kind] = local;
+	if (!state.virtualImported) {
+		program.unshiftContainer("body", t.importDeclaration([], t.stringLiteral("@weapp-tailwindcss/react-native/virtual")));
+		state.virtualImported = true;
+	}
+	program.unshiftContainer("body", t.importDeclaration([t.importSpecifier(local, t.identifier(kind === "static" ? "getStaticStyle" : kind === "compose" ? "composeStyle" : "tw"))], t.stringLiteral(moduleName)));
+	return local;
+}
+function shouldSkipFile(filename) {
+	if (!filename) return false;
+	const normalized = filename.replaceAll("\\", "/");
+	const basename = normalized.slice(normalized.lastIndexOf("/") + 1).toLowerCase();
+	return normalized.includes("/node_modules/") || /^(?:react|react-native)(?:[.-]|$)/.test(basename);
+}
+function hasKnownStaticTokens(value, classNameSet) {
+	if (!classNameSet) return false;
+	return classTokens(value).every((token) => classNameSet.has(token));
+}
+function styleExpression(attribute) {
+	if (!attribute) return;
+	const value = attribute.value;
+	if (!value) return;
+	if (t.isJSXExpressionContainer(value)) return t.isJSXEmptyExpression(value.expression) ? void 0 : value.expression;
+	if (t.isStringLiteral(value)) return value;
+}
+function composeExpression(program, state, tailwind, inline) {
+	if (!inline) return tailwind;
+	return t.callExpression(ensureRuntimeIdentifier(program, state, "compose"), [tailwind, inline]);
+}
+function staticStyleExpression(program, state, value) {
+	const ids = classTokens(value).flatMap((token) => state.opts.staticStyleMap?.[token] ?? [token]);
+	const staticIdentifier = ensureRuntimeIdentifier(program, state, "static");
+	return t.callExpression(staticIdentifier, [t.arrayExpression(ids.map((id) => t.stringLiteral(id)))]);
+}
+function dynamicStyleExpression(program, state, value) {
+	return t.callExpression(ensureRuntimeIdentifier(program, state, "tw"), [value]);
+}
+function applyStyleAttribute(opening, expression) {
+	const existing = opening.node.attributes.find((attribute) => t.isJSXAttribute(attribute) && attribute.name.name === "style");
+	if (existing && t.isJSXAttribute(existing)) {
+		existing.value = t.jsxExpressionContainer(expression);
+		return;
+	}
+	opening.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(expression)));
+}
+function propertyName(node) {
+	if (t.isIdentifier(node.key) && !node.computed) return node.key.name;
+	if (t.isStringLiteral(node.key)) return node.key.value;
+}
+function applyCreateElementProps(props, program, state) {
+	const classProperty = props.properties.find((property) => t.isObjectProperty(property) && propertyName(property) === "className");
+	if (!classProperty || !t.isObjectProperty(classProperty)) return;
+	const value = classProperty.value;
+	const classSet = state.opts.classNameSet ? new Set(state.opts.classNameSet) : void 0;
+	const styleProperty = props.properties.find((property) => t.isObjectProperty(property) && propertyName(property) === "style");
+	const inline = styleProperty && t.isObjectProperty(styleProperty) ? styleProperty.value : void 0;
+	let style;
+	if (t.isStringLiteral(value)) {
+		if (!hasKnownStaticTokens(value.value, classSet)) return;
+		style = composeExpression(program, state, staticStyleExpression(program, state, value.value), inline);
+	} else if (t.isExpression(value)) style = composeExpression(program, state, dynamicStyleExpression(program, state, value), inline);
+	else return;
+	if (styleProperty && t.isObjectProperty(styleProperty)) styleProperty.value = style;
+	else props.properties.push(t.objectProperty(t.identifier("style"), style));
+	props.properties = props.properties.filter((property) => property !== classProperty);
+}
+function weappReactNativeBabel() {
+	return {
+		name: "weapp-tailwindcss-react-native",
+		visitor: {
+			JSXOpeningElement(path, state) {
+				if (shouldSkipFile(state.filename)) return;
+				const program = path.findParent((parent) => parent.isProgram());
+				if (!program?.isProgram()) return;
+				const classAttribute = path.node.attributes.find((attribute) => t.isJSXAttribute(attribute) && attribute.name.name === "className");
+				if (!classAttribute || !t.isJSXAttribute(classAttribute)) return;
+				if (t.isStringLiteral(classAttribute.value)) {
+					if (!hasKnownStaticTokens(classAttribute.value.value, state.opts.classNameSet ? new Set(state.opts.classNameSet) : void 0)) return;
+					applyStyleAttribute(path, composeExpression(program, state, staticStyleExpression(program, state, classAttribute.value.value), styleExpression(path.node.attributes.find((attribute) => t.isJSXAttribute(attribute) && attribute.name.name === "style"))));
+					path.node.attributes = path.node.attributes.filter((attribute) => attribute !== classAttribute);
+					return;
+				}
+				if (t.isJSXExpressionContainer(classAttribute.value) && classAttribute.value.expression) {
+					const existing = path.node.attributes.find((attribute) => t.isJSXAttribute(attribute) && attribute.name.name === "style");
+					applyStyleAttribute(path, composeExpression(program, state, dynamicStyleExpression(program, state, classAttribute.value.expression), styleExpression(existing)));
+					path.node.attributes = path.node.attributes.filter((attribute) => attribute !== classAttribute);
+				}
+			},
+			CallExpression(path, state) {
+				if (shouldSkipFile(state.filename)) return;
+				const callee = path.node.callee;
+				if (!(t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.object, { name: "React" }) && t.isIdentifier(callee.property, { name: "createElement" })) || !t.isObjectExpression(path.node.arguments[1])) return;
+				const program = path.findParent((parent) => parent.isProgram());
+				if (program?.isProgram()) applyCreateElementProps(path.node.arguments[1], program, state);
+			}
+		}
+	};
+}
+//#endregion
+export { weappReactNativeBabel as default };

package/dist/compiler.cjs

@@ -0,0 +1,383 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./rolldown-runtime-D6vf50IK.cjs");
+let postcss = require("postcss");
+postcss = require_rolldown_runtime.__toESM(postcss, 1);
+//#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 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 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 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)) return parseNumber(trimmed, variables);
+	if (property === "transform") return parseTransform(trimmed, variables);
+	if (property === "boxShadow") return parseShadow(trimmed, variables);
+	if (property === "display" && !["flex", "none"].includes(trimmed)) return;
+	return trimmed;
+}
+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 className.split(":").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 = candidate.split(":");
+		if (parts.length < 2) continue;
+		const base = parts.at(-1);
+		if (!base || manifest.rules[candidate] || !manifest.rules[base]) continue;
+		const variant = variantForClass(candidate);
+		if (!variant.colorScheme && !variant.platform) continue;
+		manifest.rules[candidate] = manifest.rules[base].map((rule) => ({
+			...rule,
+			...variant,
+			style: { ...rule.style }
+		}));
+		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 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)) {
+			const variableReference = /var\((--[\w-]+)/.exec(value)?.[1];
+			if (!variableReference || !variables[variableReference]) 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 = {};
+	const styleEntries = {};
+	const staticLookup = {};
+	let nextId = 0;
+	for (const [className, rules] of Object.entries(manifest.rules)) for (const rule of rules) {
+		const id = rule.id ?? `s${nextId++}`;
+		rule.id = id;
+		styleSheet[id] = rule.style;
+		styleEntries[id] = rule;
+		(staticLookup[className] ??= []).push(id);
+	}
+	manifest.styleSheet = styleSheet;
+	manifest.styleEntries = styleEntries;
+	manifest.staticLookup = staticLookup;
+	manifest.classSet = Object.keys(manifest.rules);
+	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);
+		}
+	});
+	return finalizeNativeManifest({
+		version: 1,
+		classSet: Object.keys(rules),
+		rules,
+		variables,
+		warnings
+	});
+}
+//#endregion
+exports.addNativeVariantRules = addNativeVariantRules;
+exports.compileNativeStylesheet = compileNativeStylesheet;
+exports.finalizeNativeManifest = finalizeNativeManifest;