@tamagui/static 2.0.0-rc.3 → 2.0.0-rc.30

package/dist/extractor/createExtractor.cjs

@@ -39,7 +39,9 @@ var import_traverse = __toESM(require("@babel/traverse")),
   import_cli_color = require("@tamagui/cli-color"),
   reactNativeWebInternals = __toESM(require("@tamagui/react-native-web-internals")),
   import_web = require("@tamagui/web"),
+  import_node_fs = require("node:fs"),
   import_node_path = require("node:path"),
+  import_typescript = require("typescript"),
   import_constants = require("../constants.cjs"),
   import_requireTamaguiCore = require("../helpers/requireTamaguiCore.cjs"),
   import_createEvaluator = require("./createEvaluator.cjs"),
@@ -54,7 +56,8 @@ var import_traverse = __toESM(require("@babel/traverse")),
   import_propsToFontFamilyCache = require("./propsToFontFamilyCache.cjs"),
   import_timer = require("./timer.cjs"),
   import_validHTMLAttributes = require("./validHTMLAttributes.cjs"),
-  import_errors = require("./errors.cjs");
+  import_errors = require("./errors.cjs"),
+  import_esbuildTsconfigPaths = require("./esbuildTsconfigPaths.cjs");
 const UNTOUCHED_PROPS = {
     key: !0,
     style: !0,
@@ -80,6 +83,29 @@ function createExtractor({
         onHoverOut: "onMouseLeave",
         onPressIn: "onMouseDown",
         onPressOut: "onMouseUp"
+      }),
+      ...(platform === "native" && {
+        // native view props that should pass through without preventing flattening
+        testID: "testID",
+        nativeID: "nativeID",
+        accessibilityLabel: "accessibilityLabel",
+        accessibilityHint: "accessibilityHint",
+        accessibilityRole: "accessibilityRole",
+        accessibilityState: "accessibilityState",
+        accessibilityValue: "accessibilityValue",
+        accessibilityActions: "accessibilityActions",
+        accessibilityLabelledBy: "accessibilityLabelledBy",
+        accessibilityLiveRegion: "accessibilityLiveRegion",
+        accessibilityElementsHidden: "accessibilityElementsHidden",
+        accessibilityViewIsModal: "accessibilityViewIsModal",
+        importantForAccessibility: "importantForAccessibility",
+        collapsable: "collapsable",
+        needsOffscreenAlphaCompositing: "needsOffscreenAlphaCompositing",
+        removeClippedSubviews: "removeClippedSubviews",
+        renderToHardwareTextureAndroid: "renderToHardwareTextureAndroid",
+        shouldRasterizeIOS: "shouldRasterizeIOS",
+        hitSlop: "hitSlop",
+        pointerEvents: "pointerEvents"
       })
     },
     componentState = {
@@ -101,6 +127,52 @@ function createExtractor({
     // really basic disable this for next.js because it messes with ssr
     !process.env.npm_package_dependencies_next && !0 && process.env.IDENTIFY_TAGS !== "false" && (process.env.NODE_ENV === "development" || process.env.IDENTIFY_TAGS);
   let projectInfo = null;
+  const dynamicComponentCache = /* @__PURE__ */new Map(),
+    dynamicLoadingInProgress = /* @__PURE__ */new Set();
+  let _compilerOptions = null;
+  function getCompilerOptions() {
+    if (!_compilerOptions) try {
+      _compilerOptions = (0, import_esbuildTsconfigPaths.loadCompilerOptionsFromTsconfig)();
+    } catch {
+      _compilerOptions = {};
+    }
+    return _compilerOptions;
+  }
+  function resolveImportPath(fromFile, importPath) {
+    if (importPath.startsWith(".")) {
+      const dir = (0, import_node_path.dirname)(fromFile),
+        base = (0, import_node_path.resolve)(dir, importPath),
+        extensions = [".tsx", ".ts", ".jsx", ".js"];
+      for (const ext of extensions) {
+        const full = base + ext;
+        if ((0, import_node_fs.existsSync)(full)) return full;
+      }
+      for (const ext of extensions) {
+        const full = (0, import_node_path.resolve)(base, `index${ext}`);
+        if ((0, import_node_fs.existsSync)(full)) return full;
+      }
+      return null;
+    }
+    const compilerOptions = getCompilerOptions();
+    if (compilerOptions.paths) try {
+      const {
+        resolvedModule
+      } = (0, import_typescript.nodeModuleNameResolver)(importPath, fromFile, compilerOptions, import_typescript.sys);
+      if (resolvedModule && !resolvedModule.resolvedFileName.endsWith(".d.ts") && !resolvedModule.isExternalLibraryImport) return resolvedModule.resolvedFileName;
+    } catch {}
+    return null;
+  }
+  const styledCheckCache = /* @__PURE__ */new Map();
+  function mightHaveStyledComponents(filePath) {
+    const cached = styledCheckCache.get(filePath);
+    if (cached !== void 0) return cached;
+    try {
+      const result = (0, import_node_fs.readFileSync)(filePath, "utf-8").includes("styled(");
+      return styledCheckCache.set(filePath, result), result;
+    } catch {
+      return styledCheckCache.set(filePath, !1), !1;
+    }
+  }
   function loadSync(props) {
     return isFullyDisabled(props) ? null : projectInfo ||= (0, import_loadTamagui.loadTamaguiSync)(props);
   }
@@ -152,7 +224,7 @@ function createExtractor({
       platform: platform2,
       ...restProps
     } = options;
-    if (sourcePath.includes(".tamagui-dynamic-eval")) return null;
+    if (sourcePath && dynamicComponentCache.has(sourcePath) && (dynamicComponentCache.delete(sourcePath), styledCheckCache.delete(sourcePath)), sourcePath.includes(".tamagui-dynamic-eval")) return null;
     const {
       normalizeStyle,
       getSplitStyles,
@@ -219,24 +291,32 @@ function createExtractor({
       const node = "node" in bodyPath ? bodyPath.node : bodyPath,
         moduleName = node.source.value,
         valid = (0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName);
-      if (valid && importDeclarations.push(node), shouldPrintDebug === "verbose" && logger.info(` - import via ${moduleName} ${valid}`), extractStyledDefinitions && valid && node.specifiers.some(specifier => specifier.local.name === "styled")) {
-        doesUseValidImport = !0;
-        break;
-      }
-      if (valid) {
+      if (valid && importDeclarations.push(node), shouldPrintDebug === "verbose" && logger.info(` - import via ${moduleName} ${valid}`), extractStyledDefinitions && enableDynamicEvaluation && node.specifiers.some(specifier => specifier.local.name === "styled") && (doesUseValidImport = !0), valid) {
         const names = node.specifiers.map(specifier => specifier.local.name),
           isValidComponent = names.some(name => !!(0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName, name));
-        if (shouldPrintDebug === "verbose" && logger.info(` - import ${isValidComponent ? "\u2705" : "\u21E3"} - ${names.join(", ")} via package '${moduleName}' - (valid: ${JSON.stringify((0, import_extractHelpers.getValidComponentsPaths)(propsWithFileInfo))})`), isValidComponent) {
-          doesUseValidImport = !0;
-          break;
-        }
+        if (shouldPrintDebug === "verbose" && logger.info(` - import ${isValidComponent ? "\u2705" : "\u21E3"} - ${names.join(", ")} via package '${moduleName}' - (valid: ${JSON.stringify((0, import_extractHelpers.getValidComponentsPaths)(propsWithFileInfo))})`), isValidComponent && (doesUseValidImport = !0, !(extractStyledDefinitions && enableDynamicEvaluation))) break;
       }
     }
     if (shouldPrintDebug && logger.info(`${JSON.stringify({
       doesUseValidImport,
       hasImportedTheme
     }, null, 2)}
-`), !doesUseValidImport) return null;
+`), !doesUseValidImport && extractStyledDefinitions && enableDynamicEvaluation && sourcePath) for (const bodyPath of body) {
+      if (bodyPath.type !== "ImportDeclaration") continue;
+      const moduleName = ("node" in bodyPath ? bodyPath.node : bodyPath).source.value,
+        resolved = resolveImportPath(sourcePath, moduleName);
+      if (resolved) {
+        if (dynamicComponentCache.has(resolved)) {
+          doesUseValidImport = !0;
+          break;
+        }
+        if (mightHaveStyledComponents(resolved)) {
+          doesUseValidImport = !0;
+          break;
+        }
+      }
+    }
+    if (!doesUseValidImport) return null;
     function getValidImportedComponent(componentName) {
       const importDeclaration = importDeclarations.find(dec => dec.specifiers.some(spec => spec.local.name === componentName));
       return importDeclaration ? (0, import_extractHelpers.getValidImport)(propsWithFileInfo, importDeclaration.source.value, componentName) : null;
@@ -266,15 +346,16 @@ function createExtractor({
       // styled() calls
       CallExpression(path) {
         if (disable || shouldDisableExtraction || extractStyledDefinitions === !1 || !t.isIdentifier(path.node.callee) || path.node.callee.name !== "styled") return;
-        const variableName = t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id) ? path.parent.id.name : "unknown",
-          parentNode = path.node.arguments[0];
+        const variableName = t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id) ? path.parent.id.name : "unknown";
+        shouldPrintDebug && logger.info(` [styled] Found styled(${variableName})`);
+        const parentNode = path.node.arguments[0];
         if (!t.isIdentifier(parentNode)) return;
         const parentName = parentNode.name,
           definition = path.node.arguments[1];
         if (!parentName || !definition || !t.isObjectExpression(definition)) return;
-        let Component = getValidImportedComponent(variableName);
+        let Component = getValidImportedComponent(parentName) || getValidImportedComponent(variableName);
         if (!Component) {
-          if (enableDynamicEvaluation !== !0) return;
+          if (!enableDynamicEvaluation) return;
           try {
             shouldPrintDebug && logger.info(`Unknown component: ${variableName} = styled(${parentName}) attempting dynamic load: ${sourcePath}`);
             const out2 = (0, import_loadTamagui.loadTamaguiSync)({
@@ -305,6 +386,7 @@ function createExtractor({
           "fontFamily", "name", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle", "hoverStyle", "pressStyle"]),
           skipped = /* @__PURE__ */new Set(),
           styles = {},
+          staticDefaultProps = {},
           staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(path.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug),
           attemptEval = evaluateVars ? (0, import_createEvaluator.createEvaluator)({
             props: propsWithFileInfo,
@@ -314,6 +396,11 @@ function createExtractor({
           }) : import_evaluateAstNode.evaluateAstNode,
           attemptEvalSafe = (0, import_createEvaluator.createSafeEvaluator)(attemptEval);
         for (const property of definition.properties) {
+          if (t.isObjectProperty(property) && (t.isIdentifier(property.key) || t.isStringLiteral(property.key))) {
+            const key = t.isIdentifier(property.key) ? property.key.name : property.key.value,
+              defaultPropValue = attemptEvalSafe(property.value);
+            defaultPropValue !== import_constants.FAILED_EVAL && (staticDefaultProps[key] = defaultPropValue);
+          }
           if (!t.isObjectProperty(property) || !t.isIdentifier(property.key) || !isValidStyleKey(property.key.name, Component.staticConfig) ||
           // TODO make pseudos and variants work
           // skip pseudos
@@ -333,16 +420,36 @@ function createExtractor({
         if (shouldPrintDebug && logger.info([`Extracted styled(${variableName})
 `, JSON.stringify(styles, null, 2), `
  classNames:`, JSON.stringify(classNames, null, 2), `
-  rulesToInsert:`, out.rulesToInsert].join(" ")), definition.properties = definition.properties.map(prop => {
-          if (skipped.has(prop) || !t.isObjectProperty(prop) || !t.isIdentifier(prop.key)) return prop;
-          const key = prop.key.name,
-            value = classNames[key];
-          return value ? t.objectProperty(t.stringLiteral(key), t.stringLiteral(value)) : prop;
-        }), out.rulesToInsert) for (const key in out.rulesToInsert) {
+  rulesToInsert:`, out.rulesToInsert].join(" ")), out.rulesToInsert) for (const key in out.rulesToInsert) {
           const styleObject = out.rulesToInsert[key];
           onStyledDefinitionRule?.(styleObject[import_web.StyleObjectIdentifier], styleObject[import_web.StyleObjectRules]);
         }
-        res.styled++, shouldPrintDebug && logger.info(`Extracted styled(${variableName})`);
+        if (res.styled++, extractStyledDefinitions && enableDynamicEvaluation && Component) {
+          const dynamicStaticConfig = {
+            ...Component.staticConfig,
+            defaultProps: {
+              ...Component.staticConfig.defaultProps,
+              ...staticDefaultProps
+            }
+          };
+          if (propsWithFileInfo.allLoadedComponents.push({
+            moduleName: "",
+            nameToInfo: {
+              [variableName]: {
+                staticConfig: dynamicStaticConfig
+              }
+            }
+          }), sourcePath) {
+            let existing = dynamicComponentCache.get(sourcePath);
+            existing || (existing = {
+              moduleName: sourcePath,
+              nameToInfo: {}
+            }, dynamicComponentCache.set(sourcePath, existing)), existing.nameToInfo[variableName] = {
+              staticConfig: dynamicStaticConfig
+            };
+          }
+        }
+        shouldPrintDebug && logger.info(`Extracted styled(${variableName})`);
       },
       JSXElement(traversePath) {
         tm.mark("jsx-element", !!shouldPrintDebug);
@@ -357,13 +464,49 @@ function createExtractor({
           return;
         }
         const binding = traversePath.scope.getBinding(node.name.name);
-        let moduleName = "";
+        let moduleName = "",
+          dynamicComponent = null;
         if (binding && t.isImportDeclaration(binding.path.parent) && (moduleName = binding.path.parent.source.value, !(0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName, binding.identifier.name))) {
-          shouldPrintDebug && logger.info(` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}
+          if (enableDynamicEvaluation && sourcePath) {
+            const resolved = resolveImportPath(sourcePath, moduleName);
+            if (resolved) {
+              const cached = dynamicComponentCache.get(resolved);
+              if (cached?.nameToInfo[binding.identifier.name]) dynamicComponent = cached.nameToInfo[binding.identifier.name];else if (!dynamicLoadingInProgress.has(resolved) && mightHaveStyledComponents(resolved)) {
+                dynamicLoadingInProgress.add(resolved);
+                try {
+                  const out = (0, import_loadTamagui.loadTamaguiSync)({
+                    forceExports: !0,
+                    components: [resolved]
+                  });
+                  if (out?.components) {
+                    for (const comp of out.components) {
+                      let existing = dynamicComponentCache.get(resolved);
+                      existing || (existing = {
+                        moduleName: resolved,
+                        nameToInfo: {}
+                      }, dynamicComponentCache.set(resolved, existing)), Object.assign(existing.nameToInfo, comp.nameToInfo), propsWithFileInfo.allLoadedComponents.push({
+                        moduleName: resolved,
+                        nameToInfo: comp.nameToInfo
+                      });
+                    }
+                    const cachedNow = dynamicComponentCache.get(resolved);
+                    cachedNow?.nameToInfo[binding.identifier.name] && (dynamicComponent = cachedNow.nameToInfo[binding.identifier.name]);
+                  }
+                } catch (err) {
+                  shouldPrintDebug && logger.info(` - Failed to dynamically load ${resolved}: ${err}`);
+                } finally {
+                  dynamicLoadingInProgress.delete(resolved);
+                }
+              }
+            }
+          }
+          if (!dynamicComponent) {
+            shouldPrintDebug && logger.info(` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}
 `);
-          return;
+            return;
+          }
         }
-        const component = (0, import_extractHelpers.getValidComponent)(propsWithFileInfo, moduleName, node.name.name);
+        const component = dynamicComponent || (0, import_extractHelpers.getValidComponent)(propsWithFileInfo, moduleName, node.name.name);
         if (!component || !component.staticConfig) {
           shouldPrintDebug && logger.info(`
  - No Tamagui conf for: ${node.name.name}
@@ -645,7 +788,6 @@ function createExtractor({
             variants = staticConfig.variants || {},
             isTextView = staticConfig.isText || !1,
             validStyles = staticConfig?.validStyles ?? {};
-          if (process.env.NODE_ENV === "production" && isTextView) return;
           let tagName = defaultProps.render ?? (isTextView ? "span" : "div");
           traversePath.get("openingElement").get("attributes").forEach(path => {
             const attr = path.node;

package/dist/extractor/detectModuleFormat.cjs

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var detectModuleFormat_exports = {};
+__export(detectModuleFormat_exports, {
+  clearFormatCache: () => clearFormatCache,
+  detectModuleFormat: () => detectModuleFormat
+});
+module.exports = __toCommonJS(detectModuleFormat_exports);
+var import_node_fs = require("node:fs"),
+  import_node_path = require("node:path");
+const formatCache = /* @__PURE__ */new Map();
+function detectModuleFormat(filePath) {
+  const ext = (0, import_node_path.extname)(filePath);
+  if (ext === ".mjs") return "esm";
+  if (ext === ".cjs") return "cjs";
+  let dir = (0, import_node_path.dirname)(filePath);
+  for (;;) {
+    if (formatCache.has(dir)) return formatCache.get(dir);
+    try {
+      const format = JSON.parse((0, import_node_fs.readFileSync)((0, import_node_path.join)(dir, "package.json"), "utf-8")).type === "module" ? "esm" : "cjs";
+      return formatCache.set(dir, format), format;
+    } catch {}
+    const parent = (0, import_node_path.dirname)(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return "cjs";
+}
+function clearFormatCache() {
+  formatCache.clear();
+}

package/dist/extractor/esbuildTsconfigPaths.cjs

@@ -31,7 +31,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   }), mod);
 var esbuildTsconfigPaths_exports = {};
 __export(esbuildTsconfigPaths_exports, {
-  TsconfigPathsPlugin: () => TsconfigPathsPlugin
+  TsconfigPathsPlugin: () => TsconfigPathsPlugin,
+  loadCompilerOptionsFromTsconfig: () => loadCompilerOptionsFromTsconfig
 });
 module.exports = __toCommonJS(esbuildTsconfigPaths_exports);
 var import_node_fs = __toESM(require("node:fs")),
@@ -48,6 +49,7 @@ function TsconfigPathsPlugin() {
       onResolve({
         filter: /.*/
       }, args => {
+        if (args.path.startsWith("@tamagui/")) return null;
         const paths = compilerOptions.paths || {};
         if (!Object.keys(paths).some(p => new RegExp(p.replace("*", "\\w*")).test(args.path))) return null;
         const {

package/dist/extractor/extractToClassNames.cjs

@@ -85,7 +85,8 @@ async function extractToClassNames({
       sourcePath,
       extractStyledDefinitions: !0,
       onStyledDefinitionRule(identifier, rules) {
-        const css = rules.join(";");
+        const css = rules.join(`
+`);
         shouldPrintDebug && console.info(`adding styled() rule: .${identifier} ${css}`), cssMap.set(`.${identifier}`, {
           css,
           commentTexts: []
@@ -182,8 +183,9 @@ async function extractToClassNames({
           hasTernaries = !!onlyTernaries.length,
           baseClassNames = mergeForwardBaseStyle ? addStyles(mergeForwardBaseStyle) : null;
         let baseClassNameStr = baseClassNames ? baseClassNames.join(" ") : "";
-        baseFontFamily && (baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`);
-        let base = staticConfig.componentName ? t.stringLiteral(`is_${staticConfig.componentName}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`) : t.stringLiteral(baseClassNameStr || "");
+        baseFontFamily && (baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`), baseClassNameStr = `${staticConfig.isText ? "is_Text" : "is_View"}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
+        const componentNameFinal = staticConfig.componentName;
+        let base = componentNameFinal && componentNameFinal !== "Text" ? t.stringLiteral(`is_${componentNameFinal}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`) : t.stringLiteral(baseClassNameStr || "");
         attrClassName = attrClassName;
         const baseClassNameExpression = attrClassName ? t.isStringLiteral(attrClassName) ? t.stringLiteral(base.value ? `${base.value} ${attrClassName.value}` : attrClassName.value) : t.binaryExpression("+", t.binaryExpression("+", attrClassName, spaceString), base) : base,
           expandedTernaries = [];
@@ -314,6 +316,6 @@ function hoistClassName(path2, str) {
 }
 function cleanupClassName(inStr) {
   const out = /* @__PURE__ */new Set();
-  for (const part of inStr.split(" ")) part !== " " && part !== "font_" && out.add(part);
-  return [...out].join(" ") + " ";
+  for (const part of inStr.split(" ")) !part || part === " " || part !== "font_" && out.add(part);
+  return [...out].join(" ");
 }

package/dist/extractor/extractToNative.cjs

@@ -56,12 +56,7 @@ const __ReactNativeText = require('react-native').Text;
   importStyleSheet = (0, import_template.default)(`
 const __ReactNativeStyleSheet = require('react-native').StyleSheet;
 `),
-  importWithStyle = (0, import_template.default)(`
-const __withStableStyle = require('@tamagui/core')._withStableStyle;
-`),
-  importReactUseMemo = (0, import_template.default)(`
-const __ReactUseMemo = require('react').useMemo;
-`),
+  importWithStyle = import_template.default.ast("import { _withStableStyle } from '@tamagui/core';"),
   extractor = (0, import_createExtractor.createExtractor)({
     platform: "native"
   });
@@ -137,6 +132,8 @@ function getBabelParseDefinition(options) {
             res = extractor.parseSync(root, {
               importsWhitelist: ["constants.js", "colors.js"],
               excludeProps: /* @__PURE__ */new Set(["className", "userSelect", "whiteSpace", "textOverflow", "cursor", "contain"]),
+              // native props that should pass through without preventing extraction
+              inlineProps: /* @__PURE__ */new Set(["testID", "nativeID", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "accessibilityLiveRegion", "accessibilityElementsHidden", "accessibilityViewIsModal", "importantForAccessibility", "onAccessibilityAction", "onAccessibilityEscape", "onAccessibilityTap", "onMagicTap", "collapsable", "needsOffscreenAlphaCompositing", "removeClippedSubviews", "renderToHardwareTextureAndroid", "shouldRasterizeIOS", "hitSlop", "pointerEvents"]),
               shouldPrintDebug,
               ...finalOptions,
               // disable extracting variables as no native concept of them (only theme values)
@@ -215,12 +212,14 @@ function getBabelParseDefinition(options) {
                     }
                 }
                 if (props.node.attributes = finalAttrs, themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle) {
-                  hasImportedViewWrapper || (root.unshiftContainer("body", importWithStyle()), root.unshiftContainer("body", importReactUseMemo()), hasImportedViewWrapper = !0);
+                  hasImportedViewWrapper || (root.unshiftContainer("body", importWithStyle), hasImportedViewWrapper = !0);
                   const name = props.flatNodeName || props.node.name.name,
                     wrapperName = `_${name.replace(/^_+/, "")}Styled${wrapperCount++}`,
                     WrapperIdentifier = t.identifier(wrapperName),
                     WrapperJSXIdentifier = t.jsxIdentifier(wrapperName);
-                  root.pushContainer("body", t.variableDeclaration("const", [t.variableDeclarator(WrapperIdentifier, t.callExpression(t.identifier("__withStableStyle"), [t.identifier(name), t.arrowFunctionExpression([t.identifier("theme"), t.identifier("_expressions")], t.blockStatement([t.returnStatement(t.callExpression(t.identifier("__ReactUseMemo"), [t.arrowFunctionExpression([], t.blockStatement([t.returnStatement(t.arrayExpression([...hocStylesExpr.elements]))])), t.identifier("_expressions")]))]))]))])), props.node.name = WrapperJSXIdentifier, props.jsxPath.node.openingElement.name = WrapperJSXIdentifier, props.jsxPath.node.closingElement && (props.jsxPath.node.closingElement.name = t.jsxIdentifier(wrapperName)), expressions.length && props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("_expressions"), t.jsxExpressionContainer(t.arrayExpression(expressions))));
+                  root.pushContainer("body", t.variableDeclaration("const", [t.variableDeclarator(WrapperIdentifier, t.callExpression(t.identifier("_withStableStyle"), [t.identifier(name), t.arrowFunctionExpression([t.identifier("theme"), t.identifier("_expressions")],
+                  // return styles directly - no useMemo, theme changes must trigger style recalc
+                  t.arrayExpression([...hocStylesExpr.elements]))]))])), props.node.name = WrapperJSXIdentifier, props.jsxPath.node.openingElement.name = WrapperJSXIdentifier, props.jsxPath.node.closingElement && (props.jsxPath.node.closingElement.name = t.jsxIdentifier(wrapperName)), expressions.length && props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("_expressions"), t.jsxExpressionContainer(t.arrayExpression(expressions))));
                 } else props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(stylesExpr.elements.length === 1 ? stylesExpr.elements[0] : stylesExpr)));
               }
             });

package/dist/extractor/loadTamagui.cjs

@@ -190,7 +190,7 @@ function loadTamaguiSync({
           createTamagui(tamaguiConfig);
         }
       }
-      const components = (0, import_bundleConfig.loadComponents)(props, forceExports);
+      const components = (0, import_bundleConfig.loadComponentsSync)(props, forceExports);
       if (!components) throw new Error("No components loaded");
       process.env.DEBUG === "tamagui" && console.info("components", components), process.env.IS_STATIC = void 0, globalThis.__DEV__ = devValueOG;
       const info = {

package/dist/getPragmaOptions.cjs

@@ -32,9 +32,13 @@ function getPragmaOptions({
   const firstLines = source.slice(0, 800);
   let pragma = "";
   for (const line of firstLines.split(`
-`)) if (pragma = line.match(/(\/\/|\/\*)\s?!?\s?(tamagui-ignore|debug|debug-verbose)(\n|\s|$).*/)?.[2].trim() || "", pragma) {
-    pragma = pragma.replace("!", "").trim();
-    break;
+`)) {
+    const trimmed = line.trim();
+    if (trimmed && !trimmed.startsWith("//") && !trimmed.startsWith("/*")) break;
+    if (pragma = trimmed.match(/(\/\/|\/\*)\s?!?\s?(tamagui-ignore|debug|debug-verbose)(\n|\s|$).*/)?.[2].trim() || "", pragma) {
+      pragma = pragma.replace("!", "").trim();
+      break;
+    }
   }
   switch (pragma) {
     case "tamagui-ignore":

package/dist/index.js

@@ -2,29 +2,39 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: !0 });
-}, __copyProps = (to, from, except, desc) => {
-  if (from && typeof from == "object" || typeof from == "function")
-    for (let key of __getOwnPropNames(from))
-      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  return to;
-}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default")), __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  },
+  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default")),
+  __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
-  mod
-)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
 var index_exports = {};
 __export(index_exports, {
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
-var Static1 = __toESM(require("./exports"));
-__reExport(index_exports, require("./exports"), module.exports);
-var index_default = Static1;
-//# sourceMappingURL=index.js.map
+var Static1 = __toESM(require("./exports.cjs"));
+__reExport(index_exports, require("./exports.cjs"), module.exports);
+var index_default = Static1;

package/dist/registerRequire.cjs

@@ -50,12 +50,18 @@ function registerRequire(platform, {
     tamaguiRequire: require,
     unregister: () => {}
   };
-  const {
-    unregister
-  } = (0, import_node.register)({
-    hookIgnoreNodeModules: !1
-  });
-  og || (og = Module.prototype.require), isRegistered = !0, Module.prototype.require = tamaguiRequire;
+  const originalResolveFilename = Module._resolveFilename,
+    {
+      unregister
+    } = (0, import_node.register)({
+      hookIgnoreNodeModules: !1,
+      // don't transform @tamagui packages - they have pre-built dist files
+      hookMatcher: filename => !(filename.includes("@tamagui") || /\/tamagui\/code\/(core|ui|packages)\//.test(filename))
+    }),
+    tsconfigPatchedResolve = Module._resolveFilename;
+  Module._resolveFilename = function (request, ...args) {
+    return request.startsWith("@tamagui/") ? originalResolveFilename.call(this, request, ...args) : tsconfigPatchedResolve.call(this, request, ...args);
+  }, og || (og = Module.prototype.require), isRegistered = !0, Module.prototype.require = tamaguiRequire;
   function tamaguiRequire(path) {
     if (path === "tamagui" && platform === "native") return og.apply(this, ["tamagui/native"]);
     if (path === "@tamagui/core") return (0, import_requireTamaguiCore.requireTamaguiCore)(platform, path2 => og.apply(this, [path2]));
@@ -68,16 +74,15 @@ function registerRequire(platform, {
     } catch {
       return og.apply(this, ["@tamagui/react-native-web-lite"]);
     }
-    if (!whitelisted[path] && proxyWormImports && !path.includes(".tamagui-dynamic-eval")) return path === "tamagui" ? og.apply(this, [path]) : proxyWorm;
+    if (!whitelisted[path] && proxyWormImports && !path.includes(".tamagui-dynamic-eval")) {
+      const callerFile = this?.filename || this?.id || "",
+        isFromTamaguiPkg = callerFile.includes("@tamagui") || callerFile.includes("node_modules/tamagui/");
+      return path === "tamagui" || path.startsWith("@tamagui/") || isFromTamaguiPkg ? og.apply(this, [path]) : proxyWorm;
+    }
     try {
       return og.apply(this, arguments);
-    } catch (err) {
-      return !process.env.TAMAGUI_ENABLE_WARN_DYNAMIC_LOAD && path.includes("tamagui-dynamic-eval") ? void 0 : (allowedIgnores[path] || IGNORES === "true" || (!process.env.TAMAGUI_SHOW_FULL_BUNDLE_ERRORS && !process.env.DEBUG ? hasWarnedForModules.has(path) || hasWarnedForModules.add(path) : console.error(`Tamagui failed to require() "${path}"
-  
-  ${err.message}
-  ${err.stack}
-
-  `)), proxyWorm);
+    } catch {
+      return !process.env.TAMAGUI_ENABLE_WARN_DYNAMIC_LOAD && path.includes("tamagui-dynamic-eval") ? void 0 : (allowedIgnores[path] || IGNORES === "true" || (!process.env.TAMAGUI_SHOW_FULL_BUNDLE_ERRORS && !process.env.DEBUG ? hasWarnedForModules.has(path) || hasWarnedForModules.add(path) : console.warn(`  [tamagui] skipped "${path}" (set TAMAGUI_IGNORE_BUNDLE_ERRORS="${path}" to silence)`)), proxyWorm);
     }
   }
   return {
@@ -96,6 +101,10 @@ const IGNORES = process.env.TAMAGUI_IGNORE_BUNDLE_ERRORS,
     "expo-linear-gradient": !0,
     "@expo/vector-icons": !0,
     "tamagui/linear-gradient": !0,
+    // animation libraries not needed for static extraction
+    "@emotion/is-prop-valid": !0,
+    "framer-motion": !0,
+    motion: !0,
     ...Object.fromEntries(extraIgnores?.map(k => [k, !0]) || [])
   },
   hasWarnedForModules = /* @__PURE__ */new Set(),