@tamagui/static 1.0.0-alpha.3 → 1.0.0-alpha.7

package/dist/patchReactNativeWeb.js

@@ -4,8 +4,24 @@ import * as fs from "fs";
 import path from "path";
 function patchReactNativeWeb() {
   const rootDir = require.resolve("react-native-web").replace(/\/dist.*/, "");
-  fs.writeFileSync(path.join(rootDir, "dist", "tamagui-exports.js"), moduleExports);
-  fs.writeFileSync(path.join(rootDir, "dist", "cjs", "tamagui-exports.js"), cjsExports);
+  const modulePath = path.join(rootDir, "dist", "tamagui-exports.js");
+  const cjsPath = path.join(rootDir, "dist", "cjs", "tamagui-exports.js");
+  const isEqual = (() => {
+    let res = false;
+    try {
+      res = fs.readFileSync(modulePath, "utf-8") === moduleExports && fs.readFileSync(cjsPath, "utf-8") == cjsExports;
+    } catch {
+      res = false;
+    }
+    return res;
+  })();
+  if (!isEqual) {
+    console.log("\u{1F95A} Tamagui patching react-native-web to share atomic styling primitives");
+    console.log("   > adding", modulePath);
+    console.log("   > adding", cjsPath);
+    fs.writeFileSync(modulePath, moduleExports);
+    fs.writeFileSync(cjsPath, cjsExports);
+  }
   const moduleEntry = path.join(rootDir, "dist", "index.js");
   const moduleEntrySrc = fs.readFileSync(moduleEntry, "utf-8");
   if (!moduleEntrySrc.includes("// tamagui-patch-v4")) {
@@ -26,7 +42,6 @@ export const TamaguiExports = TExports
 exports.TamaguiExports = _interopRequireDefault(require("./tamagui-exports"));
 // tamagui-patch-end
 `);
-    console.log(`Tamagui patched react-native-web`);
   }
 }
 __name(patchReactNativeWeb, "patchReactNativeWeb");

package/dist/patchReactNativeWeb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/patchReactNativeWeb.ts"],
-  "sourcesContent": ["import * as fs from 'fs'\nimport path from 'path'\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() {\n  const rootDir = require.resolve('react-native-web').replace(/\\/dist.*/, '')\n\n  // write our export files\n  fs.writeFileSync(path.join(rootDir, 'dist', 'tamagui-exports.js'), moduleExports)\n  fs.writeFileSync(path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js'), cjsExports)\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    console.log(`Tamagui patched react-native-web`)\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;AACA;AAQO,+BAA+B;AACpC,QAAM,UAAU,AAAgB,oCAAoB,QAAQ,YAAY;AAGxE,KAAG,cAAc,KAAK,KAAK,SAAS,QAAQ,uBAAuB;AACnE,KAAG,cAAc,KAAK,KAAK,SAAS,QAAQ,OAAO,uBAAuB;AAG1E,QAAM,cAAc,KAAK,KAAK,SAAS,QAAQ;AAC/C,QAAM,iBAAiB,GAAG,aAAa,aAAa;AACpD,MAAI,CAAC,eAAe,SAAS,wBAAwB;AACnD,OAAG,cACD,aACA,GAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnB,QAAM,WAAW,KAAK,KAAK,SAAS,QAAQ,OAAO;AACnD,QAAM,cAAc,GAAG,aAAa,UAAU;AAC9C,MAAI,CAAC,YAAY,SAAS,wBAAwB;AAChD,OAAG,cACD,UACA,GAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,YAAQ,IAAI;AAAA;AAAA;AAnCA;AAuChB,qBAAqB,QAAgB;AACnC,SAAO,OAAO,QAAQ,iCAAiC;AAAA;AADhD;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 * as fs from 'fs'\nimport path from 'path'\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() {\n  const rootDir = require.resolve('react-native-web').replace(/\\/dist.*/, '')\n  const modulePath = path.join(rootDir, 'dist', 'tamagui-exports.js')\n  const cjsPath = path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js')\n\n  const isEqual = (() => {\n    let res = false\n    try {\n      res =\n        fs.readFileSync(modulePath, 'utf-8') === moduleExports &&\n        fs.readFileSync(cjsPath, 'utf-8') == cjsExports\n    } catch {\n      res = false\n    }\n    return res\n  })()\n\n  if (!isEqual) {\n    console.log('\uD83E\uDD5A Tamagui patching react-native-web to share atomic styling primitives')\n    console.log('   > adding', modulePath)\n    console.log('   > adding', cjsPath)\n    fs.writeFileSync(modulePath, moduleExports)\n    fs.writeFileSync(cjsPath, cjsExports)\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;AACA;AAQO,+BAA+B;AACpC,QAAM,UAAU,AAAgB,oCAAoB,QAAQ,YAAY;AACxE,QAAM,aAAa,KAAK,KAAK,SAAS,QAAQ;AAC9C,QAAM,UAAU,KAAK,KAAK,SAAS,QAAQ,OAAO;AAElD,QAAM,UAAW,OAAM;AACrB,QAAI,MAAM;AACV,QAAI;AACF,YACE,GAAG,aAAa,YAAY,aAAa,iBACzC,GAAG,aAAa,SAAS,YAAY;AAAA,YACvC;AACA,YAAM;AAAA;AAER,WAAO;AAAA;AAGT,MAAI,CAAC,SAAS;AACZ,YAAQ,IAAI;AACZ,YAAQ,IAAI,eAAe;AAC3B,YAAQ,IAAI,eAAe;AAC3B,OAAG,cAAc,YAAY;AAC7B,OAAG,cAAc,SAAS;AAAA;AAI5B,QAAM,cAAc,KAAK,KAAK,SAAS,QAAQ;AAC/C,QAAM,iBAAiB,GAAG,aAAa,aAAa;AACpD,MAAI,CAAC,eAAe,SAAS,wBAAwB;AACnD,OAAG,cACD,aACA,GAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnB,QAAM,WAAW,KAAK,KAAK,SAAS,QAAQ,OAAO;AACnD,QAAM,cAAc,GAAG,aAAa,UAAU;AAC9C,MAAI,CAAC,YAAY,SAAS,wBAAwB;AAChD,OAAG,cACD,UACA,GAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7CL;AAuDhB,qBAAqB,QAAgB;AACnC,SAAO,OAAO,QAAQ,iCAAiC;AAAA;AADhD;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/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.7",
   "source": "src/index.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "typings": "types.d.ts",
   "files": [
+    "types.d.ts",
     "dist",
     "src"
   ],
@@ -52,10 +53,10 @@
     "@dish/babel-preset": "^0.0.6",
     "@expo/match-media": "^0.1.0",
     "@tamagui/build": "^1.0.0-alpha.2",
-    "@tamagui/core": "^1.0.0-alpha.2",
-    "@tamagui/core-node": "^1.0.0-alpha.2",
+    "@tamagui/core": "^1.0.0-alpha.7",
+    "@tamagui/core-node": "^1.0.0-alpha.5",
     "@tamagui/fake-react-native": "^1.0.0-alpha.2",
-    "@tamagui/helpers": "^1.0.0-alpha.2",
+    "@tamagui/helpers": "^1.0.0-alpha.5",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.13.12",
     "esbuild-register": "^3.1.2",
@@ -63,10 +64,10 @@
     "fs-extra": "^9.0.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
-    "tamagui": "^1.0.0-alpha.3"
+    "tamagui": "^1.0.0-alpha.7"
   },
   "peerDependencies": {
     "react-native-web": "*"
   },
-  "gitHead": "79c58dff688caa316a82d9ee0c684bc50d5fbe4f"
+  "gitHead": "13694a98d31535846699004532630788177537e9"
 }

package/src/extractor/createExtractor.ts

@@ -51,6 +51,7 @@ export function createExtractor() {
   })
 
   let loadedTamaguiConfig: TamaguiInternalConfig
+  let hasLogged = false
 
   return {
     getTamaguiConfig() {
@@ -66,7 +67,9 @@ export function createExtractor() {
         sourcePath = '',
         onExtractTag,
         getFlattenedNode,
-        onDidFlatten,
+        disableExtraction,
+        disableExtractInlineMedia,
+        disableDebugAttr,
         ...props
       }: ExtractorParseProps
     ) => {
@@ -87,12 +90,6 @@ export function createExtractor() {
       loadedTamaguiConfig = tamaguiConfig
 
       const defaultTheme = tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]
-
-      // TODO this can be passed in / set based on if source changed
-      // const shouldReCheckTheme = false //Date.now() - hasParsedFileLast > 600
-      // hasParsedFileLast = Date.now()
-
-      let doesUseValidImport = false
       const body = fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
 
       /**
@@ -102,12 +99,15 @@ export function createExtractor() {
         isInsideTamagui(sourcePath) && importStr[0] === '.'
 
       const validComponents: { [key: string]: any } = Object.keys(components)
-        .filter((key) => !!components[key]?.staticConfig)
+        // check if uppercase to avoid hitting media query proxy before init
+        .filter((key) => key[0].toUpperCase() === key[0] && !!components[key]?.staticConfig)
         .reduce((obj, name) => {
           obj[name] = components[name]
           return obj
         }, {})
 
+      let doesUseValidImport = false
+
       for (const bodyPath of body) {
         if (bodyPath.type !== 'ImportDeclaration') continue
         const node = ('node' in bodyPath ? bodyPath.node : bodyPath) as any
@@ -148,6 +148,12 @@ export function createExtractor() {
        */
       let programPath: NodePath<t.Program>
 
+      const res = {
+        flattened: 0,
+        optimized: 0,
+        modified: 0,
+      }
+
       callTraverse({
         Program: {
           enter(path) {
@@ -186,8 +192,41 @@ export function createExtractor() {
             return
           }
 
-          const { staticConfig } = component
           const originalNodeName = node.name.name
+
+          if (shouldPrintDebug) {
+            console.log(`\n<${originalNodeName} />`)
+          }
+
+          const filePath = sourcePath.replace(process.cwd(), '.')
+          const lineNumbers = node.loc
+            ? node.loc.start.line +
+              (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : '')
+            : ''
+
+          // add data-is
+          if (shouldAddDebugProp && !disableDebugAttr) {
+            const preName = componentName ? `${componentName}:` : ''
+            res.modified++
+            node.attributes.unshift(
+              t.jsxAttribute(
+                t.jsxIdentifier('data-is'),
+                t.stringLiteral(
+                  `  ${preName}${node.name.name}   ${filePath.replace('./', '')}:${lineNumbers}  `
+                )
+              )
+            )
+          }
+
+          if (disableExtraction) {
+            if (!hasLogged) {
+              console.log('🥚 Tamagui disableExtraction set: no CSS or optimizations will be run')
+              hasLogged = true
+            }
+            return
+          }
+
+          const { staticConfig } = component
           const isTextView = staticConfig.isText || false
           const validStyles = staticConfig?.validStyles ?? {}
 
@@ -224,10 +263,6 @@ export function createExtractor() {
             return res
           }
 
-          if (shouldPrintDebug) {
-            console.log(`\n<${originalNodeName} />`)
-          }
-
           // Generate scope object at this level
           const staticNamespace = getStaticBindingsForScope(
             traversePath.scope,
@@ -541,7 +576,12 @@ export function createExtractor() {
             }
 
             // shorthand media queries
-            if (name[0] === '$' && t.isJSXExpressionContainer(attribute?.value)) {
+            if (
+              name[0] === '$' &&
+              t.isJSXExpressionContainer(attribute?.value) &&
+              // allow disabling this extraction
+              !disableExtractInlineMedia
+            ) {
               const shortname = name.slice(1)
               if (mediaQueryConfig[shortname]) {
                 const expression = attribute.value.expression
@@ -775,12 +815,6 @@ export function createExtractor() {
             modifiedComponents.add(parentFn)
           }
 
-          const filePath = sourcePath.replace(process.cwd(), '.')
-          const lineNumbers = node.loc
-            ? node.loc.start.line +
-              (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : '')
-            : ''
-
           // combine ternaries
           let ternaries: Ternary[] = []
           attrs = attrs
@@ -1051,21 +1085,6 @@ export function createExtractor() {
             console.log('  - attrs (after): ', attrs.map(attrStr).join(', '))
           }
 
-          // add data-is
-          if (shouldAddDebugProp) {
-            const preName = componentName ? `${componentName}:` : ''
-            // unshift so spreads/nesting overwrite
-            attrs.unshift({
-              type: 'attr',
-              value: t.jsxAttribute(
-                t.jsxIdentifier('data-is'),
-                t.stringLiteral(
-                  `  ${preName}${node.name.name}   ${filePath.replace('./', '')}:${lineNumbers}  `
-                )
-              ),
-            })
-          }
-
           if (shouldFlatten) {
             // DO FLATTEN
             if (shouldPrintDebug) {
@@ -1073,7 +1092,7 @@ export function createExtractor() {
             }
             isFlattened = true
             node.name.name = flatNode
-            onDidFlatten?.()
+            res.flattened++
             if (closingElement) {
               closingElement.name.name = flatNode
             }
@@ -1085,6 +1104,8 @@ export function createExtractor() {
             console.log('  - attrs (end): ', attrs.map(attrStr).join(', '))
           }
 
+          res.optimized++
+
           onExtractTag({
             attrs,
             node,
@@ -1111,6 +1132,8 @@ export function createExtractor() {
           removeUnusedHooks(comp, shouldPrintDebug)
         }
       }
+
+      return res
     },
   }
 }

package/src/extractor/extractToClassNames.ts

@@ -79,17 +79,11 @@ export function extractToClassNames({
   const cssMap = new Map<string, { css: string; commentTexts: string[] }>()
   const existingHoists: { [key: string]: t.Identifier } = {}
 
-  let flattened = 0
-  let optimized = 0
-
-  extractor.parse(ast, {
+  const res = extractor.parse(ast, {
     sourcePath,
     shouldPrintDebug,
     ...options,
     getFlattenedNode: ({ tag }) => tag,
-    onDidFlatten() {
-      flattened++
-    },
     onExtractTag: ({
       attrs,
       node,
@@ -100,8 +94,6 @@ export function extractToClassNames({
       lineNumbers,
       programPath,
     }) => {
-      optimized++
-
       let finalClassNames: ClassNameObject[] = []
       let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
       let finalStyles: StyleObject[] = []
@@ -276,15 +268,12 @@ export function extractToClassNames({
     },
   })
 
-  if (!optimized) {
+  if (!res || !res.modified) {
     return null
   }
 
   const styles = Array.from(cssMap.values())
-    .map((x) => {
-      // remove comments
-      return x.css //shouldInternalDedupe ? x.css : `${x.commentTexts.join('\n')}\n${x.css}`
-    })
+    .map((x) => x.css)
     .join('\n')
     .trim()
 
@@ -325,7 +314,7 @@ export function extractToClassNames({
     const memUsed =
       Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) / 10
     // prettier-ignore
-    console.log(`  🥚 ${basename(sourcePath).padStart(40)} ${`${Date.now() - start}`.padStart(3)}ms ׁ· ${`${optimized}`.padStart(4)} optimized · ${flattened} flattened ${memUsed > 10 ? `used ${memUsed}MB` : ''}`)
+    console.log(`  🥚 ${basename(sourcePath).padStart(40)} ${`${Date.now() - start}`.padStart(3)}ms ׁ· ${`${res.optimized}`.padStart(4)} optimized · ${res.flattened} flattened ${memUsed > 10 ? `used ${memUsed}MB` : ''}`)
   }
 
   return {

package/src/patchReactNativeWeb.ts

@@ -9,10 +9,28 @@ import path from 'path'
 // keep it sync
 export function patchReactNativeWeb() {
   const rootDir = require.resolve('react-native-web').replace(/\/dist.*/, '')
+  const modulePath = path.join(rootDir, 'dist', 'tamagui-exports.js')
+  const cjsPath = path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js')
 
-  // write our export files
-  fs.writeFileSync(path.join(rootDir, 'dist', 'tamagui-exports.js'), moduleExports)
-  fs.writeFileSync(path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js'), cjsExports)
+  const isEqual = (() => {
+    let res = false
+    try {
+      res =
+        fs.readFileSync(modulePath, 'utf-8') === moduleExports &&
+        fs.readFileSync(cjsPath, 'utf-8') == cjsExports
+    } catch {
+      res = false
+    }
+    return res
+  })()
+
+  if (!isEqual) {
+    console.log('🥚 Tamagui patching react-native-web to share atomic styling primitives')
+    console.log('   > adding', modulePath)
+    console.log('   > adding', cjsPath)
+    fs.writeFileSync(modulePath, moduleExports)
+    fs.writeFileSync(cjsPath, cjsExports)
+  }
 
   // if entry files not patched, patch them:
   const moduleEntry = path.join(rootDir, 'dist', 'index.js')
@@ -41,8 +59,6 @@ exports.TamaguiExports = _interopRequireDefault(require("./tamagui-exports"));
 // tamagui-patch-end
 `
     )
-
-    console.log(`Tamagui patched react-native-web`)
   }
 }
 

