@weapp-tailwindcss/react-native 0.1.0

package/dist/runtime.js

@@ -0,0 +1,179 @@
+//#region src/runtime.ts
+let activeManifest;
+let activeEnvironment = {};
+const styleMetadata = /* @__PURE__ */ new Map();
+let styleSheetFactory;
+let nativeStyleSheet = {};
+function createStyleSheet(manifest) {
+	const source = manifest.styleSheet ?? Object.fromEntries(Object.entries(manifest.styleEntries ?? {}).map(([id, rule]) => [id, rule.style]));
+	nativeStyleSheet = styleSheetFactory?.(source) ?? source;
+}
+function flatten(value, result) {
+	if (!value) return;
+	if (typeof value === "string") {
+		result.push(...value.split(/\s+/).filter(Boolean));
+		return;
+	}
+	if (Array.isArray(value)) {
+		for (const item of value) flatten(item, result);
+		return;
+	}
+	for (const [className, enabled] of Object.entries(value)) if (enabled) result.push(className);
+}
+function canonicalTokens(value) {
+	const tokens = [];
+	flatten(value, tokens);
+	return [...new Set(tokens)].sort();
+}
+function matches(rule, environment) {
+	if (rule.colorScheme && rule.colorScheme !== environment.colorScheme) return false;
+	if (!rule.platform) return true;
+	if (rule.platform === "native") return environment.platform !== "web";
+	return rule.platform === environment.platform;
+}
+function resolveRules(ids, manifest, environment) {
+	const normal = [];
+	const important = [];
+	for (const id of ids) {
+		const rule = manifest?.styleEntries?.[id];
+		if (rule) {
+			if (!matches(rule, environment)) continue;
+			(rule.important ? important : normal).push({
+				rule,
+				id
+			});
+			continue;
+		}
+		const fallbackIds = manifest?.staticLookup?.[id] ?? [];
+		if (fallbackIds.length) for (const fallbackId of fallbackIds) {
+			const fallbackRule = manifest.styleEntries?.[fallbackId];
+			if (!fallbackRule || !matches(fallbackRule, environment)) continue;
+			(fallbackRule.important ? important : normal).push({
+				rule: fallbackRule,
+				id: fallbackId
+			});
+		}
+		else for (const fallbackRule of manifest?.rules?.[id] ?? []) {
+			if (!matches(fallbackRule, environment)) continue;
+			(fallbackRule.important ? important : normal).push({
+				rule: fallbackRule,
+				id
+			});
+		}
+	}
+	const order = (left, right) => (left.rule.order ?? 0) - (right.rule.order ?? 0);
+	normal.sort(order);
+	important.sort(order);
+	const style = {};
+	const importantStyle = {};
+	for (const { rule } of normal) Object.assign(style, rule.style);
+	for (const { rule } of important) {
+		Object.assign(style, rule.style);
+		Object.assign(importantStyle, rule.style);
+	}
+	const normalIds = normal.map((item) => item.id);
+	const importantIds = important.map((item) => item.id);
+	const asStyleValue = (ids, fallback) => {
+		if (!styleSheetFactory) return fallback;
+		const values = ids.map((id) => nativeStyleSheet[id]).filter((value) => value !== void 0);
+		if (values.length === 1) return values[0];
+		if (values.length > 1) return values;
+		return fallback;
+	};
+	return {
+		style,
+		importantStyle,
+		styleValue: asStyleValue(normalIds, style),
+		importantValue: asStyleValue(importantIds, importantStyle)
+	};
+}
+function resolveDynamic(value, manifest, environment) {
+	const classNames = canonicalTokens(value);
+	return resolveRules(manifest?.staticLookup ? classNames.flatMap((className) => manifest.staticLookup?.[className] ?? []) : classNames, manifest, environment);
+}
+function rememberStyle(style, importantStyle) {
+	if (importantStyle && (typeof importantStyle !== "object" || Object.keys(importantStyle).length)) styleMetadata.set(style, { important: importantStyle });
+	return style;
+}
+function createNativeStyleRuntime(initialManifest) {
+	let manifest = initialManifest;
+	let environment = activeEnvironment;
+	const cache = /* @__PURE__ */ new Map();
+	const runtime = {
+		tw(value, requestedEnvironment = {}) {
+			const effectiveEnvironment = {
+				...environment,
+				...requestedEnvironment
+			};
+			const key = `${canonicalTokens(value).join("
")}|${effectiveEnvironment.colorScheme ?? ""}|${effectiveEnvironment.platform ?? ""}`;
+			const cached = cache.get(key);
+			if (cached) return cached;
+			const resolved = resolveDynamic(value, manifest, effectiveEnvironment);
+			const style = rememberStyle(resolved.styleValue, resolved.importantValue);
+			cache.set(key, style);
+			return style;
+		},
+		getStaticStyle(ids, requestedEnvironment = {}) {
+			const effectiveEnvironment = {
+				...environment,
+				...requestedEnvironment
+			};
+			const resolved = resolveRules(ids, manifest, effectiveEnvironment);
+			return rememberStyle(resolved.styleValue, resolved.importantValue);
+		},
+		composeStyle(tailwindStyle, inlineStyle) {
+			const important = styleMetadata.get(tailwindStyle)?.important;
+			return important !== void 0 ? [
+				tailwindStyle,
+				inlineStyle,
+				important
+			] : [tailwindStyle, inlineStyle];
+		},
+		setManifest(nextManifest) {
+			manifest = nextManifest;
+			cache.clear();
+			styleMetadata.clear();
+			createStyleSheet(nextManifest);
+			activeManifest = nextManifest;
+		},
+		setEnvironment(nextEnvironment) {
+			environment = nextEnvironment;
+			activeEnvironment = nextEnvironment;
+			cache.clear();
+		},
+		getManifest() {
+			return manifest;
+		}
+	};
+	if (initialManifest) {
+		createStyleSheet(initialManifest);
+		activeManifest = initialManifest;
+	}
+	return runtime;
+}
+const defaultRuntime = createNativeStyleRuntime();
+function setManifest(manifest) {
+	defaultRuntime.setManifest(manifest);
+}
+/** 由 Expo virtual module 注入，避免 runtime 引入 Node-only 的 require shim。 */
+function setStyleSheetFactory(factory) {
+	styleSheetFactory = factory;
+	if (activeManifest) createStyleSheet(activeManifest);
+}
+function setEnvironment(environment) {
+	defaultRuntime.setEnvironment(environment);
+}
+function getManifest() {
+	return activeManifest ?? defaultRuntime.getManifest();
+}
+function tw(value, environment) {
+	return defaultRuntime.tw(value, environment);
+}
+function getStaticStyle(ids, environment) {
+	return defaultRuntime.getStaticStyle(ids, environment);
+}
+function composeStyle(tailwindStyle, inlineStyle) {
+	return defaultRuntime.composeStyle(tailwindStyle, inlineStyle);
+}
+//#endregion
+export { composeStyle, createNativeStyleRuntime, getManifest, getStaticStyle, setEnvironment, setManifest, setStyleSheetFactory, tw };

