@tamagui/static 1.132.16 → 1.132.18

package/dist/types.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../src/types.ts"],
-  "mappings": ";;;;;;;;;;;;AA4FE;;",
+  "mappings": ";;;;;;;;;;;;AAyFE;;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "1.132.16",
+  "version": "1.132.18",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "type": "commonjs",
@@ -45,19 +45,19 @@
     "@babel/template": "^7.25.0",
     "@babel/traverse": "^7.25.4",
     "@babel/types": "^7.25.4",
-    "@tamagui/cli-color": "1.132.16",
-    "@tamagui/config-default": "1.132.16",
-    "@tamagui/core": "1.132.16",
-    "@tamagui/fake-react-native": "1.132.16",
-    "@tamagui/generate-themes": "1.132.16",
-    "@tamagui/helpers": "1.132.16",
-    "@tamagui/helpers-node": "1.132.16",
-    "@tamagui/proxy-worm": "1.132.16",
-    "@tamagui/react-native-web-internals": "1.132.16",
-    "@tamagui/react-native-web-lite": "1.132.16",
-    "@tamagui/shorthands": "1.132.16",
-    "@tamagui/types": "1.132.16",
-    "@tamagui/web": "1.132.16",
+    "@tamagui/cli-color": "1.132.18",
+    "@tamagui/config-default": "1.132.18",
+    "@tamagui/core": "1.132.18",
+    "@tamagui/fake-react-native": "1.132.18",
+    "@tamagui/generate-themes": "1.132.18",
+    "@tamagui/helpers": "1.132.18",
+    "@tamagui/helpers-node": "1.132.18",
+    "@tamagui/proxy-worm": "1.132.18",
+    "@tamagui/react-native-web-internals": "1.132.18",
+    "@tamagui/react-native-web-lite": "1.132.18",
+    "@tamagui/shorthands": "1.132.18",
+    "@tamagui/types": "1.132.18",
+    "@tamagui/web": "1.132.18",
     "babel-literal-to-ast": "^2.1.0",
     "browserslist": "^4.22.2",
     "check-dependency-version-consistency": "^4.1.0",
@@ -74,7 +74,7 @@
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.25.4",
     "@expo/match-media": "^0.4.0",
-    "@tamagui/build": "1.132.16",
+    "@tamagui/build": "1.132.18",
     "@types/babel__core": "^7.20.5",
     "@types/find-root": "^1.1.2",
     "@types/node": "^22.1.0",

package/src/extractor/concatClassName.ts

