@tamagui/static 3.0.0-beta.831.1 → 3.0.0-beta.889.1

package/dist/cjs/compiler.cjs

@@ -35,6 +35,7 @@ var import_compiler_core = require("@tamagui/compiler-core");
 var import_node_fs = require("node:fs");
 var import_node_module = require("node:module");
 var import_node_path = __toESM(require("node:path"), 1);
+var import_componentDiscovery = require("./componentDiscovery.cjs");
 var import_compilerHost = require("./compilerHost.cjs");
 var import_domStructuralPass = require("./domStructuralPass.cjs");
 var import_loadTamagui = require("./extractor/loadTamagui.cjs");
@@ -123,6 +124,7 @@ var CompilerFrontend = class {
 	planCaches = /* @__PURE__ */ new Map();
 	moduleRecords = /* @__PURE__ */ new Map();
 	moduleContext = null;
+	discovery = new import_componentDiscovery.ComponentDiscovery();
 	/**
 	* One cache per project root and platform. Absent when the project produced
 	* no content stamp, in which case plans are never persisted rather than
@@ -216,14 +218,18 @@ var CompilerFrontend = class {
 		if (!projectInfo.tamaguiConfig || !projectInfo.components) {
 			throw new Error("The compiler requires evaluated Tamagui config and components");
 		}
+		const componentModules = input.project.componentModules.map((component) => ({
+			moduleName: component.moduleName,
+			resolvedId: cleanId(component.id)
+		}));
+		const registry = (0, import_compilerHost.createComponentRegistry)(projectInfo.components, componentModules);
+		this.discovery.seed(registry);
 		const host = (0, import_compilerHost.createTamaguiCompilerHost)({
 			target: input.target,
 			tamaguiConfig: projectInfo.tamaguiConfig,
 			components: projectInfo.components,
-			componentModules: input.project.componentModules.map((component) => ({
-				moduleName: component.moduleName,
-				resolvedId: cleanId(component.id)
-			})),
+			componentModules,
+			registry,
 			disablePartialExtraction: input.project.disablePartialExtraction,
 			experimentalNativeFastPath: input.project.experimentalNativeFastPath,
 			zeroRuntime: input.project.zeroRuntime
@@ -237,7 +243,8 @@ var CompilerFrontend = class {
 				planCache: this.planCacheFor(input),
 				async load(id) {
 					return modules.get(id) ?? null;
-				}
+				},
+				prepare: (module2) => this.discovery.prepare(module2, registry, input.evaluate)
 			},
 			structuralPass: import_domStructuralPass.domStructuralPass
 		});
@@ -248,10 +255,15 @@ var CompilerFrontend = class {
 			invalidatedIds: [...invalidated].sort()
 		};
 	}
+	/** host-resolved ids of every module discovery found components in */
+	discoveredModuleIds() {
+		return this.discovery.ids();
+	}
 	async buildTree(input) {
 		const moduleContext = compilerContext(input);
 		if (this.moduleContext !== moduleContext) {
 			this.moduleRecords.clear();
+			this.discovery.clear();
 			this.moduleContext = moduleContext;
 		}
 		const componentBySpecifier = new Map(input.project.componentModules.map((component) => [component.moduleName, (0, import_compiler_core.resolvedModuleId)(cleanId(component.id))]));

package/dist/cjs/compilerHost.cjs

@@ -19,7 +19,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var compilerHost_exports = {};
-__export(compilerHost_exports, { createTamaguiCompilerHost: () => createTamaguiCompilerHost });
+__export(compilerHost_exports, {
+	createComponentRegistry: () => createComponentRegistry,
+	createTamaguiCompilerHost: () => createTamaguiCompilerHost
+});
 module.exports = __toCommonJS(compilerHost_exports);
 var import_compiler_core = require("@tamagui/compiler-core");
 var import_helpers = require("@tamagui/helpers");
@@ -28,6 +31,12 @@ var import_tooling = require("@tamagui/style-grammar/tooling");
 var import_web = require("@tamagui/web");
 var import_concatClassName = require("./extractor/concatClassName.cjs");
 var import_requireTamaguiCore = require("./helpers/requireTamaguiCore.cjs");
+function createComponentRegistry(components, componentModules) {
+	return {
+		modulesById: new Map(componentModules.map((module2) => [module2.resolvedId, module2.moduleName])),
+		componentsByModule: new Map(components.map((component) => [component.moduleName, component]))
+	};
+}
 const DOM_FRONTENDS = /* @__PURE__ */ new Set([
 	"tamagui",
 	"tamagui/dom",
@@ -236,6 +245,11 @@ const runtimeAnimationProps = /* @__PURE__ */ new Set([
 	"animatePresence",
 	"animatedBy"
 ]);
+const componentOnlyProps = /* @__PURE__ */ new Set([
+	"asChild",
+	"disableOptimization",
+	"themeInverse"
+]);
 const cssShorthandConflicts = {
 	background: [
 		"backgroundAttachment",
@@ -412,6 +426,12 @@ const cssShorthandConflicts = {
 	]
 };
 const cssConflictFamilies = [
+	/* @__PURE__ */ new Set(["width", "inlineSize"]),
+	/* @__PURE__ */ new Set(["minWidth", "minInlineSize"]),
+	/* @__PURE__ */ new Set(["maxWidth", "maxInlineSize"]),
+	/* @__PURE__ */ new Set(["height", "blockSize"]),
+	/* @__PURE__ */ new Set(["minHeight", "minBlockSize"]),
+	/* @__PURE__ */ new Set(["maxHeight", "maxBlockSize"]),
 	/* @__PURE__ */ new Set([
 		"marginInline",
 		"marginInlineEnd",
@@ -723,6 +743,7 @@ function webDOMProps(input, tag) {
 function createTamaguiCompilerHost(options) {
 	const platform = options.target === "native" ? "native" : "web";
 	const core = (0, import_requireTamaguiCore.requireTamaguiCore)(platform);
+	const compilerVariantStyleResolver = core.styled(core.View, {}).staticConfig.variantStyleResolver;
 	const firstThemeName = Object.keys(options.tamaguiConfig.themes ?? {})[0] ?? "";
 	const firstTheme = options.tamaguiConfig.themes?.[firstThemeName] ?? {};
 	const theme = firstTheme;
@@ -745,6 +766,27 @@ function createTamaguiCompilerHost(options) {
 		}
 		return false;
 	};
+	const platformModifiersRegistered = modifierRegistry.get("web") === "platform" && modifierRegistry.get("native") === "platform";
+	const nativeClauseValue = (value) => {
+		if (typeof value !== "string" || !flatClausePattern.test(value)) {
+			return isClauseObjectValue(value) ? "live" : null;
+		}
+		if (!platformModifiersRegistered) return "live";
+		const parsed = (0, import_tooling.parseValue)(value, modifierRegistry);
+		if (!parsed.ok || parsed.value.clauses.length === 0) return "live";
+		let payload = parsed.value.base;
+		let matched = parsed.value.base !== null;
+		for (const clause of parsed.value.clauses) {
+			if (clause.modifiers.includes("web")) continue;
+			if (clause.modifiers.length !== 1 || clause.modifiers[0] !== "native") return "live";
+			payload = clause.payload;
+			matched = true;
+		}
+		return {
+			payload,
+			matched
+		};
+	};
 	const configuredAnimationDriver = options.tamaguiConfig.animations;
 	const configuredCssAnimationDriver = platform === "web" && configuredAnimationDriver?.outputStyle === "css" && !options.tamaguiConfig.animationDrivers ? configuredAnimationDriver : null;
 	const resolveStaticCssTransition = (value, transitionPresets) => {
@@ -783,8 +825,7 @@ function createTamaguiCompilerHost(options) {
 		}
 		return resolved.join(" ");
 	};
-	const modulesById = new Map(options.componentModules.map((module2) => [module2.resolvedId, module2.moduleName]));
-	const componentsByModule = new Map(options.components.map((component) => [component.moduleName, component]));
+	const { modulesById, componentsByModule } = options.registry ?? createComponentRegistry(options.components, options.componentModules);
 	const normalizedStyleConfigs = /* @__PURE__ */ new WeakMap();
 	const normalizeStaticConfig = (staticConfig) => {
 		if (!staticConfig.styleFrontend) return staticConfig;
@@ -840,7 +881,7 @@ function createTamaguiCompilerHost(options) {
 				isInput: row.backing === "textinput",
 				validStyles: {
 					...import_helpers.validStyles,
-					...import_helpers.stylePropsText
+					...row.backing === "textinput" ? import_helpers.stylePropsInput : import_helpers.stylePropsText
 				},
 				defaultProps: {
 					...base.defaultProps,
@@ -851,6 +892,10 @@ function createTamaguiCompilerHost(options) {
 	};
 	const styledStaticConfig = (definition) => {
 		if (!definition || definition.options.kind !== "static") return null;
+		const staticConfig = definition.staticConfig;
+		if (staticConfig && (staticConfig.kind !== "static" || !staticObject(staticConfig.value))) {
+			return null;
+		}
 		const base = directStaticConfig({
 			kind: "element",
 			form: "jsx",
@@ -865,30 +910,33 @@ function createTamaguiCompilerHost(options) {
 		if (!base || !staticObject(definition.options.value)) return null;
 		const { variants, defaultVariants, displayName, context, contextProps, ...defaultProps } = definition.options.value;
 		const baseClassName = definition.baseClassName?.kind === "static" && typeof definition.baseClassName.value === "string" ? definition.baseClassName.value : void 0;
+		const localStaticConfig = {
+			...base.staticConfig,
+			...staticConfig?.value,
+			variants: {
+				...base.staticConfig.variants,
+				...variants
+			},
+			defaultProps: {
+				...base.staticConfig.defaultProps,
+				...defaultProps,
+				...defaultVariants
+			},
+			defaultVariants,
+			baseClassName: [base.staticConfig.baseClassName, baseClassName].filter(Boolean).join(" "),
+			context: context ?? base.staticConfig.context,
+			contextProps: context ? contextProps : contextProps ?? base.staticConfig.contextProps
+		};
+		localStaticConfig.variantStyleResolver = compilerVariantStyleResolver;
 		return {
 			key: componentKey(definition.id, definition.name),
 			displayName: displayName || base.displayName,
-			staticConfig: normalizeStaticConfig({
-				...base.staticConfig,
-				variants: {
-					...base.staticConfig.variants,
-					...variants
-				},
-				defaultProps: {
-					...base.staticConfig.defaultProps,
-					...defaultProps,
-					...defaultVariants
-				},
-				defaultVariants,
-				baseClassName: [base.staticConfig.baseClassName, baseClassName].filter(Boolean).join(" "),
-				context: context ?? base.staticConfig.context,
-				contextProps: context ? contextProps : contextProps ?? base.staticConfig.contextProps
-			})
+			staticConfig: normalizeStaticConfig(localStaticConfig)
 		};
 	};
 	const resolve = (element, styledDefinition) => {
 		const dom = domStaticConfig(element);
-		const resolved = dom ?? styledStaticConfig(styledDefinition) ?? directStaticConfig(element);
+		const resolved = dom ?? directStaticConfig(element) ?? styledStaticConfig(styledDefinition);
 		if (!resolved) return null;
 		const defaultProps = resolved.staticConfig.defaultProps ?? {};
 		return {
@@ -918,8 +966,8 @@ function createTamaguiCompilerHost(options) {
 	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && !runtimeOnlyStyleProps.has(name);
 	const isInvalidHostStyleProp = (name, component) => {
 		const staticConfig = component.staticConfig;
-		const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
-		return name in import_helpers.stylePropsAll && !(0, import_web.isValidStyleKey)(name, validStyles, staticConfig.accept);
+		const validStyles = staticConfig.validStyles || (staticConfig.isInput ? import_helpers.stylePropsInput : staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles);
+		return name in import_helpers.stylePropsAll && !(0, import_web.isValidStyleKey)(name, validStyles);
 	};
 	const directStyleName = (name, component) => {
 		if (compilerStyleProps.has(name) || name === "style") {
@@ -941,6 +989,7 @@ function createTamaguiCompilerHost(options) {
 		process.env.TAMAGUI_TARGET = platform;
 		try {
 			return core.getSplitStyles(props, staticConfig, theme, firstThemeName, componentState, {
+				isStatic: true,
 				resolveValues: platform === "native" ? "except-theme" : "variable",
 				noClass: platform === "native",
 				isAnimated: false,
@@ -1063,6 +1112,9 @@ function createTamaguiCompilerHost(options) {
 			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) {
 				return true;
 			}
+			if (component.staticConfig.resolvers?.length) {
+				return false;
+			}
 			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
 		},
 		developmentDebugInstrumentation,
@@ -1093,9 +1145,30 @@ function createTamaguiCompilerHost(options) {
 					props[entry.name] = entry.value.value;
 				}
 			}
-			const disableOptimizationEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "disableOptimization");
-			if (disableOptimizationEntry || "disableOptimization" in props) {
-				return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimizationEntry?.span);
+			if (component.staticConfig.resolvers?.length) {
+				const unresolvedProps = input.element.entries.filter((entry) => entry.kind === "prop" && entry.value.kind !== "static");
+				const onlyStaticBranchConditional = unresolvedProps.length === 1 && unresolvedProps[0]?.kind === "prop" && unresolvedProps[0].value.kind === "conditional" && canLowerConditionalStyleProp(unresolvedProps[0].name, component);
+				const unresolvedProp = onlyStaticBranchConditional ? void 0 : unresolvedProps[0];
+				if (unresolvedProp?.kind === "prop") {
+					return bailout(input, "local/dynamic-style-value", `Component resolver prop ${unresolvedProp.name} could not be evaluated`, unresolvedProp.span, void 0, unresolvedProp.name);
+				}
+			}
+			const componentOnlyProp = (name) => {
+				let span;
+				let unknown = false;
+				for (const entry of input.element.entries) {
+					if (entry.kind !== "prop" || entry.name !== name) continue;
+					span = entry.span;
+					if (entry.value.kind !== "static") unknown = true;
+				}
+				return {
+					unknown,
+					span
+				};
+			};
+			const disableOptimization = componentOnlyProp("disableOptimization");
+			if (disableOptimization.unknown || props.disableOptimization) {
+				return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimization.span);
 			}
 			if (component.domTag && props.hidden) props.display = "none";
 			if (component.domTag && platform === "native") {
@@ -1162,7 +1235,7 @@ function createTamaguiCompilerHost(options) {
 					const expression = input.source.slice(entry.value.span.start, entry.value.span.end);
 					if (resolvedCssTransition !== null && (name === "opacity" || name === "scale")) {
 						property = name === "opacity" ? `opacity: (${expression})` : `transform: "scale(" + (${expression}) + ")"`;
-					} else if (entry.value.kind === "bailout" && owners.size === 1 && owners.has(name)) {
+					} else if (entry.value.kind === "bailout" && owners.has(name)) {
 						const dynamic = entry.value.dynamic;
 						if (dynamic?.type === "number") {
 							property = `${JSON.stringify(name)}: (${expression})`;
@@ -1200,16 +1273,19 @@ function createTamaguiCompilerHost(options) {
 				}
 			}
 			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicHostStyleProperties === null && dynamicStyleEntries.length > 0 && dynamicStyleEntries.every((entry) => entry.kind === "prop" && entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component));
-			if ("theme" in props || "themeInverse" in props) {
-				const themeProp = "theme" in props ? "theme" : "themeInverse";
+			const themeEntry = componentOnlyProp("theme");
+			const themeInverseEntry = componentOnlyProp("themeInverse");
+			const themeBoundary = themeEntry.unknown || "theme" in props;
+			if (themeBoundary || themeInverseEntry.unknown || props.themeInverse) {
+				const themeProp = themeBoundary ? "theme" : "themeInverse";
 				return bailout(input, "local/unsupported-target", "Theme boundary candidates remain on the runtime path", input.element.span, {
 					rule: 4,
 					message: (0, import_compiler_core.zeroThemeBoundaryMessage)(input.element.component.name, themeProp)
 				});
 			}
-			const asChildEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "asChild");
-			if (asChildEntry || "asChild" in props) {
-				return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChildEntry?.span);
+			const asChild = componentOnlyProp("asChild");
+			if (asChild.unknown || props.asChild) {
+				return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChild.span);
 			}
 			if (platform === "native" && ("group" in props || "container" in props || "containerName" in props || "containerType" in props)) {
 				return bailout(input, "local/unsupported-target", "Native group and container providers remain on the runtime path");
@@ -1308,12 +1384,17 @@ function createTamaguiCompilerHost(options) {
 				const entry = dynamicStyleEntries[0];
 				return bailout(input, "local/dynamic-style-value", `Style prop ${entry.kind === "prop" ? entry.name : "unknown"} could not be safely extracted`, entry.span);
 			}
-			const staticDefaultProps = component.staticConfig.defaultProps ?? {};
+			const resolvedStyleStaticConfig = core.getStyleStaticConfig(component.staticConfig, core.getConfig());
+			const staticDefaultProps = resolvedStyleStaticConfig.defaultProps ?? {};
 			const defaultProps = platform === "web" && !component.staticConfig.isText && options.tamaguiConfig.settings.defaultPosition === "relative" && staticDefaultProps.position === void 0 ? core.mergeProps({ position: "relative" }, staticDefaultProps) : staticDefaultProps;
 			let completeProps = core.mergeProps(defaultProps, props);
 			if (platform === "native" && component.domTag && props.display === "flex") {
 				completeProps = core.mergeProps(core.mergeProps(defaultProps, import_dom.NATIVE_FLEX_DEFAULTS), props);
 			}
+			const domStyleProgram = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "style" && entry.value.kind === "dom-style");
+			if (platform === "native" && !component.domTag && domStyleProgram) {
+				return bailout(input, "local/unsupported-target", "Native style() pieces remain on the runtime path");
+			}
 			const propsForConditional = (target, value) => {
 				const branchProps = {};
 				for (const entry of input.element.entries) {
@@ -1341,6 +1422,14 @@ function createTamaguiCompilerHost(options) {
 					}
 				}
 				const branchCompleteProps = platform === "native" && component.domTag && branchProps.display === "flex" ? core.mergeProps(core.mergeProps(defaultProps, import_dom.NATIVE_FLEX_DEFAULTS), branchProps) : core.mergeProps(defaultProps, branchProps);
+				if (platform === "native") {
+					for (const [name, value2] of Object.entries(branchCompleteProps)) {
+						const clause = isStyleProp(name, component) ? nativeClauseValue(value2) : null;
+						if (clause === null || clause === "live") continue;
+						if (clause.matched) branchCompleteProps[name] = clause.payload;
+						else delete branchCompleteProps[name];
+					}
+				}
 				return {
 					branchProps,
 					branchCompleteProps
@@ -1349,10 +1438,30 @@ function createTamaguiCompilerHost(options) {
 			if (platform === "native") {
 				const isClauseValue = (name, value) => isStyleProp(name, component) && (typeof value === "string" && flatClausePattern.test(value) || isClauseObjectValue(value));
 				const defaultVariants = component.staticConfig.defaultVariants ?? {};
-				const carriesClause = Object.entries(completeProps).some(([name, value]) => isClauseValue(name, value)) || Object.entries(component.staticConfig.variants ?? {}).some(([variantName, definitions]) => (completeProps[variantName] !== void 0 || defaultVariants[variantName] !== void 0) && staticObject(definitions) && Object.values(definitions).some((definition) => staticObject(definition) && Object.entries(definition).some(([name, value]) => isClauseValue(name, value))));
-				if (carriesClause) {
+				const definitionCarriesClause = Object.entries(resolvedStyleStaticConfig.baseStyle ?? {}).some(([name, value]) => isClauseValue(name, value)) || Object.entries(component.staticConfig.variants ?? {}).some(([variantName, definitions]) => (completeProps[variantName] !== void 0 || defaultVariants[variantName] !== void 0) && staticObject(definitions) && Object.values(definitions).some((definition) => staticObject(definition) && Object.entries(definition).some(([name, value]) => isClauseValue(name, value))));
+				if (definitionCarriesClause) {
 					return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
 				}
+				const reducedProps = {};
+				for (const [name, value] of Object.entries(completeProps)) {
+					const clause = isStyleProp(name, component) ? nativeClauseValue(value) : null;
+					if (clause === "live") {
+						return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+					}
+					if (clause === null) {
+						reducedProps[name] = value;
+						continue;
+					}
+					if (clause.matched) reducedProps[name] = clause.payload;
+				}
+				completeProps = reducedProps;
+				for (const entry of dynamicStyleEntries) {
+					if (entry.value.kind !== "conditional") continue;
+					for (const leaf of (0, import_compiler_core.collectLeaves)(entry.value.tree)) {
+						if (nativeClauseValue(leaf.value) !== "live") continue;
+						return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+					}
+				}
 			}
 			const split = resolveSplitStyles(completeProps, component.staticConfig, cssAnimationDriver, component.displayName);
 			if (!split) {
@@ -1364,7 +1473,6 @@ function createTamaguiCompilerHost(options) {
 					message: (0, import_compiler_core.zeroRuleMessage)(5, { detail: `an enter or exit style program on ${input.element.component.name}` })
 				});
 			}
-			const domStyleProgram = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "style" && entry.value.kind === "dom-style");
 			const flatTag = component.domTag ?? (typeof props.render === "string" ? props.render : typeof defaultProps.render === "string" ? defaultProps.render : component.staticConfig.isText ? "span" : "div");
 			const tagEdits = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
 				start: span.start,
@@ -1372,7 +1480,7 @@ function createTamaguiCompilerHost(options) {
 				content: input.element.form === "jsx" ? flatTag : JSON.stringify(flatTag),
 				origin: span
 			}));
-			const isPropIgnored = (name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component);
+			const isPropIgnored = (name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component) || componentOnlyProps.has(name);
 			const spreadReplacement = (form, entry) => spreadNonStyleReplacement(form, entry, isPropIgnored, (name, value) => {
 				if (platform !== "web") return [name, value];
 				if (name === "testID") return ["data-testid", value];
@@ -1382,7 +1490,7 @@ function createTamaguiCompilerHost(options) {
 				}
 				return [name, value];
 			});
-			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && (isStyleProp(entry.name, component) || isInvalidHostStyleProp(entry.name, component)) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some((name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component)));
+			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && isPropIgnored(entry.name) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some(isPropIgnored));
 			let invalidHostStyle;
 			for (const entry of input.element.entries) {
 				if (entry.kind === "prop") {
@@ -2050,7 +2158,7 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 		}
 	};
 }
-function bailout(input, code, message, span = input.element.span, zero) {
+function bailout(input, code, message, span = input.element.span, zero, prop) {
 	return {
 		ok: false,
 		bailout: {
@@ -2059,6 +2167,7 @@ function bailout(input, code, message, span = input.element.span, zero) {
 			message,
 			span,
 			component: input.element.component.name,
+			...prop && { prop },
 			...zero && {
 				zeroRule: zero.rule,
 				zeroMessage: zero.message

package/dist/cjs/componentDiscovery.cjs

@@ -0,0 +1,94 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var componentDiscovery_exports = {};
+__export(componentDiscovery_exports, { ComponentDiscovery: () => ComponentDiscovery });
+module.exports = __toCommonJS(componentDiscovery_exports);
+var import_node_path = __toESM(require("node:path"), 1);
+var import_bundleConfig = require("./extractor/bundleConfig.cjs");
+const packageSpecifier = /^(?:@[^/@\s]+\/)?[^./~@\s][^/\s]*(?:\/|$)/;
+function isPackageSpecifier(specifier) {
+	return packageSpecifier.test(specifier);
+}
+var ComponentDiscovery = class {
+	/** null records a module that had no components or could not evaluate */
+	#discovered = /* @__PURE__ */ new Map();
+	clear() {
+		this.#discovered.clear();
+	}
+	/** host-resolved ids of every module discovery found components in */
+	ids() {
+		return [...this.#discovered].filter(([, loaded]) => loaded !== null).map(([id]) => id).sort();
+	}
+	/** re-register everything found so far into a freshly built registry */
+	seed(registry) {
+		for (const [id, loaded] of this.#discovered) {
+			if (!loaded) continue;
+			registry.modulesById.set(id, id);
+			registry.componentsByModule.set(id, loaded);
+		}
+	}
+	async prepare(module2, registry, evaluate) {
+		if (!evaluate) return;
+		const seen = /* @__PURE__ */ new Set();
+		const provenances = [...module2.elements.map((element) => element.component.provenance), ...module2.styledDefinitions.map((definition) => definition.base.provenance)];
+		for (const provenance of provenances) {
+			if (!provenance || !isPackageSpecifier(provenance.specifier)) continue;
+			const id = provenance.resolvedId.split(/[?#]/, 1)[0];
+			if (seen.has(id) || registry.modulesById.has(id) || this.#discovered.has(id)) {
+				continue;
+			}
+			seen.add(id);
+			if (!import_node_path.default.isAbsolute(id)) {
+				this.#discovered.set(id, null);
+				continue;
+			}
+			let loaded = null;
+			try {
+				const exports = await evaluate({
+					id,
+					specifier: provenance.specifier
+				});
+				if (exports) {
+					const nameToInfo = (0, import_bundleConfig.getComponentStaticConfigByName)(id, exports.default ?? exports);
+					if (Object.keys(nameToInfo).length) loaded = {
+						moduleName: id,
+						nameToInfo
+					};
+				}
+			} catch (error) {
+				if (process.env.DEBUG === "tamagui") {
+					console.info(`[tamagui] component discovery skipped ${id}:`, error);
+				}
+			}
+			this.#discovered.set(id, loaded);
+			if (loaded) {
+				registry.modulesById.set(id, id);
+				registry.componentsByModule.set(id, loaded);
+			}
+		}
+	}
+};

package/dist/cjs/domStructuralPass.cjs

@@ -31,6 +31,11 @@ const DOM_FRONTENDS = /* @__PURE__ */ new Set([
 	"@tamagui/core/dom",
 	"@tamagui/tailwind"
 ]);
+const RUNTIME_STYLE_FRONTENDS = /* @__PURE__ */ new Set([
+	"tamagui",
+	"@tamagui/core",
+	"@tamagui/web"
+]);
 const acceptsTag = (accepted, tag) => accepted === "*" || accepted.includes(tag);
 function isDOMElement(element) {
 	const provenance = element.component.provenance;
@@ -43,7 +48,7 @@ const versionHash = (0, import_node_crypto.createHash)("sha256").update(JSON.str
 	TAGS: import_dom.TAGS
 })).digest("hex");
 const domStructuralPass = {
-	versionHash: `dom-structural-v3-${versionHash}`,
+	versionHash: `dom-structural-v4-${versionHash}`,
 	transform({ module: module2, source, target }) {
 		const edits = [];
 		const diagnostics = [];
@@ -92,10 +97,15 @@ const domStructuralPass = {
 				diagnostics.push((0, import_compiler_core.localBailout)("local/dynamic-style-value", definition.value.span, `style() definition ${definition.name} must be statically evaluable`));
 				continue;
 			}
+			const isRuntimeStyle = RUNTIME_STYLE_FRONTENDS.has(definition.factory.specifier);
+			if (isRuntimeStyle && (!definition.value.value || typeof definition.value.value !== "object" || Array.isArray(definition.value.value))) {
+				diagnostics.push((0, import_compiler_core.localBailout)("local/dynamic-style-value", definition.value.span, `style() definition ${definition.name} must be an object literal`));
+				continue;
+			}
 			edits.push({
 				start: definition.span.start,
 				end: definition.span.end,
-				content: "undefined",
+				content: isRuntimeStyle ? `({ className: "", [Symbol.for("tamagui.stylePiece")]: { byKey: {}, styleObject: ${JSON.stringify(definition.value.value)} } })` : "undefined",
 				origin: definition.span
 			});
 		}

package/dist/cjs/exports.cjs

@@ -23,7 +23,8 @@ var exports_exports = {};
 __export(exports_exports, {
 	clearFormatCache: () => import_detectModuleFormat.clearFormatCache,
 	detectModuleFormat: () => import_detectModuleFormat.detectModuleFormat,
-	esbundleTamaguiConfig: () => import_bundle.esbundleTamaguiConfig
+	esbundleTamaguiConfig: () => import_bundle.esbundleTamaguiConfig,
+	evaluateComponentModule: () => import_bundleConfig.evaluateComponentModule
 });
 module.exports = __toCommonJS(exports_exports);
 __reExport(exports_exports, require("./checkDeps.cjs"), module.exports);
@@ -33,6 +34,8 @@ __reExport(exports_exports, require("./types.cjs"), module.exports);
 __reExport(exports_exports, require("./constants.cjs"), module.exports);
 __reExport(exports_exports, require("./extractor/concatClassName.cjs"), module.exports);
 __reExport(exports_exports, require("./extractor/loadTamagui.cjs"), module.exports);
+var import_bundleConfig = require("./extractor/bundleConfig.cjs");
+__reExport(exports_exports, require("./componentDiscovery.cjs"), module.exports);
 __reExport(exports_exports, require("./extractor/watchTamaguiConfig.cjs"), module.exports);
 __reExport(exports_exports, require("./registerRequire.cjs"), module.exports);
 var import_detectModuleFormat = require("./extractor/detectModuleFormat.cjs");

package/dist/cjs/extractor/bundleConfig.cjs

@@ -29,6 +29,7 @@ __export(bundleConfig_exports, {
 	bundleConfig: () => bundleConfig,
 	esbuildOptions: () => esbuildOptions,
 	esbuildOptionsWithPlugins: () => esbuildOptionsWithPlugins,
+	evaluateComponentModule: () => evaluateComponentModule,
 	getBundledConfig: () => getBundledConfig,
 	getComponentStaticConfigByName: () => getComponentStaticConfigByName,
 	getLoadedConfig: () => getLoadedConfig,
@@ -483,6 +484,28 @@ async function loadComponents(props, forceExports = false) {
 	const otherComponents = await loadComponentsInner(props, forceExports);
 	return [...coreComponents, ...otherComponents];
 }
+async function evaluateComponentModule(props, id) {
+	const previousIsStatic = process.env.IS_STATIC;
+	const previousIsServer = process.env.TAMAGUI_IS_SERVER;
+	process.env.IS_STATIC = "is_static";
+	process.env.TAMAGUI_IS_SERVER = "true";
+	const { unregister } = (0, import_registerRequire.registerRequire)(props.platform || "web", { ignoredModules: props.dangerouslyIgnoreStaticEvaluationModules });
+	try {
+		try {
+			return nodeRequire(id);
+		} catch (error) {
+			const code = error?.code;
+			if (code !== "ERR_REQUIRE_ESM" && code !== "ERR_REQUIRE_ASYNC_MODULE") throw error;
+		}
+	} finally {
+		unregister();
+		if (previousIsStatic === void 0) delete process.env.IS_STATIC;
+		else process.env.IS_STATIC = previousIsStatic;
+		if (previousIsServer === void 0) delete process.env.TAMAGUI_IS_SERVER;
+		else process.env.TAMAGUI_IS_SERVER = previousIsServer;
+	}
+	return import(`${(0, import_node_url.pathToFileURL)(id).href}?v=${import_fs_extra.default.statSync(id).mtimeMs}`);
+}
 function loadComponentsSync(props, forceExports = false) {
 	const coreComponents = getCoreComponentsSync(props);
 	const otherComponents = loadComponentsInnerSync(props, forceExports);