package/dist/tailwind.cjs

@@ -0,0 +1,50 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_compiler = require("./compiler.cjs");
+let weapp_tailwindcss_generator = require("weapp-tailwindcss/generator");
+//#region src/tailwind.ts
+/**
+* 使用 weapp-tailwindcss 的 Tailwind v4 generator 生成原始 CSS，再编译为 RN manifest。
+*/
+async function generateNativeStylesheet(options = {}) {
+	const source = await (0, weapp_tailwindcss_generator.resolveTailwindV4Source)(options);
+	const generator = (0, weapp_tailwindcss_generator.createWeappTailwindcssGenerator)(source);
+	const sourcePatterns = options.sourceGlobs?.map((pattern) => ({
+		base: source.projectRoot,
+		pattern,
+		negated: false
+	}));
+	const generatorCandidates = new Set(options.candidates ?? []);
+	for (const candidate of generatorCandidates) {
+		const base = candidate.split(":").at(-1);
+		if (base && /^(?:ios|android|native):/.test(candidate)) generatorCandidates.add(base);
+	}
+	let generated = await generator.generate({
+		target: "web",
+		...generatorCandidates.size ? { candidates: generatorCandidates } : {},
+		scanSources: sourcePatterns ?? true
+	});
+	const platformBases = /* @__PURE__ */ new Set();
+	for (const candidate of generated.rawCandidates ?? []) {
+		const base = candidate.split(":").at(-1);
+		if (base && /^(?:ios|android|native):/.test(candidate) && !generated.classSet.has(base)) platformBases.add(base);
+	}
+	if (platformBases.size) generated = await generator.generate({
+		target: "web",
+		candidates: /* @__PURE__ */ new Set([...generatorCandidates, ...platformBases]),
+		scanSources: sourcePatterns ?? true
+	});
+	const classSet = new Set(generated.classSet);
+	const requestedCandidates = new Set(options.candidates ?? []);
+	for (const candidate of generated.rawCandidates ?? []) {
+		const base = candidate.split(":").at(-1);
+		if (base && generated.classSet.has(base) && /^(?:dark|ios|android|native):/.test(candidate)) requestedCandidates.add(candidate);
+	}
+	for (const candidate of requestedCandidates) classSet.add(candidate);
+	const manifest = require_compiler.compileNativeStylesheet(generated.rawCss, { classSet });
+	require_compiler.addNativeVariantRules(manifest, requestedCandidates);
+	require_compiler.finalizeNativeManifest(manifest);
+	generator.dispose?.();
+	return manifest;
+}
+//#endregion
+exports.generateNativeStylesheet = generateNativeStylesheet;