@@ -0,0 +1,100 @@
+// perf sensitive so doing some weird stuff
+
+/**
+ * next - take objects:
+ *
+ * { _shorthand: 'postfix' }
+ *
+ */
+
+export function concatClassName(...args: any[]): any
+export function concatClassName(_cn: Record<string, any> | null | undefined): string {
+  const args = arguments
+  const usedPrefixes: string[] = []
+  let final = ''
+
+  const len = args.length
+  let propObjects: any = null
+  for (let x = len; x >= 0; x--) {
+    const cns = args[x]
+
+    if (!cns) continue
+    if (!Array.isArray(cns) && typeof cns !== 'string') {
+      // is prop object
+      propObjects = propObjects || []
+      propObjects.push(cns)
+      continue
+    }
+
+    const names = Array.isArray(cns) ? cns : cns.split(' ')
+    const numNames = names.length
+    for (let i = numNames - 1; i >= 0; i--) {
+      const name = names[i]
+
+      if (!name || name === ' ') continue
+      if (name[0] !== '_') {
+        // not snack style (todo slightly stronger heuristic)
+        final = name + ' ' + final
+        continue
+      }
+
+      const splitIndex = name.indexOf('-')
+      if (splitIndex < 1) {
+        final = name + ' ' + final
+        // if (shouldDebug) console.log('debug exclude:', name, final)
+        continue
+      }
+
+      const nextChar = name[splitIndex + 1]
+      // synced to static-ui constants
+      // MEDIA_SEP
+      const isMediaQuery = nextChar === '_'
+      // PSEUDO_SEP
+      // commenting out three things to make pseudos override properly
+      // (leave in for a bit to see if other bugs pop up later):
+      // 1. const isPseudoQuery = nextChar === '0'
+      const styleKey = name.slice(1, name.lastIndexOf('-'))
+      // 2. isMediaQuery || isPseudoQuery
+      const mediaKey = isMediaQuery ? name.slice(splitIndex + 2, splitIndex + 7) : null
+      const uid = mediaKey ? styleKey + mediaKey : styleKey
+      // 3. && !isPseudoQuery
+
+      if (usedPrefixes.indexOf(uid) > -1) {
+        // if (shouldDebug) console.log('debug exclude:', usedPrefixes, name)
+        continue
+      }
+      usedPrefixes.push(uid)
+
+      // overrides for full safety
+      const propName = styleKey
+      if (propName && propObjects) {
+        if (
+          propObjects.some((po) => {
+            if (mediaKey) {
+              const propKey = pseudoInvert[mediaKey]
+              return po && po[propKey] && propName in po[propKey] && po[propKey] !== null
+            }
+            const res = po && propName in po && po[propName] !== null
+            return res
+          })
+        ) {
+          // if (shouldDebug) console.log('debug exclude:', name)
+          continue
+        }
+      }
+
+      final = name + ' ' + final
+    }
+  }
+
+  return final
+}
+
+const pseudoInvert = {
+  hover: 'hoverStyle',
+  focus: 'focusStyle',
+  press: 'pressStyle',
+  focusVisible: 'focusVisibleStyle',
+  focusWithin: 'focusWithinStyle',
+  disabled: 'disabledStyle',
+}

package/src/extractor/createEvaluator.ts

