@tamagui/static 1.0.0-alpha.5 → 1.0.0-alpha.9

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,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.9",
   "source": "src/index.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -35,6 +35,7 @@
     "@types/webpack": "^4.41.26",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.4",
+    "esbuild-loader": "^2.16.0",
     "jest": "^27.3.1",
     "loader-utils": "^2.0.0",
     "react": "*",
@@ -52,11 +53,11 @@
     "@babel/traverse": "^7.15.4",
     "@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.5",
-    "@tamagui/core-node": "^1.0.0-alpha.5",
+    "@tamagui/build": "^1.0.0-alpha.8",
+    "@tamagui/core": "^1.0.0-alpha.9",
+    "@tamagui/core-node": "^1.0.0-alpha.8",
     "@tamagui/fake-react-native": "^1.0.0-alpha.2",
-    "@tamagui/helpers": "^1.0.0-alpha.5",
+    "@tamagui/helpers": "^1.0.0-alpha.8",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.13.12",
     "esbuild-register": "^3.1.2",
@@ -64,10 +65,10 @@
     "fs-extra": "^9.0.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
-    "tamagui": "^1.0.0-alpha.5"
+    "tamagui": "^1.0.0-alpha.9"
   },
   "peerDependencies": {
     "react-native-web": "*"
   },
-  "gitHead": "e12f14aa087c41ea5ba3933a05f33fada0be03c0"
+  "gitHead": "48ab0be0ca0b8d7e9a1470ee18d46348bc316cdd"
 }

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,9 @@ export function createExtractor() {
         sourcePath = '',
         onExtractTag,
         getFlattenedNode,
-        onDidFlatten,
+        disableExtraction,
+        disableExtractInlineMedia,
+        disableDebugAttr,
         ...props
       }: ExtractorParseProps
     ) => {
@@ -87,27 +91,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
@@ -148,6 +150,12 @@ export function createExtractor() {
        */
       let programPath: NodePath<t.Program>
 
+      const res = {
+        flattened: 0,
+        optimized: 0,
+        modified: 0,
+      }
+
       callTraverse({
         Program: {
           enter(path) {
@@ -186,8 +194,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 +265,6 @@ export function createExtractor() {
             return res
           }
 
-          if (shouldPrintDebug) {
-            console.log(`\n<${originalNodeName} />`)
-          }
-
           // Generate scope object at this level
           const staticNamespace = getStaticBindingsForScope(
             traversePath.scope,
@@ -542,6 +579,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
@@ -593,8 +635,8 @@ export function createExtractor() {
             // 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) {
@@ -624,6 +666,8 @@ export function createExtractor() {
               return {
                 type: 'style',
                 value: { [name]: styleValue },
+                name,
+                attr: path.node,
               }
             }
 
@@ -755,7 +799,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
@@ -775,12 +819,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
@@ -870,29 +908,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())
+                          ),
+                      })
+                    }
                   }
                 }
               }
@@ -902,7 +938,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
@@ -928,7 +964,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
@@ -946,7 +982,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
@@ -961,9 +997,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) {
@@ -975,10 +1012,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,
@@ -1007,9 +1040,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) {
@@ -1048,22 +1081,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) {
@@ -1073,7 +1091,7 @@ export function createExtractor() {
             }
             isFlattened = true
             node.name.name = flatNode
-            onDidFlatten?.()
+            res.flattened++
             if (closingElement) {
               closingElement.name.name = flatNode
             }
@@ -1082,9 +1100,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,
@@ -1111,6 +1131,8 @@ export function createExtractor() {
           removeUnusedHooks(comp, shouldPrintDebug)
         }
       }
+
+      return res
     },
   }
 }

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'
 
@@ -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,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 +311,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/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`)
   }
 }
 

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
 
@@ -30,9 +32,17 @@ export type ExtractedAttrAttr = {
   value: t.JSXAttribute | t.JSXSpreadAttribute
 }
 
-export type ExtractedAttrStyle = { type: 'style'; value: Object }
+export type ExtractedAttrStyle = {
+  type: 'style'
+  value: Object
+  attr?: t.JSXAttribute | t.JSXSpreadAttribute
+  name?: string
+}
 
-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 +61,6 @@ export type ExtractorParseProps = TamaguiOptions & {
   shouldPrintDebug?: boolean
   onExtractTag: (props: ExtractTagProps) => void
   getFlattenedNode: (props: { isTextView: boolean; tag: string }) => string
-  onDidFlatten?: () => void
 }
 
 export interface Ternary {