@tamagui/static 1.115.1 → 1.115.3

package/dist/extractor/extractToClassNames.js

@@ -0,0 +1,291 @@
+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 __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 __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);
+var extractToClassNames_exports = {};
+__export(extractToClassNames_exports, {
+  extractToClassNames: () => extractToClassNames
+});
+module.exports = __toCommonJS(extractToClassNames_exports);
+var path = __toESM(require("node:path")), util = __toESM(require("node:util")), import_generator = __toESM(require("@babel/generator")), t = __toESM(require("@babel/types")), helpers = __toESM(require("@tamagui/helpers")), import_requireTamaguiCore = require("../helpers/requireTamaguiCore"), import_babelParse = require("./babelParse"), import_buildClassName = require("./buildClassName"), import_createLogger = require("./createLogger"), import_ensureImportingConcat = require("./ensureImportingConcat"), import_extractHelpers = require("./extractHelpers"), import_extractMediaStyle = require("./extractMediaStyle"), import_hoistClassNames = require("./hoistClassNames"), import_propsToFontFamilyCache = require("./propsToFontFamilyCache"), import_timer = require("./timer");
+const mergeStyleGroups = {
+  shadowOpacity: !0,
+  shadowRadius: !0,
+  shadowColor: !0,
+  shadowOffset: !0
+};
+async function extractToClassNames({
+  extractor,
+  source,
+  sourcePath = "",
+  options,
+  shouldPrintDebug
+}) {
+  const tm = (0, import_timer.timer)(), { getStylesAtomic } = (0, import_requireTamaguiCore.requireTamaguiCore)("web");
+  if (sourcePath.includes("node_modules"))
+    return null;
+  if (shouldPrintDebug && console.warn(`--- ${sourcePath} --- 
+
+`), typeof source != "string")
+    throw new Error("`source` must be a string of javascript");
+  if (!path.isAbsolute(sourcePath))
+    throw new Error(
+      "`sourcePath` must be an absolute path to a .js file, got: " + sourcePath
+    );
+  /.[tj]sx?$/i.test(sourcePath || "") || console.warn(`${sourcePath.slice(0, 100)} - bad filename.`), !options.disableExtraction && !options._disableLoadTamagui && await extractor.loadTamagui(options);
+  const printLog = (0, import_createLogger.createLogger)(sourcePath, options);
+  let ast;
+  try {
+    ast = (0, import_babelParse.babelParse)(source, sourcePath);
+  } catch (err) {
+    throw console.error("babel parse error:", sourcePath.slice(0, 100)), err;
+  }
+  tm.mark("babel-parse", shouldPrintDebug === "verbose");
+  const cssMap = /* @__PURE__ */ new Map(), existingHoists = {};
+  let hasFlattened = !1;
+  const res = await extractor.parse(ast, {
+    shouldPrintDebug,
+    ...options,
+    platform: "web",
+    sourcePath,
+    extractStyledDefinitions: !0,
+    onStyleRule(identifier, rules) {
+      const css = rules.join(";");
+      shouldPrintDebug && console.info(`adding styled() rule: .${identifier} ${css}`), cssMap.set(`.${identifier}`, { css, commentTexts: [] });
+    },
+    getFlattenedNode: ({ tag }) => (hasFlattened = !0, tag),
+    onExtractTag: ({
+      parserProps,
+      attrs,
+      node,
+      attemptEval,
+      jsxPath,
+      originalNodeName,
+      filePath,
+      lineNumbers,
+      programPath,
+      isFlattened,
+      staticConfig
+    }) => {
+      if (staticConfig.acceptsClassName === !1) {
+        shouldPrintDebug && console.info("bail, acceptsClassName is false");
+        return;
+      }
+      const didFlattenThisTag = hasFlattened;
+      hasFlattened = !1;
+      let finalClassNames = [];
+      const finalAttrs = [];
+      let finalStyles = [], viewStyles = {};
+      for (const attr of attrs)
+        attr.type === "style" && (viewStyles = {
+          ...viewStyles,
+          ...attr.value
+        });
+      const ensureNeededPrevStyle = (style) => {
+        if (!Object.keys(style).some((key) => mergeStyleGroups[key]))
+          return style;
+        for (const k in mergeStyleGroups)
+          k in viewStyles && (style[k] = style[k] ?? viewStyles[k]);
+        return style;
+      }, addStyles = (style) => {
+        if (!style) return [];
+        const styleWithPrev = ensureNeededPrevStyle(style), res2 = getStylesAtomic(styleWithPrev);
+        return res2.length && (finalStyles = [...finalStyles, ...res2]), res2;
+      };
+      let lastMediaImportance = 1;
+      for (const attr of attrs)
+        switch (attr.type) {
+          case "style": {
+            if (isFlattened) {
+              const styles2 = addStyles(attr.value), newFontFamily = (0, import_propsToFontFamilyCache.getFontFamilyClassNameFromProps)(attr.value) || "", newClassNames = helpers.concatClassName(
+                styles2.map((x) => x[helpers.StyleObjectIdentifier]).join(" ") + newFontFamily
+              ), existing = finalClassNames.find(
+                (x) => x.type == "StringLiteral"
+              );
+              if (existing) {
+                let previous = existing.value;
+                newFontFamily && (shouldPrintDebug && console.info(` newFontFamily: ${newFontFamily}`), previous = previous.replace(/font_[a-z]+/i, "")), existing.value = `${previous} ${newClassNames}`;
+              } else
+                finalClassNames = [...finalClassNames, t.stringLiteral(newClassNames)];
+            } else {
+              const styles2 = getStylesAtomic(attr.value);
+              finalStyles = [...finalStyles, ...styles2];
+              for (const style of styles2) {
+                const prop = style[helpers.StyleObjectPseudo] ? `${style[helpers.StyleObjectProperty]}-${style[helpers.StyleObjectPseudo]}` : style[helpers.StyleObjectProperty];
+                finalAttrs.push(
+                  t.jsxAttribute(
+                    t.jsxIdentifier(prop),
+                    t.stringLiteral(style[helpers.StyleObjectIdentifier])
+                  )
+                );
+              }
+            }
+            break;
+          }
+          case "attr": {
+            const val = attr.value;
+            if (t.isJSXSpreadAttribute(val))
+              (0, import_extractHelpers.isSimpleSpread)(val) && finalClassNames.push(
+                t.logicalExpression(
+                  "&&",
+                  val.argument,
+                  t.memberExpression(val.argument, t.identifier("className"))
+                )
+              );
+            else if (val.name.name === "className") {
+              const value = val.value;
+              if (value)
+                try {
+                  const evaluatedValue = attemptEval(value);
+                  finalClassNames.push(t.stringLiteral(evaluatedValue));
+                } catch {
+                  finalClassNames.push(value.expression);
+                }
+              continue;
+            }
+            finalAttrs.push(val);
+            break;
+          }
+          case "ternary": {
+            const mediaExtraction = (0, import_extractMediaStyle.extractMediaStyle)(
+              parserProps,
+              attr.value,
+              jsxPath,
+              extractor.getTamagui(),
+              sourcePath || "",
+              lastMediaImportance,
+              shouldPrintDebug
+            );
+            if (shouldPrintDebug && mediaExtraction && console.info(
+              "ternary (mediaStyles)",
+              mediaExtraction.ternaryWithoutMedia?.inlineMediaQuery ?? "",
+              mediaExtraction.mediaStyles.map((x) => x[helpers.StyleObjectIdentifier]).join(".")
+            ), !mediaExtraction) {
+              shouldPrintDebug && mediaExtraction && console.info("add ternary"), addTernaryStyle(
+                attr.value,
+                addStyles(attr.value.consequent),
+                addStyles(attr.value.alternate)
+              );
+              continue;
+            }
+            lastMediaImportance++, mediaExtraction.mediaStyles && (finalStyles = [...finalStyles, ...mediaExtraction.mediaStyles]), mediaExtraction.ternaryWithoutMedia ? addTernaryStyle(
+              mediaExtraction.ternaryWithoutMedia,
+              mediaExtraction.mediaStyles,
+              []
+            ) : finalClassNames = [
+              ...finalClassNames,
+              ...mediaExtraction.mediaStyles.map(
+                (x) => t.stringLiteral(x[helpers.StyleObjectIdentifier])
+              )
+            ];
+            break;
+          }
+        }
+      function addTernaryStyle(ternary, a, b) {
+        const cCN = a.map((x) => x[helpers.StyleObjectIdentifier]).join(" "), aCN = b.map((x) => x[helpers.StyleObjectIdentifier]).join(" ");
+        a.length && b.length ? finalClassNames.push(
+          t.conditionalExpression(
+            ternary.test,
+            t.stringLiteral(cCN),
+            t.stringLiteral(aCN)
+          )
+        ) : finalClassNames.push(
+          t.conditionalExpression(
+            ternary.test,
+            t.stringLiteral(" " + cCN),
+            t.stringLiteral(" " + aCN)
+          )
+        );
+      }
+      if (shouldPrintDebug === "verbose" && console.info(`  finalClassNames AST
+`, JSON.stringify(finalClassNames, null, 2)), node.attributes = finalAttrs, finalClassNames.length) {
+        const extraClassNames = (() => {
+          let value = "";
+          return isFlattened && (process.env.TAMAGUI_DEBUG_OPTIMIZATIONS && (value += "is_tamagui_flattened"), staticConfig.componentName && (value += ` is_${staticConfig.componentName}`)), value;
+        })(), names = (0, import_buildClassName.buildClassName)(finalClassNames, extraClassNames), nameExpr = names ? (0, import_hoistClassNames.hoistClassNames)(jsxPath, existingHoists, names) : null;
+        let expr = nameExpr;
+        if (nameExpr && !t.isIdentifier(nameExpr) && didFlattenThisTag) {
+          (0, import_ensureImportingConcat.ensureImportingConcat)(programPath);
+          const simpleSpreads = attrs.filter((x) => x.type === "attr" && t.isJSXSpreadAttribute(x.value) && (0, import_extractHelpers.isSimpleSpread)(x.value));
+          expr = t.callExpression(t.identifier("concatClassName"), [
+            expr,
+            ...simpleSpreads.map((val) => val.value.argument)
+          ]);
+        }
+        node.attributes.push(
+          t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(expr))
+        );
+      }
+      const comment = util.format(
+        "/* %s:%s (%s) */",
+        filePath,
+        lineNumbers,
+        originalNodeName
+      );
+      for (const styleObject of finalStyles) {
+        const identifier = styleObject[helpers.StyleObjectIdentifier], rules = styleObject[helpers.StyleObjectRules], className = `.${identifier}`;
+        if (cssMap.has(className)) {
+          if (comment) {
+            const val = cssMap.get(className);
+            val.commentTexts.push(comment), cssMap.set(className, val);
+          }
+        } else rules.length && cssMap.set(className, {
+          css: rules.join(`
+`),
+          commentTexts: [comment]
+        });
+      }
+    }
+  });
+  if (!res || !res.modified && !res.optimized && !res.flattened && !res.styled)
+    return shouldPrintDebug && console.info("no res or none modified", res), null;
+  const styles = Array.from(cssMap.values()).map((x) => x.css).join(`
+`).trim(), result = (0, import_generator.default)(
+    ast,
+    {
+      concise: !1,
+      filename: sourcePath,
+      // this makes the debug output terrible, and i think sourcemap works already
+      retainLines: !1,
+      sourceFileName: sourcePath,
+      sourceMaps: !0
+    },
+    source
+  );
+  return shouldPrintDebug && (console.info(
+    `
+ -------- output code ------- 
+
+`,
+    result.code.split(`
+`).filter((x) => !x.startsWith("//")).join(`
+`)
+  ), console.info(`
+ -------- output style -------- 
+
+`, styles)), printLog(res), {
+    ast,
+    styles,
+    js: result.code,
+    map: result.map
+  };
+}
+//# sourceMappingURL=extractToClassNames.js.map

