@tamagui/static 1.0.1-beta.57 → 1.0.1-beta.61

package/dist/esm/patchReactNativeWeb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/patchReactNativeWeb.ts"],
-  "sourcesContent": ["import path from 'path'\n\nimport * as fs from 'fs-extra'\n\n// were patching react-native-web so we can use some internal methods\n// we do it this way because we need to rely on webpack or bundler config to determine cjs vs esm\n// so we can't just require it all directly\n// would be nice in the future to be able to eject from react-native-web entirely optionally\n\n// keep it sync\nexport function patchReactNativeWeb(dir: string = require.resolve('react-native-web')) {\n  const rootDir = dir.replace(/\\/dist.*/, '')\n  const modulePath = path.join(rootDir, 'dist', 'tamagui-exports.js')\n  const cjsPath = path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js')\n  const shouldPatchExports =\n    fs.existsSync(modulePath) &&\n    fs.readFileSync(modulePath, 'utf-8') === moduleExports &&\n    fs.existsSync(cjsPath) &&\n    fs.readFileSync(cjsPath, 'utf-8') === cjsExports\n  if (!shouldPatchExports) {\n    console.log('      | patch ' + path.relative(rootDir, modulePath))\n    console.log('      | patch ' + path.relative(rootDir, cjsPath))\n    fs.writeFileSync(modulePath, moduleExports)\n    fs.writeFileSync(cjsPath, cjsExports)\n  }\n\n  // patch to allow className prop\n  const patches = [\n    {\n      id: 'dom-props',\n      filePath: ['modules', 'createDOMProps', 'index.js'],\n      replacee: `  if (dataSet != null) {`,\n      replacer: `\n  if (props.dataSet && props.dataSet.className) {\n    const { className, ...dataSetRest } = props.dataSet\n    classList = className\n    dataSet = dataSetRest\n  }\n  if (props.dataSet && props.dataSet.id) {\n    domProps['id'] = props.dataSet.id\n  }\n  if (dataSet != null) {`,\n    },\n    {\n      id: 'forward-props',\n      filePath: ['modules', 'forwardedProps', 'index.js'],\n      replacee: `dataSet: true,`,\n      replacer: `id: true, dataSet: true,`,\n    },\n  ]\n\n  for (const { filePath, replacee, replacer } of patches) {\n    const files = [\n      path.join(rootDir, 'dist', ...filePath),\n      path.join(rootDir, 'dist', 'cjs', ...filePath),\n    ]\n    for (const file of files) {\n      const contents = fs.readFileSync(file, 'utf-8')\n      if (contents.includes(replacer)) {\n        continue\n      }\n      if (!contents.includes(replacee)) {\n        console.warn(\n          `\u26A0\uFE0F Error: couldn't apply className patch! Maybe using incompatible react-native-web version.`,\n          {\n            replacee,\n            contents,\n          }\n        )\n        continue\n      }\n      console.log('      | patch ' + path.relative(rootDir, file))\n      fs.writeFileSync(file, contents.replace(replacee, replacer))\n    }\n  }\n\n  // if entry files not patched, patch them:\n  const moduleEntry = path.join(rootDir, 'dist', 'index.js')\n  const moduleEntrySrc = fs.readFileSync(moduleEntry, 'utf-8')\n  if (!moduleEntrySrc.includes('// tamagui-patch-v4')) {\n    fs.writeFileSync(\n      moduleEntry,\n      `${removePatch(moduleEntrySrc)}\n\n// tamagui-patch-v4\nimport * as TExports from './tamagui-exports'\nexport const TamaguiExports = TExports\n// tamagui-patch-end\n`\n    )\n  }\n  const cjsEntry = path.join(rootDir, 'dist', 'cjs', 'index.js')\n  const cjsEntrySrc = fs.readFileSync(cjsEntry, 'utf-8')\n  if (!cjsEntrySrc.includes('// tamagui-patch-v4')) {\n    fs.writeFileSync(\n      cjsEntry,\n      `${removePatch(cjsEntrySrc)}\n\n// tamagui-patch-v4\nexports.TamaguiExports = _interopRequireDefault(require(\"./tamagui-exports\"));\n// tamagui-patch-end\n`\n    )\n  }\n}\n\nfunction removePatch(source: string) {\n  return source.replace(/\\/\\/ tamagui-patch([.\\s\\S]*)/g, '')\n}\n\n// view exports/View.ts\nconst forwardedPropsObj = `{\n  ...fwdProps.defaultProps,\n  ...fwdProps.accessibilityProps,\n  ...fwdProps.clickProps,\n  ...fwdProps.focusProps,\n  ...fwdProps.keyboardProps,\n  ...fwdProps.mouseProps,\n  ...fwdProps.touchProps,\n  ...fwdProps.styleProps,\n  href: true,\n  lang: true,\n  onScroll: true,\n  onWheel: true,\n  pointerEvents: true\n}\n`\n\nconst moduleExports = `\nexport { atomic } from './exports/StyleSheet/compile'\nexport { default as createCompileableStyle } from './exports/StyleSheet/createCompileableStyle'\nexport { default as createReactDOMStyle } from './exports/StyleSheet/createReactDOMStyle'\nexport { default as i18Style } from './exports/StyleSheet/i18nStyle'\nexport { default as createDOMProps } from './modules/createDOMProps'\nexport { default as AccessibilityUtil } from './modules/AccessibilityUtil'\nexport { default as createElement } from './exports/createElement'\nexport { default as css } from './exports/StyleSheet/css'\nexport { default as TextAncestorContext } from './exports/Text/TextAncestorContext'\nexport { default as pick } from './modules/pick'\nexport { default as useElementLayout } from './modules/useElementLayout'\nexport { default as useMergeRefs } from './modules/useMergeRefs'\nexport { default as usePlatformMethods } from './modules/usePlatformMethods'\nexport { default as useResponderEvents } from './modules/useResponderEvents'\nimport * as fwdProps from './modules/forwardedProps'\nexport const forwardedProps = ${forwardedPropsObj}\n`\n\nconst cjsExports = `\nexports.atomic = require('./exports/StyleSheet/compile').atomic\nexports.createCompileableStyle = require('./exports/StyleSheet/createCompileableStyle')\nexports.createReactDOMStyle = require('./exports/StyleSheet/createReactDOMStyle')\nexports.i18Style = require('./exports/StyleSheet/i18nStyle')\nexports.createDOMProps = require('./modules/createDOMProps')\nexports.AccessibilityUtil = require('./modules/AccessibilityUtil')\nexports.createElement = require('./exports/createElement')\nexports.css = require('./exports/StyleSheet/css')\nexports.TextAncestorContext = require('./exports/Text/TextAncestorContext')\nexports.pick = require('./modules/pick')\nexports.useElementLayout = require('./modules/useElementLayout')\nexports.useMergeRefs = require('./modules/useMergeRefs')\nexports.usePlatformMethods = require('./modules/usePlatformMethods')\nexports.useResponderEvents = require('./modules/useResponderEvents')\nconst fwdProps = require('./modules/forwardedProps')\nexports.forwardedProps = ${forwardedPropsObj}\n`\n"],
-  "mappings": ";;AAAA;AAEA;AAQO,6BAA6B,MAA8B,qCAAqB;AACrF,QAAM,UAAU,IAAI,QAAQ,YAAY,EAAE;AAC1C,QAAM,aAAa,KAAK,KAAK,SAAS,QAAQ,oBAAoB;AAClE,QAAM,UAAU,KAAK,KAAK,SAAS,QAAQ,OAAO,oBAAoB;AACtE,QAAM,qBACJ,GAAG,WAAW,UAAU,KACxB,GAAG,aAAa,YAAY,OAAO,MAAM,iBACzC,GAAG,WAAW,OAAO,KACrB,GAAG,aAAa,SAAS,OAAO,MAAM;AACxC,MAAI,CAAC,oBAAoB;AACvB,YAAQ,IAAI,mBAAmB,KAAK,SAAS,SAAS,UAAU,CAAC;AACjE,YAAQ,IAAI,mBAAmB,KAAK,SAAS,SAAS,OAAO,CAAC;AAC9D,OAAG,cAAc,YAAY,aAAa;AAC1C,OAAG,cAAc,SAAS,UAAU;AAAA,EACtC;AAGA,QAAM,UAAU;AAAA,IACd;AAAA,MACE,IAAI;AAAA,MACJ,UAAU,CAAC,WAAW,kBAAkB,UAAU;AAAA,MAClD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUZ;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,UAAU,CAAC,WAAW,kBAAkB,UAAU;AAAA,MAClD,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,aAAW,EAAE,UAAU,UAAU,cAAc,SAAS;AACtD,UAAM,QAAQ;AAAA,MACZ,KAAK,KAAK,SAAS,QAAQ,GAAG,QAAQ;AAAA,MACtC,KAAK,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ;AAAA,IAC/C;AACA,eAAW,QAAQ,OAAO;AACxB,YAAM,WAAW,GAAG,aAAa,MAAM,OAAO;AAC9C,UAAI,SAAS,SAAS,QAAQ,GAAG;AAC/B;AAAA,MACF;AACA,UAAI,CAAC,SAAS,SAAS,QAAQ,GAAG;AAChC,gBAAQ,KACN,0GACA;AAAA,UACE;AAAA,UACA;AAAA,QACF,CACF;AACA;AAAA,MACF;AACA,cAAQ,IAAI,mBAAmB,KAAK,SAAS,SAAS,IAAI,CAAC;AAC3D,SAAG,cAAc,MAAM,SAAS,QAAQ,UAAU,QAAQ,CAAC;AAAA,IAC7D;AAAA,EACF;AAGA,QAAM,cAAc,KAAK,KAAK,SAAS,QAAQ,UAAU;AACzD,QAAM,iBAAiB,GAAG,aAAa,aAAa,OAAO;AAC3D,MAAI,CAAC,eAAe,SAAS,qBAAqB,GAAG;AACnD,OAAG,cACD,aACA,GAAG,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAO/B;AAAA,EACF;AACA,QAAM,WAAW,KAAK,KAAK,SAAS,QAAQ,OAAO,UAAU;AAC7D,QAAM,cAAc,GAAG,aAAa,UAAU,OAAO;AACrD,MAAI,CAAC,YAAY,SAAS,qBAAqB,GAAG;AAChD,OAAG,cACD,UACA,GAAG,YAAY,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,CAM5B;AAAA,EACF;AACF;AA9FgB;AAgGhB,qBAAqB,QAAgB;AACnC,SAAO,OAAO,QAAQ,iCAAiC,EAAE;AAC3D;AAFS;AAKT,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1B,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAgBU;AAAA;AAGhC,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAgBQ;AAAA;",
+  "sourcesContent": ["import path from 'path'\n\nimport * as fs from 'fs-extra'\n\n// were patching react-native-web so we can use some internal methods\n// we do it this way because we need to rely on webpack or bundler config to determine cjs vs esm\n// so we can't just require it all directly\n// would be nice in the future to be able to eject from react-native-web entirely optionally\n\n// keep it sync\nexport function patchReactNativeWeb(dir: string = require.resolve('react-native-web')) {\n  const rootDir = dir.replace(/[\\/\\\\]dist.*/, '')\n  const modulePath = path.join(rootDir, 'dist', 'tamagui-exports.js')\n  const cjsPath = path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js')\n  const shouldPatchExports =\n    fs.existsSync(modulePath) &&\n    fs.readFileSync(modulePath, 'utf-8') === moduleExports &&\n    fs.existsSync(cjsPath) &&\n    fs.readFileSync(cjsPath, 'utf-8') === cjsExports\n  if (!shouldPatchExports) {\n    console.log('      | patch ' + path.relative(rootDir, modulePath))\n    console.log('      | patch ' + path.relative(rootDir, cjsPath))\n    fs.writeFileSync(modulePath, moduleExports)\n    fs.writeFileSync(cjsPath, cjsExports)\n  }\n\n  // patch to allow className prop\n  const patches = [\n    {\n      id: 'dom-props',\n      filePath: ['modules', 'createDOMProps', 'index.js'],\n      replacee: `  if (dataSet != null) {`,\n      replacer: `\n  if (props.dataSet && props.dataSet.className) {\n    const { className, ...dataSetRest } = props.dataSet\n    classList = className\n    dataSet = dataSetRest\n  }\n  if (props.dataSet && props.dataSet.id) {\n    domProps['id'] = props.dataSet.id\n  }\n  if (dataSet != null) {`,\n    },\n    {\n      id: 'forward-props',\n      filePath: ['modules', 'forwardedProps', 'index.js'],\n      replacee: `dataSet: true,`,\n      replacer: `id: true, dataSet: true,`,\n    },\n  ]\n\n  for (const { filePath, replacee, replacer } of patches) {\n    const files = [\n      path.join(rootDir, 'dist', ...filePath),\n      path.join(rootDir, 'dist', 'cjs', ...filePath),\n    ]\n    for (const file of files) {\n      const contents = fs.readFileSync(file, 'utf-8')\n      if (contents.includes(replacer)) {\n        continue\n      }\n      if (!contents.includes(replacee)) {\n        console.warn(\n          `\u26A0\uFE0F Error: couldn't apply className patch! Maybe using incompatible react-native-web version.`,\n          {\n            replacee,\n            contents,\n          }\n        )\n        continue\n      }\n      console.log('      | patch ' + path.relative(rootDir, file))\n      fs.writeFileSync(file, contents.replace(replacee, replacer))\n    }\n  }\n\n  // if entry files not patched, patch them:\n  const moduleEntry = path.join(rootDir, 'dist', 'index.js')\n  const moduleEntrySrc = fs.readFileSync(moduleEntry, 'utf-8')\n  if (!moduleEntrySrc.includes('// tamagui-patch-v4')) {\n    fs.writeFileSync(\n      moduleEntry,\n      `${removePatch(moduleEntrySrc)}\n\n// tamagui-patch-v4\nimport * as TExports from './tamagui-exports'\nexport const TamaguiExports = TExports\n// tamagui-patch-end\n`\n    )\n  }\n  const cjsEntry = path.join(rootDir, 'dist', 'cjs', 'index.js')\n  const cjsEntrySrc = fs.readFileSync(cjsEntry, 'utf-8')\n  if (!cjsEntrySrc.includes('// tamagui-patch-v4')) {\n    fs.writeFileSync(\n      cjsEntry,\n      `${removePatch(cjsEntrySrc)}\n\n// tamagui-patch-v4\nexports.TamaguiExports = _interopRequireDefault(require(\"./tamagui-exports\"));\n// tamagui-patch-end\n`\n    )\n  }\n}\n\nfunction removePatch(source: string) {\n  return source.replace(/\\/\\/ tamagui-patch([.\\s\\S]*)/g, '')\n}\n\n// view exports/View.ts\nconst forwardedPropsObj = `{\n  ...fwdProps.defaultProps,\n  ...fwdProps.accessibilityProps,\n  ...fwdProps.clickProps,\n  ...fwdProps.focusProps,\n  ...fwdProps.keyboardProps,\n  ...fwdProps.mouseProps,\n  ...fwdProps.touchProps,\n  ...fwdProps.styleProps,\n  href: true,\n  lang: true,\n  onScroll: true,\n  onWheel: true,\n  pointerEvents: true\n}\n`\n\nconst moduleExports = `\nexport { atomic } from './exports/StyleSheet/compile'\nexport { default as createCompileableStyle } from './exports/StyleSheet/createCompileableStyle'\nexport { default as createReactDOMStyle } from './exports/StyleSheet/createReactDOMStyle'\nexport { default as i18Style } from './exports/StyleSheet/i18nStyle'\nexport { default as createDOMProps } from './modules/createDOMProps'\nexport { default as AccessibilityUtil } from './modules/AccessibilityUtil'\nexport { default as createElement } from './exports/createElement'\nexport { default as css } from './exports/StyleSheet/css'\nexport { default as TextAncestorContext } from './exports/Text/TextAncestorContext'\nexport { default as pick } from './modules/pick'\nexport { default as useElementLayout } from './modules/useElementLayout'\nexport { default as useMergeRefs } from './modules/useMergeRefs'\nexport { default as usePlatformMethods } from './modules/usePlatformMethods'\nexport { default as useResponderEvents } from './modules/useResponderEvents'\nimport * as fwdProps from './modules/forwardedProps'\nexport const forwardedProps = ${forwardedPropsObj}\n`\n\nconst cjsExports = `\nexports.atomic = require('./exports/StyleSheet/compile').atomic\nexports.createCompileableStyle = require('./exports/StyleSheet/createCompileableStyle')\nexports.createReactDOMStyle = require('./exports/StyleSheet/createReactDOMStyle')\nexports.i18Style = require('./exports/StyleSheet/i18nStyle')\nexports.createDOMProps = require('./modules/createDOMProps')\nexports.AccessibilityUtil = require('./modules/AccessibilityUtil')\nexports.createElement = require('./exports/createElement')\nexports.css = require('./exports/StyleSheet/css')\nexports.TextAncestorContext = require('./exports/Text/TextAncestorContext')\nexports.pick = require('./modules/pick')\nexports.useElementLayout = require('./modules/useElementLayout')\nexports.useMergeRefs = require('./modules/useMergeRefs')\nexports.usePlatformMethods = require('./modules/usePlatformMethods')\nexports.useResponderEvents = require('./modules/useResponderEvents')\nconst fwdProps = require('./modules/forwardedProps')\nexports.forwardedProps = ${forwardedPropsObj}\n`\n"],
+  "mappings": ";;AAAA;AAEA;AAQO,6BAA6B,MAA8B,qCAAqB;AACrF,QAAM,UAAU,IAAI,QAAQ,gBAAgB,EAAE;AAC9C,QAAM,aAAa,KAAK,KAAK,SAAS,QAAQ,oBAAoB;AAClE,QAAM,UAAU,KAAK,KAAK,SAAS,QAAQ,OAAO,oBAAoB;AACtE,QAAM,qBACJ,GAAG,WAAW,UAAU,KACxB,GAAG,aAAa,YAAY,OAAO,MAAM,iBACzC,GAAG,WAAW,OAAO,KACrB,GAAG,aAAa,SAAS,OAAO,MAAM;AACxC,MAAI,CAAC,oBAAoB;AACvB,YAAQ,IAAI,mBAAmB,KAAK,SAAS,SAAS,UAAU,CAAC;AACjE,YAAQ,IAAI,mBAAmB,KAAK,SAAS,SAAS,OAAO,CAAC;AAC9D,OAAG,cAAc,YAAY,aAAa;AAC1C,OAAG,cAAc,SAAS,UAAU;AAAA,EACtC;AAGA,QAAM,UAAU;AAAA,IACd;AAAA,MACE,IAAI;AAAA,MACJ,UAAU,CAAC,WAAW,kBAAkB,UAAU;AAAA,MAClD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUZ;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,UAAU,CAAC,WAAW,kBAAkB,UAAU;AAAA,MAClD,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,aAAW,EAAE,UAAU,UAAU,cAAc,SAAS;AACtD,UAAM,QAAQ;AAAA,MACZ,KAAK,KAAK,SAAS,QAAQ,GAAG,QAAQ;AAAA,MACtC,KAAK,KAAK,SAAS,QAAQ,OAAO,GAAG,QAAQ;AAAA,IAC/C;AACA,eAAW,QAAQ,OAAO;AACxB,YAAM,WAAW,GAAG,aAAa,MAAM,OAAO;AAC9C,UAAI,SAAS,SAAS,QAAQ,GAAG;AAC/B;AAAA,MACF;AACA,UAAI,CAAC,SAAS,SAAS,QAAQ,GAAG;AAChC,gBAAQ,KACN,0GACA;AAAA,UACE;AAAA,UACA;AAAA,QACF,CACF;AACA;AAAA,MACF;AACA,cAAQ,IAAI,mBAAmB,KAAK,SAAS,SAAS,IAAI,CAAC;AAC3D,SAAG,cAAc,MAAM,SAAS,QAAQ,UAAU,QAAQ,CAAC;AAAA,IAC7D;AAAA,EACF;AAGA,QAAM,cAAc,KAAK,KAAK,SAAS,QAAQ,UAAU;AACzD,QAAM,iBAAiB,GAAG,aAAa,aAAa,OAAO;AAC3D,MAAI,CAAC,eAAe,SAAS,qBAAqB,GAAG;AACnD,OAAG,cACD,aACA,GAAG,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAO/B;AAAA,EACF;AACA,QAAM,WAAW,KAAK,KAAK,SAAS,QAAQ,OAAO,UAAU;AAC7D,QAAM,cAAc,GAAG,aAAa,UAAU,OAAO;AACrD,MAAI,CAAC,YAAY,SAAS,qBAAqB,GAAG;AAChD,OAAG,cACD,UACA,GAAG,YAAY,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,CAM5B;AAAA,EACF;AACF;AA9FgB;AAgGhB,qBAAqB,QAAgB;AACnC,SAAO,OAAO,QAAQ,iCAAiC,EAAE;AAC3D;AAFS;AAKT,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1B,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAgBU;AAAA;AAGhC,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAgBQ;AAAA;",
   "names": []
 }