package/src/types.ts

@@ -15,6 +15,8 @@ export interface TamaguiOptions {
   evaluateVars?: boolean
   importsWhitelist?: string[]
   disableExtraction?: boolean
+  disableDebugAttr?: boolean
+  disableExtractInlineMedia?: boolean
   exclude?: RegExp
   logTimings?: boolean
 
@@ -32,7 +34,10 @@ export type ExtractedAttrAttr = {
 
 export type ExtractedAttrStyle = { type: 'style'; value: Object }
 
-export type ExtractedAttr = ExtractedAttrAttr | { type: 'ternary'; value: Ternary } | ExtractedAttrStyle
+export type ExtractedAttr =
+  | ExtractedAttrAttr
+  | { type: 'ternary'; value: Ternary }
+  | ExtractedAttrStyle
 
 export type ExtractTagProps = {
   attrs: ExtractedAttr[]
@@ -51,7 +56,6 @@ export type ExtractorParseProps = TamaguiOptions & {
   shouldPrintDebug?: boolean
   onExtractTag: (props: ExtractTagProps) => void
   getFlattenedNode: (props: { isTextView: boolean; tag: string }) => string
-  onDidFlatten?: () => void
 }
 
 export interface Ternary {

package/types.d.ts

@@ -0,0 +1,217 @@
+// Generated by dts-bundle-generator v5.9.0
+
+/// <reference types="babel__traverse" />
+/// <reference types="node" />
+
+import * as t from '@babel/types';
+
+export interface TamaguiOptions {
+	components: string[];
+	config?: string;
+	evaluateVars?: boolean;
+	importsWhitelist?: string[];
+	disableExtraction?: boolean;
+	disableDebugAttr?: boolean;
+	disableExtractInlineMedia?: boolean;
+	exclude?: RegExp;
+	logTimings?: boolean;
+	cssPath?: string;
+	cssData?: any;
+	deoptProps?: Set<string>;
+	excludeProps?: string[];
+}
+export declare type ExtractedAttrAttr = {
+	type: "attr";
+	value: t.JSXAttribute | t.JSXSpreadAttribute;
+};
+export declare type ExtractedAttrStyle = {
+	type: "style";
+	value: Object;
+};
+export declare type ExtractedAttr = ExtractedAttrAttr | {
+	type: "ternary";
+	value: Ternary;
+} | ExtractedAttrStyle;
+export declare type ExtractTagProps = {
+	attrs: ExtractedAttr[];
+	node: t.JSXOpeningElement;
+	attemptEval: (exprNode: t.Node, evalFn?: ((node: t.Node) => any) | undefined) => any;
+	jsxPath: NodePath<t.JSXElement>;
+	programPath: NodePath<t.Program>;
+	originalNodeName: string;
+	lineNumbers: string;
+	filePath: string;
+	isFlattened: boolean;
+};
+export declare type ExtractorParseProps = TamaguiOptions & {
+	sourcePath?: string;
+	shouldPrintDebug?: boolean;
+	onExtractTag: (props: ExtractTagProps) => void;
+	getFlattenedNode: (props: {
+		isTextView: boolean;
+		tag: string;
+	}) => string;
+};
+export interface Ternary {
+	test: t.Expression;
+	inlineMediaQuery?: string;
+	remove: Function;
+	consequent: Object | null;
+	alternate: Object | null;
+}
+declare class Variable {
+	name: string;
+	val: string | number;
+	variable: string | number;
+	constructor({ val, name }: VariableIn);
+	toString(): string | number;
+}
+export declare type VariableIn = {
+	val: string | number;
+	name: string;
+};
+export declare type ThemeProviderProps = {
+	themes: any;
+	defaultTheme: string;
+	disableRootThemeClass?: boolean;
+	children?: any;
+};
+export interface CreateTokens<Val extends number | string | Variable = number | string | Variable> {
+	font: {
+		[key: string]: GenericFont;
+	};
+	color: {
+		[key: string]: Val;
+	};
+	space: {
+		[key: string]: Val;
+	};
+	size: {
+		[key: string]: Val;
+	};
+	radius: {
+		[key: string]: Val;
+	};
+	zIndex: {
+		[key: string]: Val;
+	};
+}
+export declare type GenericTokens = CreateTokens;
+export declare type GenericThemes = {
+	[key: string]: {
+		bg: string | Variable;
+		bg2: string | Variable;
+		bg3: string | Variable;
+		bg4: string | Variable;
+		color: string | Variable;
+		color2: string | Variable;
+		color3: string | Variable;
+		color4: string | Variable;
+		borderColor: string | Variable;
+		borderColor2: string | Variable;
+		shadowColor: string | Variable;
+		shadowColor2: string | Variable;
+	};
+};
+export declare type GenericShorthands = {};
+export declare type GenericMedia<K extends string = string> = {
+	[key in K]: {
+		[key: string]: number | string;
+	};
+};
+export declare type CreateTamaguiConfig<A extends GenericTokens, B extends GenericThemes, C extends GenericShorthands, D extends GenericMedia> = Partial<Pick<ThemeProviderProps, "defaultTheme" | "disableRootThemeClass">> & {
+	tokens: A;
+	themes: B;
+	shorthands: C;
+	media: D;
+};
+export declare type TamaguiInternalConfig<A extends GenericTokens = GenericTokens, B extends GenericThemes = GenericThemes, C extends GenericShorthands = GenericShorthands, D extends GenericMedia = GenericMedia> = CreateTamaguiConfig<A, B, C, D> & {
+	Provider: (props: TamaguiProviderProps) => any;
+	themeParsed: {
+		[key: string]: Variable;
+	};
+	tokensParsed: CreateTokens<Variable>;
+	themeConfig: any;
+	getCSS: () => string;
+	parsed: boolean;
+};
+export declare type GenericFont = {
+	size: {
+		[key: string | number]: number | Variable;
+	};
+	lineHeight: {
+		[key: string | number]: number | Variable;
+	};
+	letterSpacing: {
+		[key: string | number]: number | Variable;
+	};
+	weight: {
+		[key: string | number]: string | Variable;
+	};
+	family: string | Variable;
+};
+export declare type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, "children">> & {
+	initialWindowMetrics?: any;
+	fallback?: any;
+	children?: any;
+};
+export declare type Extractor = ReturnType<typeof createExtractor>;
+export declare function createExtractor(): {
+	getTamaguiConfig(): TamaguiInternalConfig<import("@tamagui/core").CreateTokens<string | number | import("@tamagui/core").Variable>, {
+		[key: string]: {
+			bg: string | import("@tamagui/core").Variable;
+			bg2: string | import("@tamagui/core").Variable;
+			bg3: string | import("@tamagui/core").Variable;
+			bg4: string | import("@tamagui/core").Variable;
+			color: string | import("@tamagui/core").Variable;
+			color2: string | import("@tamagui/core").Variable;
+			color3: string | import("@tamagui/core").Variable;
+			color4: string | import("@tamagui/core").Variable;
+			borderColor: string | import("@tamagui/core").Variable;
+			borderColor2: string | import("@tamagui/core").Variable;
+			shadowColor: string | import("@tamagui/core").Variable;
+			shadowColor2: string | import("@tamagui/core").Variable;
+		};
+	}, {}, {
+		[x: string]: {
+			[key: string]: string | number;
+		};
+	}>;
+	parse: (fileOrPath: NodePath<t.Program> | t.File, { config, importsWhitelist, evaluateVars, shouldPrintDebug, sourcePath, onExtractTag, getFlattenedNode, disableExtraction, disableExtractInlineMedia, disableDebugAttr, ...props }: ExtractorParseProps) => {
+		flattened: number;
+		optimized: number;
+		modified: number;
+	} | null;
+};
+export declare function literalToAst(literal: any): t.Expression;
+export declare const CSS_FILE_NAME = "__snack.css";
+export declare const MEDIA_SEP = "_";
+export declare const cacheDir: any;
+export declare const CONCAT_CLASSNAME_IMPORT = "concatClassName";
+export declare function extractToClassNames({ loader, extractor, source, sourcePath, options, shouldPrintDebug, threaded, cssPath, }: {
+	loader: any;
+	extractor: Extractor;
+	source: string | Buffer;
+	sourcePath: string;
+	options: TamaguiOptions;
+	shouldPrintDebug: boolean;
+	cssPath: string;
+	threaded?: boolean;
+}): null | {
+	js: string | Buffer;
+	styles: string;
+	stylesPath?: string;
+	ast: t.File;
+	map: any;
+};
+export declare function isPresent<T extends Object>(input: null | void | undefined | T): input is T;
+export declare function isSimpleSpread(node: t.JSXSpreadAttribute): boolean;
+export declare const attrStr: (attr: ExtractedAttr) => string | t.JSXIdentifier;
+export declare const objToStr: (obj: any) => any;
+export declare const ternaryStr: (x: Ternary) => string;
+export declare function findComponentName(scope: any): string | undefined;
+export declare function isValidThemeHook(jsxPath: NodePath<t.JSXElement>, n: t.MemberExpression, sourcePath: string): boolean;
+export declare const isInsideTamagui: (srcName: string) => boolean;
+export declare function patchReactNativeWeb(): void;
+
+export {};