@tamagui/static 1.0.0-alpha.1 → 1.0.0-alpha.13

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.13",
   "source": "src/index.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "typings": "types.d.ts",
+  "typings": "types",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/_jsx",
   "files": [
-    "dist",
-    "src"
+    "types",
+    "src",
+    "dist"
   ],
   "scripts": {
     "build": "tamagui-build",
@@ -25,48 +27,49 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/generator": "^7.15.4",
-    "@babel/helper-plugin-utils": "^7.14.5",
-    "@babel/parser": "^7.15.7",
     "@babel/plugin-syntax-typescript": "^7.14.5",
-    "@babel/traverse": "^7.15.4",
     "@babel/types": "^7.15.6",
-    "@dish/babel-preset": "^0.0.6",
-    "@expo/match-media": "^0.1.0",
-    "@tamagui/build": "^1.0.0-alpha.1",
-    "@tamagui/core": "^1.0.0-alpha.1",
     "@testing-library/react": "13.0.0-alpha.4",
     "@types/jest": "*",
     "@types/node": "^16.11.9",
     "@types/react-native": "^0.64.2",
     "@types/webpack": "^4.41.26",
-    "babel-literal-to-ast": "^2.1.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.4",
-    "esbuild": "^0.13.12",
-    "find-cache-dir": "^3.3.1",
-    "fs-extra": "^9.0.0",
-    "invariant": "^2.2.4",
+    "esbuild-loader": "^2.16.0",
     "jest": "^27.3.1",
     "loader-utils": "^2.0.0",
-    "lodash": "^4.17.20",
     "react": "*",
     "react-dom": "*",
     "react-test-renderer": "18.0.0-beta-149b420f6-20211119",
     "style-loader": "^3.3.0",
-    "tamagui": "^1.0.0-alpha.1",
     "typescript": "^4.4.4",
     "webpack": "^5.58.1"
   },
   "dependencies": {
-    "@tamagui/core-node": "^1.0.0-alpha.1",
-    "@tamagui/fake-react-native": "^1.0.0-alpha.1",
-    "@tamagui/helpers": "^1.0.0-alpha.1",
-    "esbuild-register": "^3.1.2"
+    "@babel/core": "^7.15.5",
+    "@babel/generator": "^7.15.4",
+    "@babel/helper-plugin-utils": "^7.14.5",
+    "@babel/parser": "^7.15.7",
+    "@babel/traverse": "^7.15.4",
+    "@dish/babel-preset": "^0.0.6",
+    "@expo/match-media": "^0.1.0",
+    "@tamagui/build": "^1.0.0-alpha.12",
+    "@tamagui/core": "^1.0.0-alpha.13",
+    "@tamagui/core-node": "^1.0.0-alpha.13",
+    "@tamagui/fake-react-native": "^1.0.0-alpha.2",
+    "@tamagui/helpers": "^1.0.0-alpha.13",
+    "babel-literal-to-ast": "^2.1.0",
+    "esbuild": "^0.13.12",
+    "esbuild-register": "^3.1.2",
+    "find-cache-dir": "^3.3.1",
+    "fs-extra": "^9.0.0",
+    "invariant": "^2.2.4",
+    "lodash": "^4.17.20",
+    "tamagui": "^1.0.0-alpha.13"
   },
   "peerDependencies": {
     "react-native-web": "*"
   },
-  "gitHead": "a41c5a5b08be5518d138515137122c248e3f7c71"
+  "gitHead": "5fa09073ac2c6bf529f0e81dd65db8b31682f360"
 }

package/src/extractor/createExtractor.ts

@@ -13,6 +13,7 @@ import { findTopmostFunction } from './findTopmostFunction'
 import { getStaticBindingsForScope } from './getStaticBindingsForScope'
 import { literalToAst } from './literalToAst'
 import { loadTamagui } from './loadTamagui'
+import { logLines } from './logLines'
 import { normalizeTernaries } from './normalizeTernaries'
 import { removeUnusedHooks } from './removeUnusedHooks'
 