@@ -28,6 +28,7 @@ export function createEvaluator({
     if (t.isIdentifier(n) && typeof staticNamespace[n.name] !== 'undefined') {
       return staticNamespace[n.name]
     }
+
     const evalContext = vm.createContext(staticNamespace)
     // @ts-ignore
     const codeWithTypescriptAnnotations = `(${generate(n as any).code})`
@@ -38,7 +39,31 @@ export function createEvaluator({
     if (shouldPrintDebug) {
       console.info('evaluating', code)
     }
-    return vm.runInContext(code, evalContext)
+
+    const result1 = vm.runInContext(code, evalContext)
+    const result2 = vm.runInContext(code, evalContext)
+
+    const isDeterministic =
+      Object.is(result1, result2) ||
+      (typeof result1 === 'object' &&
+        typeof result2 === 'object' &&
+        JSON.stringify(result1) === JSON.stringify(result2))
+
+    if (!isDeterministic) {
+      if (shouldPrintDebug) {
+        console.info(
+          'Bailing on non-deterministic expression:',
+          code,
+          '\nFirst result:',
+          result1,
+          'Second result:',
+          result2
+        )
+      }
+      throw new Error(`Non-deterministic value, bailing`)
+    }
+
+    return result1
   }
 
   return (n: t.Node) => {

package/src/extractor/createExtractor.ts

@@ -46,9 +46,9 @@ import { loadTamagui, loadTamaguiSync } from './loadTamagui'
 import { logLines } from './logLines'
 import { normalizeTernaries } from './normalizeTernaries'
 import { setPropsToFontFamily } from './propsToFontFamilyCache'
-import { removeUnusedHooks } from './removeUnusedHooks'
 import { timer } from './timer'
 import { validHTMLAttributes } from './validHTMLAttributes'
+import { BailOptimizationError } from './errors'
 
 const UNTOUCHED_PROPS = {
   key: true,
@@ -164,11 +164,10 @@ export function createExtractor(
       evaluateVars = true,
       sourcePath = '',
       onExtractTag,
-      onStyleRule,
+      onStyledDefinitionRule,
       getFlattenedNode,
       disable,
       disableExtraction,
-      disableExtractInlineMedia,
       disableExtractVariables,
       disableDebugAttr,
       enableDynamicEvaluation = false,
@@ -676,7 +675,7 @@ export function createExtractor(
         if (out.rulesToInsert) {
           for (const key in out.rulesToInsert) {
             const styleObject = out.rulesToInsert[key]
-            onStyleRule?.(
+            onStyledDefinitionRule?.(
               styleObject[StyleObjectIdentifier],
               styleObject[StyleObjectRules]
             )
@@ -833,7 +832,7 @@ export function createExtractor(
             console.info(` Start tag ${tagName}`)
           }
 
-          const flatNode = getFlattenedNode?.({ isTextView, tag: tagName })
+          const flatNodeName = getFlattenedNode?.({ isTextView, tag: tagName })
 
           const inlineProps = new Set([
             // adding some always inline props
@@ -1018,12 +1017,9 @@ export function createExtractor(
                 }
                 // split into individual ternaries per object property
                 return [
-                  ...(createTernariesFromObjectProperties(test, alt) || []),
+                  ...(flattenNestedTernaries(test, alt) || []),
                   ...((cons &&
-                    createTernariesFromObjectProperties(
-                      t.unaryExpression('!', test),
-                      cons
-                    )) ||
+                    flattenNestedTernaries(t.unaryExpression('!', test), cons)) ||
                     []),
                 ].map((ternary) => ({
                   type: 'ternary',
@@ -1099,18 +1095,9 @@ export function createExtractor(
             if (name[0] === '$' && t.isJSXExpressionContainer(attribute?.value)) {
               const shortname = name.slice(1)
               if (mediaQueryConfig[shortname]) {
-                if (platform === 'native') {
-                  shouldDeopt = true
-                }
-
-                // allow disabling this extraction
-                if (disableExtractInlineMedia) {
-                  return attr
-                }
-
                 const expression = attribute.value.expression
                 if (!t.isJSXEmptyExpression(expression)) {
-                  const ternaries = createTernariesFromObjectProperties(
+                  const ternaries = flattenNestedTernaries(
                     t.stringLiteral(shortname),
                     expression,
                     {
@@ -1332,17 +1319,6 @@ export function createExtractor(
               return { type: 'ternary', value: staticLogical }
             }
 
-            // Disabling: this probably doesn't optimize much and needs to be done a bit differently
-            if (options.experimentalFlattenDynamicValues) {
-              if (isValidStyleKey(name, staticConfig)) {
-                return {
-                  type: 'dynamic-style',
-                  value,
-                  name: tamaguiConfig?.shorthands[name] || name,
-                }
-              }
-            }
-
             // if we've made it this far, the prop stays inline
             inlined.set(name, true)
             if (shouldPrintDebug) {
@@ -1461,7 +1437,7 @@ export function createExtractor(
           // => Ternary<test && x, { background: 'red' }, null>
           // => Ternary<test && !x, { background: 'green' }, null>
           // => Ternary<test && '$gtSm', { color: 'green' }, null>
-          function createTernariesFromObjectProperties(
+          function flattenNestedTernaries(
             test: t.Expression,
             side: t.Expression | null,
             ternaryPartial: Partial<Ternary> = {}
@@ -1476,34 +1452,6 @@ export function createExtractor(
               if (!t.isObjectProperty(property)) {
                 throw new Error('expected object property')
               }
-              // handle media queries inside spread/conditional objects
-              if (t.isIdentifier(property.key)) {
-                const key = property.key.name
-                const mediaQueryKey = key.slice(1)
-                const isMediaQuery = key[0] === '$' && mediaQueryConfig[mediaQueryKey]
-                if (isMediaQuery) {
-                  if (t.isExpression(property.value)) {
-                    const ternaries = createTernariesFromObjectProperties(
-                      t.stringLiteral(mediaQueryKey),
-                      property.value,
-                      {
-                        inlineMediaQuery: mediaQueryKey,
-                      }
-                    )
-                    if (ternaries) {
-                      return ternaries.map((value) => ({
-                        ...ternaryPartial,
-                        ...value,
-                        // ensure media query test stays on left side (see getMediaQueryTernary)
-                        test: t.logicalExpression('&&', value.test, test),
-                      }))
-                    }
-                    logger.info(['⚠️ no ternaries?', property].join(' '))
-                  } else {
-                    logger.info(['⚠️ not expression', property].join(' '))
-                  }
-                }
-              }
               // this could be a recurse here if we want to get fancy
               if (t.isConditionalExpression(property.value)) {
                 // merge up into the parent conditional, split into two
@@ -1596,7 +1544,7 @@ export function createExtractor(
           const canFlattenProps = inlined.size === 0
 
           let shouldFlatten = Boolean(
-            flatNode &&
+            flatNodeName &&
               !shouldDeopt &&
               canFlattenProps &&
               !hasSpread &&
@@ -1619,66 +1567,78 @@ export function createExtractor(
             }
           })
 
-          // only if we flatten, ensure the default styles are there
-          if (shouldFlatten) {
-            let skipMap = false
-            const defaultStyleAttrs = Object.keys(defaultProps).flatMap((key) => {
-              if (skipMap) return []
-              const value = defaultProps[key]
-              if (key === 'theme' && !themeVal) {
-                if (platform === 'native') {
-                  shouldFlatten = false
-                  skipMap = true
-                  inlined.set('theme', { value: t.stringLiteral(value) })
-                }
-                themeVal = { value: t.stringLiteral(value) }
-                return []
-              }
-              if (!isValidStyleKey(key, staticConfig)) {
-                return []
-              }
-              const name = tamaguiConfig?.shorthands[key] || key
-              if (value === undefined) {
-                logger.warn(
-                  `⚠️ Error evaluating default style for component, prop ${key} ${value}`
-                )
-                shouldDeopt = true
-                return
-              }
-              if (name[0] === '$' && mediaQueryConfig[name.slice(1)]) {
-                defaultProps[key] = undefined
-                return evaluateAttribute({
-                  node: t.jsxAttribute(
-                    t.jsxIdentifier(name),
-                    t.jsxExpressionContainer(
-                      t.objectExpression(
-                        Object.keys(value)
-                          .filter((k) => {
-                            return typeof value[k] !== 'undefined'
-                          })
-                          .map((k) => {
-                            return t.objectProperty(
-                              t.identifier(k),
-                              literalToAst(value[k])
-                            )
-                          })
-                      )
+          if (!shouldFlatten) {
+            // were no longer partially optimizing, it adds a lot of complexity for dubious performance
+            if (shouldPrintDebug) {
+              logger.info(
+                `Deopting ${JSON.stringify({
+                  shouldFlatten,
+                  shouldDeopt,
+                  canFlattenProps,
+                  hasSpread,
+                  neverFlatten: staticConfig.neverFlatten,
+                })}`
+              )
+            }
+            node.attributes = ogAttributes
+            return
+          }
+
+          // ensure the default styles are there
+          let skipMap = false
+          const defaultStyleAttrs = Object.keys(defaultProps).flatMap((key) => {
+            if (skipMap) return []
+            const value = defaultProps[key]
+            if (key === 'theme' && !themeVal) {
+              if (platform === 'native') {
+                shouldFlatten = false
+                skipMap = true
+                inlined.set('theme', { value: t.stringLiteral(value) })
+              }
+              themeVal = { value: t.stringLiteral(value) }
+              return []
+            }
+            if (!isValidStyleKey(key, staticConfig)) {
+              return []
+            }
+            const name = tamaguiConfig?.shorthands[key] || key
+            if (value === undefined) {
+              logger.warn(
+                `⚠️ Error evaluating default style for component, prop ${key} ${value}`
+              )
+              shouldDeopt = true
+              return
+            }
+            if (name[0] === '$' && mediaQueryConfig[name.slice(1)]) {
+              defaultProps[key] = undefined
+              return evaluateAttribute({
+                node: t.jsxAttribute(
+                  t.jsxIdentifier(name),
+                  t.jsxExpressionContainer(
+                    t.objectExpression(
+                      Object.keys(value)
+                        .filter((k) => {
+                          return typeof value[k] !== 'undefined'
+                        })
+                        .map((k) => {
+                          return t.objectProperty(t.identifier(k), literalToAst(value[k]))
+                        })
                     )
-                  ),
-                } as any)
-              }
-              const attr: ExtractedAttrStyle = {
-                type: 'style',
-                name,
-                value: { [name]: value },
-              }
-              return attr
-            }) as ExtractedAttr[]
+                  )
+                ),
+              } as any)
+            }
+            const attr: ExtractedAttrStyle = {
+              type: 'style',
+              name,
+              value: { [name]: value },
+            }
+            return attr
+          }) as ExtractedAttr[]
 
-            if (!skipMap) {
-              if (defaultStyleAttrs.length) {
-                attrs = [...defaultStyleAttrs, ...attrs]
-              }
+          if (!skipMap) {
+            if (defaultStyleAttrs.length) {
+              attrs = [...defaultStyleAttrs, ...attrs]
             }
           }
 
@@ -1723,10 +1683,9 @@ export function createExtractor(
             }, [])
             .flat()
 
-          const shouldWrapTheme = shouldFlatten && themeVal
           // wrap theme around children on flatten
           // account for shouldFlatten could change w the above block "if (disableExtractVariables)"
-          if (shouldWrapTheme) {
+          if (themeVal) {
             if (!programPath) {
               console.warn(
                 `No program path found, avoiding importing flattening / importing theme in ${sourcePath}`
@@ -1774,38 +1733,6 @@ export function createExtractor(
             }
           }
 
-          if (shouldPrintDebug) {
-            try {
-              // prettier-ignore
-              logger.info(
-                [
-                  ' flatten?',
-                  shouldFlatten,
-                  objToStr({
-                    hasSpread,
-                    shouldDeopt,
-                    canFlattenProps,
-                    shouldWrapTheme,
-                    hasOnlyStringChildren,
-                  }),
-                  'inlined',
-                  inlined.size,
-                  [...inlined],
-                ].join(' ')
-              )
-            } catch {
-              // ok
-            }
-          }
-
-          if (shouldDeopt || !shouldFlatten) {
-            if (shouldPrintDebug) {
-              logger.info(`Deopting ${shouldDeopt} ${shouldFlatten}`)
-            }
-            node.attributes = ogAttributes
-            return
-          }
-
           if (shouldPrintDebug) {
             logger.info(
               ['  - attrs (flattened): \n', logLines(attrs.map(attrStr).join(', '))].join(
@@ -2101,12 +2028,10 @@ export function createExtractor(
           }
 
           // add default props
-          if (shouldFlatten) {
-            attrs.unshift({
-              type: 'style',
-              value: defaultProps,
-            })
-          }
+          attrs.unshift({
+            type: 'style',
+            value: defaultProps,
+          })
 
           attrs = attrs.reduce<ExtractedAttr[]>((acc, cur) => {
             if (cur.type === 'style') {
@@ -2296,15 +2221,6 @@ export function createExtractor(
                 }
               }
             }
-
-            if (attr.type === 'dynamic-style') {
-              if (existingStyleKeys.has(attr.name)) {
-                //@ts-ignore
-                attrs[i] = undefined
-              } else {
-                existingStyleKeys.add(attr.name)
-              }
-            }
           }
 
           if (options.experimentalFlattenThemesOnNative) {
@@ -2337,36 +2253,19 @@ export function createExtractor(
 
           // delete empty styles:
           attrs = attrs.filter((x) => {
-            if (
-              (x.type === 'style' || x.type === 'dynamic-style') &&
-              Object.keys(x.value).length === 0
-            ) {
+            if (x.type === 'style' && Object.keys(x.value).length === 0) {
               return false
             }
             return true
           })
 
-          if (shouldFlatten) {
-            // DO FLATTEN
-            if (shouldPrintDebug) {
-              logger.info(['  [✅] flattening', originalNodeName, flatNode].join(' '))
-            }
-            // @ts-ignore
-            node.name.name = flatNode
-            res.flattened++
-            if (closingElement) {
-              // @ts-ignore
-              closingElement.name.name = flatNode
-            }
-          }
-
           const isNativeNotFlat = !shouldFlatten && platform === 'native'
           if (isNativeNotFlat) {
             if (shouldPrintDebug) {
               logger.info(
                 `Disabled flattening except for simple cases on native for now: ${JSON.stringify(
                   {
-                    flatNode,
+                    flatNode: flatNodeName,
                     shouldDeopt,
                     canFlattenProps,
                     hasSpread,
@@ -2394,7 +2293,6 @@ export function createExtractor(
                 staticConfig.neverFlatten ? 'neverFlatten' : '',
               ].join(' ')
             )
-            logger.info(`  - shouldFlatten/isFlattened: ${shouldFlatten}`)
             logger.info(`  - attrs (end):\n ${logLines(attrs.map(attrStr).join(', '))}`)
           }
 
@@ -2405,21 +2303,37 @@ export function createExtractor(
             lineNumbers,
             filePath,
             config: tamaguiConfig!,
+            flatNodeName,
             attemptEval,
             jsxPath: traversePath,
             originalNodeName,
-            isFlattened: shouldFlatten,
             programPath: programPath!,
             completeProps,
             staticConfig,
           })
+
+          if (shouldFlatten) {
+            if (shouldPrintDebug) {
+              logger.info(['  [✅] flattened', originalNodeName, flatNodeName].join(' '))
+            }
+            // @ts-ignore
+            node.name.name = flatNodeName
+            res.flattened++
+            if (closingElement) {
+              // @ts-ignore
+              closingElement.name.name = flatNodeName
+            }
+          }
         } catch (err: any) {
           node.attributes = ogAttributes
-          console.error(
-            `@tamagui/static error, reverting optimization. In ${filePath} ${lineNumbers} on ${originalNodeName}: ${err.message}. For stack trace set environment TAMAGUI_DEBUG=1`
-          )
-          if (process.env.TAMAGUI_DEBUG === '1') {
-            console.error(err.stack)
+
+          if (!(err instanceof BailOptimizationError)) {
+            console.error(
+              `@tamagui/static error, reverting optimization. In ${filePath} ${lineNumbers} on ${originalNodeName}: ${err.message}. For stack trace set environment TAMAGUI_DEBUG=1`
+            )
+            if (process.env.TAMAGUI_DEBUG === '1') {
+              console.error(err.stack)
+            }
           }
         } finally {
           if (debugPropValue) {

package/src/extractor/errors.ts

@@ -0,0 +1 @@
+export class BailOptimizationError extends Error {}

package/src/extractor/extractMediaStyle.ts

@@ -17,7 +17,7 @@ export function extractMediaStyle(
   importance = 0,
   shouldPrintDebug: boolean | 'verbose' = false
 ) {
-  const { getCSSStylesAtomic, mediaObjectToString } = requireTamaguiCore('web')
+  const { getCSSStylesAtomic } = requireTamaguiCore('web')
   const mt = getMediaQueryTernary(props, ternary, jsxPath, sourcePath)
   if (!mt) {
     return null