package/dist/tailwind.d.ts

@@ -0,0 +1,13 @@
+import { o as NativeStyleManifest } from "./types-BTxnqaRV.js";
+import { TailwindV4SourceOptions } from "weapp-tailwindcss/generator";
+//#region src/tailwind.d.ts
+interface GenerateNativeStylesheetOptions extends TailwindV4SourceOptions {
+  candidates?: Iterable<string> | undefined;
+  sourceGlobs?: string[] | undefined;
+}
+/**
+ * 使用 weapp-tailwindcss 的 Tailwind v4 generator 生成原始 CSS，再编译为 RN manifest。
+ */
+declare function generateNativeStylesheet(options?: GenerateNativeStylesheetOptions): Promise<NativeStyleManifest>;
+//#endregion
+export { GenerateNativeStylesheetOptions, generateNativeStylesheet };

package/dist/tailwind.js

@@ -0,0 +1,49 @@
+import { addNativeVariantRules, compileNativeStylesheet, finalizeNativeManifest } from "./compiler.js";
+import { createWeappTailwindcssGenerator, resolveTailwindV4Source } from "weapp-tailwindcss/generator";
+//#region src/tailwind.ts
+/**
+* 使用 weapp-tailwindcss 的 Tailwind v4 generator 生成原始 CSS，再编译为 RN manifest。
+*/
+async function generateNativeStylesheet(options = {}) {
+	const source = await resolveTailwindV4Source(options);
+	const generator = createWeappTailwindcssGenerator(source);
+	const sourcePatterns = options.sourceGlobs?.map((pattern) => ({
+		base: source.projectRoot,
+		pattern,
+		negated: false
+	}));
+	const generatorCandidates = new Set(options.candidates ?? []);
+	for (const candidate of generatorCandidates) {
+		const base = candidate.split(":").at(-1);
+		if (base && /^(?:ios|android|native):/.test(candidate)) generatorCandidates.add(base);
+	}
+	let generated = await generator.generate({
+		target: "web",
+		...generatorCandidates.size ? { candidates: generatorCandidates } : {},
+		scanSources: sourcePatterns ?? true
+	});
+	const platformBases = /* @__PURE__ */ new Set();
+	for (const candidate of generated.rawCandidates ?? []) {
+		const base = candidate.split(":").at(-1);
+		if (base && /^(?:ios|android|native):/.test(candidate) && !generated.classSet.has(base)) platformBases.add(base);
+	}
+	if (platformBases.size) generated = await generator.generate({
+		target: "web",
+		candidates: /* @__PURE__ */ new Set([...generatorCandidates, ...platformBases]),
+		scanSources: sourcePatterns ?? true
+	});
+	const classSet = new Set(generated.classSet);
+	const requestedCandidates = new Set(options.candidates ?? []);
+	for (const candidate of generated.rawCandidates ?? []) {
+		const base = candidate.split(":").at(-1);
+		if (base && generated.classSet.has(base) && /^(?:dark|ios|android|native):/.test(candidate)) requestedCandidates.add(candidate);
+	}
+	for (const candidate of requestedCandidates) classSet.add(candidate);
+	const manifest = compileNativeStylesheet(generated.rawCss, { classSet });
+	addNativeVariantRules(manifest, requestedCandidates);
+	finalizeNativeManifest(manifest);
+	generator.dispose?.();
+	return manifest;
+}
+//#endregion
+export { generateNativeStylesheet };