package/dist/extractor/extractToNative.js

@@ -0,0 +1,319 @@
+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 __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 __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);
+var extractToNative_exports = {};
+__export(extractToNative_exports, {
+  extractToNative: () => extractToNative,
+  getBabelParseDefinition: () => getBabelParseDefinition,
+  getBabelPlugin: () => getBabelPlugin
+});
+module.exports = __toCommonJS(extractToNative_exports);
+var import_node_path = require("node:path"), import_core = require("@babel/core"), import_generator = __toESM(require("@babel/generator")), import_helper_plugin_utils = require("@babel/helper-plugin-utils"), import_parser = require("@babel/parser"), import_template = __toESM(require("@babel/template")), t = __toESM(require("@babel/types")), import_createExtractor = require("./createExtractor"), import_getPragmaOptions = require("../getPragmaOptions"), import_createLogger = require("./createLogger"), import_extractHelpers = require("./extractHelpers"), import_literalToAst = require("./literalToAst"), import_loadTamagui = require("./loadTamagui");
+const importNativeView = (0, import_template.default)(`
+const __ReactNativeView = require('react-native').View;
+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;
+`), extractor = (0, import_createExtractor.createExtractor)({ platform: "native" });
+let tamaguiBuildOptionsLoaded;
+function extractToNative(sourceFileName, sourceCode, options) {
+  const ast = (0, import_parser.parse)(sourceCode, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"]
+  }), babelPlugin = getBabelPlugin(), out = (0, import_core.transformFromAstSync)(ast, sourceCode, {
+    plugins: [[babelPlugin, options]],
+    configFile: !1,
+    sourceFileName,
+    filename: sourceFileName
+  });
+  if (!out)
+    throw new Error("No output returned");
+  return out;
+}
+function getBabelPlugin() {
+  return (0, import_helper_plugin_utils.declare)((api, options) => (api.assertVersion(7), getBabelParseDefinition(options)));
+}
+function getBabelParseDefinition(options) {
+  return {
+    name: "tamagui",
+    visitor: {
+      Program: {
+        enter(root) {
+          let sourcePath = this.file.opts.filename;
+          if (sourcePath?.includes("node_modules") || !sourcePath?.endsWith(".jsx") && !sourcePath?.endsWith(".tsx"))
+            return;
+          process.env.SOURCE_ROOT?.endsWith("ios") && (sourcePath = sourcePath.replace("/ios", ""));
+          let hasImportedView = !1, hasImportedViewWrapper = !1;
+          const sheetStyles = {}, sheetIdentifier = root.scope.generateUidIdentifier("sheet"), firstCommentContents = (
+            // join because you can join together multiple pragmas
+            root.node.body[0]?.leadingComments?.map((comment) => comment?.value || " ").join(" ") ?? ""
+          ), firstComment = firstCommentContents ? `//${firstCommentContents}` : "", { shouldPrintDebug, shouldDisable } = (0, import_getPragmaOptions.getPragmaOptions)({
+            source: firstComment,
+            path: sourcePath
+          });
+          if (shouldDisable)
+            return;
+          !options.config && !options.components && (tamaguiBuildOptionsLoaded ||= (0, import_loadTamagui.loadTamaguiBuildConfigSync)({}));
+          const finalOptions = {
+            // @ts-ignore just in case they leave it out
+            platform: "native",
+            ...tamaguiBuildOptionsLoaded,
+            ...options
+          }, printLog = (0, import_createLogger.createLogger)(sourcePath, finalOptions);
+          function addSheetStyle(style, node) {
+            let key = `${`${Object.keys(sheetStyles).length}`}`;
+            if (process.env.NODE_ENV === "development") {
+              const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
+              key += `:${(0, import_node_path.basename)(sourcePath)}:${lineNumbers}`;
+            }
+            return sheetStyles[key] = style, readStyleExpr(key);
+          }
+          function readStyleExpr(key) {
+            return (0, import_template.default)("SHEET['KEY']")({
+              SHEET: sheetIdentifier.name,
+              KEY: key
+            }).expression;
+          }
+          let res;
+          try {
+            res = extractor.parseSync(root, {
+              importsWhitelist: ["constants.js", "colors.js"],
+              extractStyledDefinitions: options.forceExtractStyleDefinitions,
+              excludeProps: /* @__PURE__ */ new Set([
+                "className",
+                "userSelect",
+                "whiteSpace",
+                "textOverflow",
+                "cursor",
+                "contain"
+              ]),
+              shouldPrintDebug,
+              ...finalOptions,
+              // disable this extraction for now at least, need to figure out merging theme vs non-theme
+              // because theme need to stay in render(), whereas non-theme can be extracted
+              // for now just turn it off entirely at a small perf loss
+              disableExtractInlineMedia: !0,
+              // disable extracting variables as no native concept of them (only theme values)
+              disableExtractVariables: options.experimentalFlattenThemesOnNative ? !1 : "theme",
+              sourcePath,
+              // disabling flattening for now
+              // it's flattening a plain <Paragraph>hello</Paragraph> which breaks things because themes
+              // thinking it's not really worth the effort to do much compilation on native
+              // for now just disable flatten as it can only run in narrow places on native
+              // disableFlattening: 'styled',
+              getFlattenedNode({ isTextView }) {
+                return hasImportedView || (hasImportedView = !0, root.unshiftContainer("body", importNativeView())), isTextView ? "__ReactNativeText" : "__ReactNativeView";
+              },
+              onExtractTag(props) {
+                const { isFlattened } = props;
+                if (!isFlattened)
+                  return;
+                assertValidTag(props.node);
+                const stylesExpr = t.arrayExpression([]), hocStylesExpr = t.arrayExpression([]), expressions = [], finalAttrs = [], themeKeysUsed = /* @__PURE__ */ new Set();
+                function getStyleExpression(style) {
+                  if (!style) return;
+                  const { plain, themed } = splitThemeStyles(style);
+                  let themeExpr = null;
+                  if (themed && options.experimentalFlattenThemesOnNative) {
+                    for (const key in themed)
+                      themeKeysUsed.add(themed[key].split("$")[1]);
+                    themeExpr = getThemedStyleExpression(themed);
+                  }
+                  const ident = addSheetStyle(plain, props.node);
+                  return themeExpr ? (addStyleExpression(ident), addStyleExpression(ident, !0), themeExpr) : ident;
+                }
+                function addStyleExpression(expr, HOC = !1) {
+                  Array.isArray(expr) ? (HOC ? hocStylesExpr : stylesExpr).elements.push(...expr) : (HOC ? hocStylesExpr : stylesExpr).elements.push(expr);
+                }
+                function getThemedStyleExpression(styles) {
+                  const themedStylesAst = (0, import_literalToAst.literalToAst)(styles);
+                  return themedStylesAst.properties.forEach((_) => {
+                    const prop = _;
+                    prop.value.type === "StringLiteral" && (prop.value = t.memberExpression(
+                      t.identifier("theme"),
+                      t.identifier(prop.value.value.slice(1) + ".get()")
+                    ));
+                  }), themedStylesAst;
+                }
+                let hasDynamicStyle = !1;
+                for (const attr of props.attrs)
+                  switch (attr.type) {
+                    case "style": {
+                      let styleExpr = getStyleExpression(attr.value);
+                      addStyleExpression(styleExpr), options.experimentalFlattenThemesOnNative && addStyleExpression(styleExpr, !0);
+                      break;
+                    }
+                    case "ternary": {
+                      const { consequent, alternate } = attr.value, consExpr = getStyleExpression(consequent), altExpr = getStyleExpression(alternate);
+                      options.experimentalFlattenThemesOnNative && (expressions.push(attr.value.test), addStyleExpression(
+                        t.conditionalExpression(
+                          t.identifier(`_expressions[${expressions.length - 1}]`),
+                          consExpr || t.nullLiteral(),
+                          altExpr || t.nullLiteral()
+                        ),
+                        !0
+                      ));
+                      const styleExpr = t.conditionalExpression(
+                        attr.value.test,
+                        consExpr || t.nullLiteral(),
+                        altExpr || t.nullLiteral()
+                      );
+                      addStyleExpression(
+                        styleExpr
+                        // TODO: what is this for ?
+                        // isFlattened ? simpleHash(JSON.stringify({ consequent, alternate })) : undefined
+                      );
+                      break;
+                    }
+                    case "dynamic-style": {
+                      hasDynamicStyle = !0, expressions.push(attr.value), options.experimentalFlattenDynamicValues ? addStyleExpression(
+                        t.objectExpression([
+                          t.objectProperty(
+                            t.identifier(attr.name),
+                            t.identifier(`_expressions[${expressions.length - 1}]`)
+                          )
+                        ]),
+                        !0
+                      ) : addStyleExpression(
+                        t.objectExpression([
+                          t.objectProperty(
+                            t.identifier(attr.name),
+                            attr.value
+                          )
+                        ])
+                      );
+                      break;
+                    }
+                    case "attr": {
+                      t.isJSXSpreadAttribute(attr.value) && (0, import_extractHelpers.isSimpleSpread)(attr.value) && (stylesExpr.elements.push(
+                        t.memberExpression(attr.value.argument, t.identifier("style"))
+                      ), options.experimentalFlattenThemesOnNative && hocStylesExpr.elements.push(
+                        t.memberExpression(
+                          attr.value.argument,
+                          t.identifier("style")
+                        )
+                      )), finalAttrs.push(attr.value);
+                      break;
+                    }
+                  }
+                if (props.node.attributes = finalAttrs, props.isFlattened)
+                  if (options.experimentalFlattenThemesOnNative && (themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle)) {
+                    hasImportedViewWrapper || (root.unshiftContainer("body", importWithStyle()), hasImportedViewWrapper = !0);
+                    const name = props.node.name.name, WrapperIdentifier = root.scope.generateUidIdentifier(
+                      name + "Wrapper"
+                    );
+                    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.memberExpression(
+                                      t.identifier("React"),
+                                      t.identifier("useMemo")
+                                    ),
+                                    [
+                                      t.arrowFunctionExpression(
+                                        [],
+                                        t.blockStatement([
+                                          t.returnStatement(
+                                            t.arrayExpression([...hocStylesExpr.elements])
+                                          )
+                                        ])
+                                      ),
+                                      t.arrayExpression([
+                                        t.spreadElement(t.identifier("_expressions"))
+                                      ])
+                                    ]
+                                  )
+                                )
+                              ])
+                            )
+                          ])
+                        )
+                      ])
+                    ), props.node.name = WrapperIdentifier, props.jsxPath.node.closingElement && (props.jsxPath.node.closingElement.name = WrapperIdentifier), 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
+                        )
+                      )
+                    );
+              }
+            });
+          } catch (err) {
+            if (err instanceof Error) {
+              let message = `${shouldPrintDebug === "verbose" ? err : err.message}`;
+              message.includes("Unexpected return value from visitor method") && (message = "Unexpected return value from visitor method"), console.warn("Error in Tamagui parse, skipping", message, err.stack);
+              return;
+            }
+          }
+          if (!Object.keys(sheetStyles).length) {
+            shouldPrintDebug && console.info("END no styles"), res && printLog(res);
+            return;
+          }
+          const sheetObject = (0, import_literalToAst.literalToAst)(sheetStyles), sheetOuter = (0, import_template.default)(
+            "const SHEET = __ReactNativeStyleSheet.create(null)"
+          )({
+            SHEET: sheetIdentifier.name
+          });
+          sheetOuter.declarations[0].init.arguments[0] = sheetObject, root.unshiftContainer("body", sheetOuter), root.unshiftContainer("body", importStyleSheet()), shouldPrintDebug && (console.info(`
+ -------- output code ------- 
+`), console.info(
+            (0, import_generator.default)(root.parent).code.split(`
+`).filter((x) => !x.startsWith("//")).join(`
+`)
+          )), res && printLog(res);
+        }
+      }
+    }
+  };
+}
+function assertValidTag(node) {
+  node.attributes.find((x) => x.type === "JSXAttribute" && x.name.name === "style") && process.env.DEBUG?.startsWith("tamagui") && console.warn("\u26A0\uFE0F Cannot pass style attribute to extracted style");
+}
+function splitThemeStyles(style) {
+  const themed = {}, plain = {};
+  let noTheme = !0;
+  for (const key in style) {
+    const val = style[key];
+    val && val[0] === "$" ? (themed[key] = val, noTheme = !1) : plain[key] = val;
+  }
+  return { themed: noTheme ? null : themed, plain };
+}
+//# sourceMappingURL=extractToNative.js.map

package/dist/extractor/findTopmostFunction.js

@@ -0,0 +1,32 @@
+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 findTopmostFunction_exports = {};
+__export(findTopmostFunction_exports, {
+  findTopmostFunction: () => findTopmostFunction
+});
+module.exports = __toCommonJS(findTopmostFunction_exports);
+function findTopmostFunction(jsxPath) {
+  const isFunction = (path) => path.isArrowFunctionExpression() || path.isFunctionDeclaration() || path.isFunctionExpression();
+  let compFn = jsxPath.findParent(isFunction);
+  for (; compFn; ) {
+    const parent = compFn.findParent(isFunction);
+    if (parent)
+      compFn = parent;
+    else
+      break;
+  }
+  return compFn || null;
+}
+//# sourceMappingURL=findTopmostFunction.js.map