package/dist/jsx/extractor/createExtractor.js

@@ -97,7 +97,16 @@ function createExtractor() {
       }
       tm.mark("load-tamagui", shouldPrintDebug === "verbose");
       loadedTamaguiConfig = tamaguiConfig;
-      const defaultTheme = proxyThemeVariables(tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]);
+      const proxiedTheme = proxyThemeVariables(tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]);
+      const themeAccessListeners = /* @__PURE__ */ new Set();
+      const defaultTheme = new Proxy(proxiedTheme, {
+        get(target2, key) {
+          if (key[0] === "$") {
+            themeAccessListeners.forEach((cb) => cb(String(key)));
+          }
+          return Reflect.get(target2, key);
+        }
+      });
       const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
       const isInternalImport = /* @__PURE__ */ __name((importStr) => {
         return isInsideTamagui(sourcePath) && importStr[0] === ".";
@@ -832,6 +841,14 @@ function createExtractor() {
             const shouldWrapThme = allOtherPropsExtractable && !!themeVal;
             const canFlattenProps = inlined.size === 0 || shouldWrapThme || allOtherPropsExtractable;
             let shouldFlatten = !shouldDeopt && canFlattenProps && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true);
+            if (disableExtractVariables) {
+              themeAccessListeners.add((key) => {
+                shouldFlatten = false;
+                if (shouldPrintDebug) {
+                  console.log(" ! accessing theme key, avoid flatten", key);
+                }
+              });
+            }
             if (shouldPrintDebug) {
               console.log(" - flatten?", objToStr({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapThme, allOtherPropsExtractable, hasOnlyStringChildren }));
             }

package/dist/jsx/extractor/extractToClassNames.js

@@ -230,7 +230,7 @@ function extractToClassNames({
         node.attributes.push(t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(expr)));
       }
       const comment = util.format("/* %s:%s (%s) */", filePath, lineNumbers, originalNodeName);
-      for (const { className, rules, identifier, value } of finalStyles) {
+      for (const { className, rules } of finalStyles) {
         if (cssMap.has(className)) {
           if (comment) {
             const val = cssMap.get(className);

package/dist/jsx/patchReactNativeWeb.js

@@ -3,7 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import path from "path";
 import * as fs from "fs-extra";
 function patchReactNativeWeb(dir = require.resolve("react-native-web")) {
-  const rootDir = dir.replace(/\/dist.*/, "");
+  const rootDir = dir.replace(/[\/\\]dist.*/, "");
   const modulePath = path.join(rootDir, "dist", "tamagui-exports.js");
   const cjsPath = path.join(rootDir, "dist", "cjs", "tamagui-exports.js");
   const shouldPatchExports = fs.existsSync(modulePath) && fs.readFileSync(modulePath, "utf-8") === moduleExports && fs.existsSync(cjsPath) && fs.readFileSync(cjsPath, "utf-8") === cjsExports;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.1-beta.57",
+  "version": "1.0.1-beta.61",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -16,6 +17,7 @@
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build",
     "test": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 jest --forceExit",
+    "test:babel": "yarn test tests/babel-test.tsx",
     "test:debug": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 DEBUG_FILE=extract-specs.tsx DEBUG=1 yarn test",
     "test:watch": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 yarn test --watch",
     "test:update-snapshots": "NODE_ENV=test jest --updateSnapshot"
@@ -34,11 +36,11 @@
     "@babel/parser": "^7.15.7",
     "@babel/traverse": "^7.15.4",
     "@expo/match-media": "^0.3.0",
-    "@tamagui/build": "^1.0.1-beta.57",
-    "@tamagui/core-node": "^1.0.1-beta.57",
-    "@tamagui/fake-react-native": "^1.0.1-beta.57",
-    "@tamagui/helpers": "^1.0.1-beta.57",
-    "@tamagui/proxy-worm": "^1.0.1-beta.57",
+    "@tamagui/build": "^1.0.1-beta.61",
+    "@tamagui/core-node": "^1.0.1-beta.61",
+    "@tamagui/fake-react-native": "^1.0.1-beta.61",
+    "@tamagui/helpers": "^1.0.1-beta.61",
+    "@tamagui/proxy-worm": "^1.0.1-beta.61",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.14.36",
     "esbuild-register": "^3.3.2",
@@ -46,7 +48,7 @@
     "fs-extra": "^9.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
-    "tamagui": "^1.0.1-beta.57"
+    "tamagui": "^1.0.1-beta.61"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.14.5",

package/src/constants.ts

@@ -0,0 +1,13 @@
+import findCacheDir from 'find-cache-dir'
+
+export const CSS_FILE_NAME = '__snack.css'
+
+// ENSURE THIS ISNT THE SAME AS THE SEPARATOR USED FOR STYLE KEYS
+// SEE matching one in concatClassName
+export const MEDIA_SEP = '_'
+
+// ensure cache dir
+export const cacheDir = findCacheDir({ name: 'tamagui', create: true })
+
+export const FAILED_EVAL = Symbol('failed_style_eval')
+export const CONCAT_CLASSNAME_IMPORT = 'concatClassName'

package/src/extractor/accessSafe.ts

@@ -0,0 +1,18 @@
+import * as t from '@babel/types'
+
+// accessSafe wraps memberExpressions in object/null checks
+// TODO: inject this as a function? this gets pretty repetitive
+export function accessSafe(obj: t.Expression, member: string): t.LogicalExpression {
+  return t.logicalExpression(
+    '&&',
+    t.logicalExpression(
+      '&&',
+      // typeof obj === 'object
+      t.binaryExpression('===', t.unaryExpression('typeof', obj), t.stringLiteral('object')),
+      // obj !== null
+      t.binaryExpression('!==', obj, t.nullLiteral())
+    ),
+    // obj.member
+    t.memberExpression(obj, t.identifier(member), false)
+  )
+}

package/src/extractor/babelParse.ts

@@ -0,0 +1,27 @@
+import * as babelParser from '@babel/parser'
+
+const plugins: babelParser.ParserPlugin[] = [
+  'asyncGenerators',
+  'classProperties',
+  'dynamicImport',
+  'functionBind',
+  'jsx',
+  'numericSeparator',
+  'objectRestSpread',
+  'optionalCatchBinding',
+  'decorators-legacy',
+  'typescript',
+  'optionalChaining',
+  'nullishCoalescingOperator',
+]
+
+export const parserOptions: babelParser.ParserOptions = Object.freeze({
+  plugins,
+  sourceType: 'module',
+})
+
+const parser = babelParser.parse.bind(babelParser)
+
+export function babelParse(code: string | Buffer): any {
+  return parser(code.toString(), parserOptions)
+}

package/src/extractor/buildClassName.ts

@@ -0,0 +1,61 @@
+import * as t from '@babel/types'
+
+import { ClassNameObject } from '../types'
+
+export function buildClassName(
+  classNameObjects: ClassNameObject[]
+): t.Expression | t.StringLiteral | null {
+  return classNameObjects.reduce<t.Expression | null>((acc, val) => {
+    if (acc == null) {
+      if (
+        // pass conditional expressions through
+        t.isConditionalExpression(val) ||
+        // pass non-null literals through
+        t.isStringLiteral(val) ||
+        t.isNumericLiteral(val)
+      ) {
+        return val
+      }
+      return t.logicalExpression('||', val, t.stringLiteral(''))
+    }
+
+    let inner: t.Expression
+    if (t.isStringLiteral(val)) {
+      if (t.isStringLiteral(acc)) {
+        // join adjacent string literals
+        return t.stringLiteral(`${acc.value} ${val.value}`)
+      }
+      inner = t.stringLiteral(` ${val.value}`)
+    } else if (t.isLiteral(val)) {
+      inner = t.binaryExpression('+', t.stringLiteral(' '), val)
+    } else if (t.isConditionalExpression(val) || t.isBinaryExpression(val)) {
+      if (t.isStringLiteral(acc)) {
+        return t.binaryExpression('+', t.stringLiteral(`${acc.value} `), val)
+      }
+      inner = t.binaryExpression('+', t.stringLiteral(' '), val)
+    } else if (t.isIdentifier(val) || t.isMemberExpression(val)) {
+      // identifiers and member expressions make for reasonable ternaries
+      inner = t.conditionalExpression(
+        val,
+        t.binaryExpression('+', t.stringLiteral(' '), val),
+        t.stringLiteral('')
+      )
+    } else {
+      if (t.isStringLiteral(acc)) {
+        return t.binaryExpression(
+          '+',
+          t.stringLiteral(`${acc.value} `),
+          t.logicalExpression('||', val, t.stringLiteral(''))
+        )
+      }
+      // use a logical expression for more complex prop values
+      inner = t.binaryExpression(
+        '+',
+        t.stringLiteral(' '),
+        t.logicalExpression('||', val, t.stringLiteral(''))
+      )
+    }
+
+    return t.binaryExpression('+', acc, inner)
+  }, null)
+}

package/src/extractor/createEvaluator.ts

@@ -0,0 +1,69 @@
+import vm from 'vm'
+
+import generate from '@babel/generator'
+import { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+import type { TamaguiConfig } from '@tamagui/core'
+import { createCSSVariable } from '@tamagui/core-node'
+
+import { FAILED_EVAL } from '../constants'
+import { evaluateAstNode } from './evaluateAstNode'
+import { isValidThemeHook } from './extractHelpers'
+
+export function createEvaluator({
+  tamaguiConfig,
+  staticNamespace,
+  sourcePath,
+  traversePath,
+  shouldPrintDebug,
+}: {
+  tamaguiConfig: TamaguiConfig
+  staticNamespace: Record<string, any>
+  sourcePath: string
+  traversePath: NodePath<t.JSXElement>
+  shouldPrintDebug: boolean | 'verbose'
+}) {
+  // called when evaluateAstNode encounters a dynamic-looking prop
+  const evalFn = (n: t.Node) => {
+    // themes
+    if (
+      t.isMemberExpression(n) &&
+      t.isIdentifier(n.property) &&
+      isValidThemeHook(traversePath, n, sourcePath)
+    ) {
+      const key = n.property.name
+      if (shouldPrintDebug) {
+        console.log('    > found theme prop', key)
+      }
+      console.log('SHOULD FIND THEME (NESTED NOW)', key) // tamaguiConfig.themes)
+      // if (!themeKeys.has(key)) {
+      //   throw new Error(`    > accessing non-existent theme key: ${key}`)
+      // }
+      return createCSSVariable(key)
+    }
+    // variable
+    if (t.isIdentifier(n) && staticNamespace.hasOwnProperty(n.name)) {
+      return staticNamespace[n.name]
+    }
+    const evalContext = vm.createContext(staticNamespace)
+    const code = `(${generate(n as any).code})`
+    // if (shouldPrintDebug) {
+    //   console.log('evaluating', { n, code, evalContext })
+    // }
+    return vm.runInContext(code, evalContext)
+  }
+
+  return (n: t.Node) => {
+    return evaluateAstNode(n, evalFn)
+  }
+}
+
+export function createSafeEvaluator(attemptEval: (n: t.Node) => any) {
+  return (n: t.Node) => {
+    try {
+      return attemptEval(n)
+    } catch (err) {
+      return FAILED_EVAL
+    }
+  }
+}