package/dist/types-BTxnqaRV.d.ts

@@ -0,0 +1,48 @@
+//#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[];
+  rules: Record<string, NativeStyleRule[]>;
+  /** 可直接交给 StyleSheet.create 的稳定规则表。 */
+  styleSheet?: Record<string, Record<string, unknown>>;
+  /** styleSheet 规则的条件和优先级元数据。 */
+  styleEntries?: Record<string, NativeStyleRule>;
+  /** 每个 class token 对应的静态 style ID，Babel 编译结果直接使用它。 */
+  staticLookup?: Record<string, string[]>;
+  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 {
+  tw: (value: NativeClassValue, environment?: NativeStyleEnvironment) => NativeStyleValue;
+  getStaticStyle: (ids: readonly string[], environment?: NativeStyleEnvironment) => NativeStyleValue;
+  composeStyle: (tailwindStyle: NativeStyleValue, inlineStyle: unknown) => NativeStyleValue[];
+  setManifest: (manifest: NativeStyleManifest) => void;
+  setEnvironment: (environment: NativeStyleEnvironment) => void;
+  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 };

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@weapp-tailwindcss/react-native",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Tailwind CSS 4 compiler and Expo Metro integration for React Native.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sonofmagic/weapp-tailwindcss.git",
+    "directory": "packages/react-native"
+  },
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./compiler": {
+      "types": "./dist/compiler.d.ts",
+      "import": "./dist/compiler.js",
+      "require": "./dist/compiler.cjs"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.js",
+      "require": "./dist/tailwind.cjs"
+    },
+    "./babel": {
+      "types": "./dist/babel.d.ts",
+      "import": "./dist/babel.js",
+      "require": "./dist/babel.cjs"
+    },
+    "./metro": {
+      "types": "./dist/metro.d.ts",
+      "import": "./dist/metro.js",
+      "require": "./dist/metro.cjs"
+    },
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.js",
+      "require": "./dist/runtime.cjs"
+    },
+    "./env": {
+      "types": "./dist/env.d.ts",
+      "import": "./dist/env.js",
+      "require": "./dist/env.cjs"
+    },
+    "./metro-transformer": {
+      "types": "./dist/metro-transformer.d.ts",
+      "import": "./dist/metro-transformer.js",
+      "require": "./dist/metro-transformer.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@babel/core": ">=7.22.0",
+    "expo": ">=54.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
+    "expo": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@babel/types": "^8.0.4",
+    "postcss": "^8.5.22",
+    "weapp-tailwindcss": "^5.2.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^8.0.1",
+    "vitest": "^4.1.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "bench": "vitest bench",
+    "test:dev": "vitest",
+    "lint": "eslint .",
+    "release": "pnpm publish"
+  }
+}