@@ -51,9 +52,10 @@ export function createExtractor() {
   })
 
   let loadedTamaguiConfig: TamaguiInternalConfig
+  let hasLogged = false
 
   return {
-    getTamaguiConfig() {
+    getTamagui() {
       return loadedTamaguiConfig
     },
     parse: (
@@ -66,7 +68,10 @@ export function createExtractor() {
         sourcePath = '',
         onExtractTag,
         getFlattenedNode,
-        onDidFlatten,
+        disableExtraction,
+        disableExtractInlineMedia,
+        disableExtractVariables,
+        disableDebugAttr,
         ...props
       }: ExtractorParseProps
     ) => {
@@ -87,26 +92,25 @@ 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
 
       /**
        * Step 1: Determine if importing any statically extractable components
        */
-      const isInternalImport = (importStr: string) =>
-        isInsideTamagui(sourcePath) && importStr[0] === '.'
+      const isInternalImport = (importStr: string) => {
+        return 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
@@ -147,6 +151,12 @@ export function createExtractor() {
        */
       let programPath: NodePath<t.Program>
 
+      const res = {
+        flattened: 0,
+        optimized: 0,
+        modified: 0,
+      }
+
       callTraverse({
         Program: {
           enter(path) {
@@ -185,8 +195,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 ?? {}
 
@@ -223,10 +266,6 @@ export function createExtractor() {
             return res
           }
 
-          if (shouldPrintDebug) {
-            console.log(`\n<${originalNodeName} />`)
-          }
-
           // Generate scope object at this level
           const staticNamespace = getStaticBindingsForScope(
             traversePath.scope,
@@ -399,9 +438,9 @@ export function createExtractor() {
                 }
                 const propName = prop.key['name']
                 if (!isStaticAttributeName(propName) && propName !== 'tag') {
-                  // if (shouldPrintDebug) {
-                  console.log('  not a valid style prop!', propName)
-                  // }
+                  if (shouldPrintDebug) {
+                    console.log('  not a valid style prop!', propName)
+                  }
                   return false
                 }
                 return true
@@ -489,7 +528,9 @@ export function createExtractor() {
                 const [test, alt, cons] = conditional
                 if (!test) throw new Error(`no test`)
                 if ([alt, cons].some((side) => side && !isExtractable(side))) {
-                  console.log('not extractable', alt, cons)
+                  if (shouldPrintDebug) {
+                    console.log('not extractable', alt, cons)
+                  }
                   return attr
                 }
                 // split into individual ternaries per object property
@@ -539,6 +580,11 @@ export function createExtractor() {
 
             // shorthand media queries
             if (name[0] === '$' && t.isJSXExpressionContainer(attribute?.value)) {
+              // allow disabling this extraction
+              if (disableExtractInlineMedia) {
+                return attr
+              }
+
               const shortname = name.slice(1)
               if (mediaQueryConfig[shortname]) {
                 const expression = attribute.value.expression
@@ -587,11 +633,24 @@ export function createExtractor() {
               }
             }
 
+            // native shouldn't extract variables
+            if (disableExtractVariables) {
+              if (value) {
+                if (value.type === 'StringLiteral' && value.value[0] === '$') {
+                  if (shouldPrintDebug) {
+                    console.log('  native, disable extract var', value.value)
+                  }
+                  inlinePropCount++
+                  return attr
+                }
+              }
+            }
+
             // if value can be evaluated, extract it and filter it out
             const styleValue = attemptEvalSafe(value)
 
-            // we never flatten if a prop isn't a valid static attribute
-            // but we need to make sure its post-prop mapping
+            // never flatten if a prop isn't a valid static attribute
+            // only post prop-mapping
             if (!isStaticAttributeName(name)) {
               let keys = [name]
               if (staticConfig.propMapper) {
@@ -621,6 +680,8 @@ export function createExtractor() {
               return {
                 type: 'style',
                 value: { [name]: styleValue },
+                name,
+                attr: path.node,
               }
             }
 
@@ -752,7 +813,7 @@ export function createExtractor() {
 
           // see if we can filter them
           if (shouldPrintDebug) {
-            console.log('  - attrs (before): ', attrs.map(attrStr).join(', '))
+            console.log('  - attrs (before):\n', logLines(attrs.map(attrStr).join(', ')))
           }
 
           // now update to new values
@@ -772,12 +833,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
@@ -867,29 +922,27 @@ export function createExtractor() {
               if (cur.type === 'style') {
                 // TODO need to loop over initial props not just style props
                 for (const key in cur.value) {
-                  const shouldInsertNull =
-                    !!(
-                      staticConfig.ensureOverriddenProp?.[key] // || staticConfig.defaultProps?.[key]
-                    )
+                  const shouldEnsureOverridden = !!staticConfig.ensureOverriddenProp?.[key]
                   const isSetInAttrsAlready = attrs.some(
                     (x) =>
                       x.type === 'attr' &&
                       x.value.type === 'JSXAttribute' &&
                       x.value.name.name === key
                   )
-                  const shouldInsertNullOverride = shouldInsertNull && !isSetInAttrsAlready
-                  // if (shouldPrintDebug) {
-                  //   // prettier-ignore
-                  //   console.log('what is', key, { shouldInsertNullOverride, shouldInsertNull, isSetInAttrsAlready })
-                  // }
-                  if (shouldInsertNullOverride) {
-                    acc.push({
-                      type: 'attr',
-                      value: t.jsxAttribute(
-                        t.jsxIdentifier(key),
-                        t.jsxExpressionContainer(t.nullLiteral())
-                      ),
-                    })
+
+                  if (!isSetInAttrsAlready) {
+                    const isVariant = !!staticConfig.variants?.[cur.name || '']
+                    if (isVariant || shouldEnsureOverridden) {
+                      acc.push({
+                        type: 'attr',
+                        value:
+                          cur.attr ||
+                          t.jsxAttribute(
+                            t.jsxIdentifier(key),
+                            t.jsxExpressionContainer(t.nullLiteral())
+                          ),
+                      })
+                    }
                   }
                 }
               }
@@ -899,7 +952,7 @@ export function createExtractor() {
           }
 
           if (shouldPrintDebug) {
-            console.log('  - attrs (flattened):  ', attrs.map(attrStr).join(', '))
+            console.log('  - attrs (flattened): \n', logLines(attrs.map(attrStr).join(', ')))
           }
 
           // evaluate away purely style props
@@ -925,7 +978,7 @@ export function createExtractor() {
           }, [])
 
           if (shouldPrintDebug) {
-            console.log('  - attrs (evaluated styles):  ', attrs.map(attrStr).join(', '))
+            console.log('  - attrs (evaluated styles): \n', logLines(attrs.map(attrStr).join(', ')))
           }
 
           // combine styles, leave undefined values
@@ -943,7 +996,7 @@ export function createExtractor() {
           }, [])
 
           if (shouldPrintDebug) {
-            console.log('  - attrs (combined 🔀):  ', attrs.map(attrStr).join(', '))
+            console.log('  - attrs (combined 🔀): \n', logLines(attrs.map(attrStr).join(', ')))
           }
 
           // post process
@@ -958,9 +1011,10 @@ export function createExtractor() {
             const out = postProcessStyles(props, staticConfig, defaultTheme)
             const next = out?.style ?? props
             if (shouldPrintDebug) {
-              console.log('    >> getStyles: ', objToStr(props), '==>>', objToStr(next))
-              console.log('    >>     style: ', objToStr(out.style))
-              console.log('    >>     viewp: ', objToStr(out.viewProps))
+              console.log('  getStyles props >>\n', logLines(objToStr(props)))
+              console.log('  getStyles next  >>\n', logLines(objToStr(next)))
+              console.log('  getStyles style >>\n', logLines(objToStr(out.style)))
+              console.log('  getStyles viewp >>\n', logLines(objToStr(out.viewProps)))
             }
             if (staticConfig.validStyles) {
               for (const key in next) {
@@ -972,10 +1026,6 @@ export function createExtractor() {
             return next
           }
 
-          if (shouldPrintDebug) {
-            console.log('  staticConfig.defaultProps', staticConfig.defaultProps)
-          }
-
           // used to ensure we pass the entire prop bundle to getStyles
           const completeStylesProcessed = getStyles({
             ...staticConfig.defaultProps,
@@ -1004,9 +1054,9 @@ export function createExtractor() {
 
           if (shouldPrintDebug) {
             // prettier-ignore
-            console.log('    completeStaticProps', objToStr(completeStaticProps))
+            console.log('   completeStaticProps\n', logLines(objToStr(completeStaticProps)))
             // prettier-ignore
-            console.log('    completeStylesProcessed', objToStr(completeStylesProcessed))
+            console.log('   completeStylesProcessed\n', logLines(objToStr(completeStylesProcessed)))
           }
 
           for (const attr of attrs) {
@@ -1045,22 +1095,7 @@ export function createExtractor() {
           }
 
           if (shouldPrintDebug) {
-            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}  `
-                )
-              ),
-            })
+            console.log('  - attrs (after):\n', logLines(attrs.map(attrStr).join(', ')))
           }
 
           if (shouldFlatten) {
@@ -1070,7 +1105,7 @@ export function createExtractor() {
             }
             isFlattened = true
             node.name.name = flatNode
-            onDidFlatten?.()
+            res.flattened++
             if (closingElement) {
               closingElement.name.name = flatNode
             }
@@ -1079,9 +1114,11 @@ export function createExtractor() {
           if (shouldPrintDebug) {
             // prettier-ignore
             console.log('  [❊] inline props ', inlinePropCount, shouldDeopt ? ' deopted' : '', hasSpread ? ' spread' : '', '!flatten', staticConfig.neverFlatten)
-            console.log('  - attrs (end): ', attrs.map(attrStr).join(', '))
+            console.log('  - attrs (end):\n', logLines(attrs.map(attrStr).join(', ')))
           }
 
+          res.optimized++
+
           onExtractTag({
             attrs,
             node,
@@ -1108,6 +1145,8 @@ export function createExtractor() {
           removeUnusedHooks(comp, shouldPrintDebug)
         }
       }
+
+      return res
     },
   }
 }

package/src/extractor/extractHelpers.ts

@@ -21,7 +21,10 @@ export const attrStr = (attr: ExtractedAttr) => {
 
 export const objToStr = (obj: any) => {
   return Object.entries(obj)
-    .map(([k, v]) => `${k}:${Array.isArray(v) ? `[...]` : v && typeof v === 'object' ? `{${objToStr(v)}}` : v}`)
+    .map(
+      ([k, v]) =>
+        `${k}:${Array.isArray(v) ? `[...]` : v && typeof v === 'object' ? `{${objToStr(v)}}` : v}`
+    )
     .join(', ')
 }
 
@@ -69,7 +72,11 @@ export function findComponentName(scope) {
   return componentName
 }
 
-export function isValidThemeHook(jsxPath: NodePath<t.JSXElement>, n: t.MemberExpression, sourcePath: string) {
+export function isValidThemeHook(
+  jsxPath: NodePath<t.JSXElement>,
+  n: t.MemberExpression,
+  sourcePath: string
+) {
   if (!t.isIdentifier(n.object) || !t.isIdentifier(n.property)) return false
   const bindings = jsxPath.scope.getAllBindings()
   const binding = bindings[n.object.name]
@@ -90,4 +97,6 @@ export function isValidThemeHook(jsxPath: NodePath<t.JSXElement>, n: t.MemberExp
   return true
 }
 
-export const isInsideTamagui = (srcName: string) => srcName.includes('/tamagui/')
+export const isInsideTamagui = (srcName: string) => {
+  return srcName.includes('/tamagui/_jsx') || srcName.includes('/core/src')
+}

package/src/extractor/extractToClassNames.ts

@@ -18,6 +18,7 @@ import { ensureImportingConcat } from './ensureImportingConcat'
 import { isSimpleSpread } from './extractHelpers'
 import { extractMediaStyle } from './extractMediaStyle'
 import { hoistClassNames } from './hoistClassNames'
+import { logLines } from './logLines'
 
 export const CONCAT_CLASSNAME_IMPORT = 'concatClassName'
 
@@ -61,7 +62,7 @@ export function extractToClassNames({
     '`sourcePath` must be an absolute path to a .js file'
   )
 
-  const shouldLogTiming = shouldPrintDebug || options.logTimings
+  const shouldLogTiming = options.logTimings ?? true
   const start = Date.now()
   const mem = shouldLogTiming ? process.memoryUsage() : null
 
@@ -79,17 +80,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 +95,6 @@ export function extractToClassNames({
       lineNumbers,
       programPath,
     }) => {
-      optimized++
-
       let finalClassNames: ClassNameObject[] = []
       let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
       let finalStyles: StyleObject[] = []
@@ -144,10 +137,6 @@ export function extractToClassNames({
           case 'style':
             const styles = addStyles(attr.value)
             const newClassNames = concatClassName(styles.map((x) => x.identifier).join(' '))
-            if (shouldPrintDebug) {
-              // console.log('  style', attr.value)
-              console.log('  classnames', newClassNames, finalClassNames)
-            }
             // prettier-ignore
             const existing = finalClassNames.find((x) => x.type == 'StringLiteral') as t.StringLiteral | null
             if (existing) {
@@ -157,7 +146,7 @@ export function extractToClassNames({
             }
             if (shouldPrintDebug) {
               // prettier-ignore
-              console.log('  classnames (after)', finalClassNames.map(x => x['value']).join(' '))
+              console.log('  classnames (after)\n', logLines(finalClassNames.map(x => x['value']).join(' ')))
             }
             break
           case 'attr':
@@ -190,7 +179,7 @@ export function extractToClassNames({
             const mediaExtraction = extractMediaStyle(
               attr.value,
               jsxPath,
-              extractor.getTamaguiConfig(),
+              extractor.getTamagui(),
               sourcePath,
               lastMediaImportance,
               shouldPrintDebug
@@ -276,15 +265,15 @@ export function extractToClassNames({
     },
   })
 
-  if (!optimized) {
+  if (!res || (!res.modified && !res.optimized && !res.flattened)) {
+    if (shouldPrintDebug) {
+      console.log('no res or none modified', res)
+    }
     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()
 
@@ -320,12 +309,17 @@ export function extractToClassNames({
     console.log('\n -------- output style -------- \n\n', styles)
   }
 
-  if (shouldLogTiming && mem) {
-    // console.log(`${parseTime} / ${traverseTime} / ${generateTime}`)
-    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` : ''}`)
+  if (shouldLogTiming) {
+    const memUsed = mem
+      ? Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) / 10
+      : 0
+    const timing = `${Date.now() - start}`.padStart(3)
+    const path = basename(sourcePath).padStart(40)
+    const numOptimized = `${res.optimized}`.padStart(4)
+    const memory = memUsed > 10 ? `used ${memUsed}MB` : ''
+    console.log(
+      `  🥚 ${path} ${timing}ms ׁ· ${numOptimized} optimized · ${res.flattened} flattened ${memory}`
+    )
   }
 
   return {

package/src/extractor/logLines.ts

@@ -0,0 +1,11 @@
+export const logLines = (str: string) => {
+  let lines: string[] = ['']
+  const items = str.split(' ')
+  for (const item of items) {
+    if (item.length + lines[lines.length - 1].length > 100) {
+      lines.push('')
+    }
+    lines[lines.length - 1] += item + ' '
+  }
+  return lines.map((line, i) => '           ' + (i == 0 ? '' : ' ') + line.trim()).join('\n')
+}

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`)
   }
 }