@tamagui/web 3.0.0-beta.1133.1 → 3.0.0-beta.1141.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "3.0.0-beta.1133.1",
+  "version": "3.0.0-beta.1141.1",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -100,24 +100,24 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/animation-helpers": "3.0.0-beta.1133.1",
-    "@tamagui/compose-refs": "3.0.0-beta.1133.1",
-    "@tamagui/constants": "3.0.0-beta.1133.1",
-    "@tamagui/dom": "3.0.0-beta.1133.1",
-    "@tamagui/helpers": "3.0.0-beta.1133.1",
-    "@tamagui/is-equal-shallow": "3.0.0-beta.1133.1",
-    "@tamagui/native": "3.0.0-beta.1133.1",
-    "@tamagui/normalize-css-color": "3.0.0-beta.1133.1",
-    "@tamagui/react-native-types": "3.0.0-beta.1133.1",
-    "@tamagui/style-grammar": "3.0.0-beta.1133.1",
-    "@tamagui/timer": "3.0.0-beta.1133.1",
-    "@tamagui/types": "3.0.0-beta.1133.1",
-    "@tamagui/use-did-finish-ssr": "3.0.0-beta.1133.1",
-    "@tamagui/use-event": "3.0.0-beta.1133.1",
-    "@tamagui/use-force-update": "3.0.0-beta.1133.1"
+    "@tamagui/animation-helpers": "3.0.0-beta.1141.1",
+    "@tamagui/compose-refs": "3.0.0-beta.1141.1",
+    "@tamagui/constants": "3.0.0-beta.1141.1",
+    "@tamagui/dom": "3.0.0-beta.1141.1",
+    "@tamagui/helpers": "3.0.0-beta.1141.1",
+    "@tamagui/is-equal-shallow": "3.0.0-beta.1141.1",
+    "@tamagui/native": "3.0.0-beta.1141.1",
+    "@tamagui/normalize-css-color": "3.0.0-beta.1141.1",
+    "@tamagui/react-native-types": "3.0.0-beta.1141.1",
+    "@tamagui/style-grammar": "3.0.0-beta.1141.1",
+    "@tamagui/timer": "3.0.0-beta.1141.1",
+    "@tamagui/types": "3.0.0-beta.1141.1",
+    "@tamagui/use-did-finish-ssr": "3.0.0-beta.1141.1",
+    "@tamagui/use-event": "3.0.0-beta.1141.1",
+    "@tamagui/use-force-update": "3.0.0-beta.1141.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.1133.1",
+    "@tamagui/build": "3.0.0-beta.1141.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "19.2.3",

package/src/helpers/getSplitStyles.tsx

@@ -757,15 +757,44 @@ function contributeProp(
         ? styleOriginalValues.get(style)
         : undefined
       for (const key in style) {
-        if (style[key] == null) continue
+        const value = style[key]
+        if (value == null) continue
+        // the style prop is the inline style attribute, as in react: a plain
+        // value never becomes an atomic class, so element.style reads it back
+        // and it can change every frame without inserting a rule. a value that
+        // carries conditions can only exist as css, so those still compile
+        let inline = !styleState.styleProps.stylePieceEntries
         if (process.env.TAMAGUI_TARGET === 'web') {
           if (key === 'containerName') {
-            pass[passContainerName] = style[key]
+            pass[passContainerName] = value
+            inline = false
           } else if (key === 'containerType') {
-            pass[passContainerType] = style[key]
+            pass[passContainerType] = value
+            inline = false
           }
         }
-        contributeValue(styleState, key, style[key], styleOriginals?.[key])
+        if (inline) {
+          if (typeof value === 'string') {
+            const [segments] = getConfigRevisionState(conf).parseFlatValue(value)
+            for (let index = 4; index < segments.length; index += 5) {
+              if (!(segments[index] & 1)) {
+                inline = false
+                break
+              }
+            }
+          } else if (
+            value &&
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            !isVariable(value) &&
+            classifyConditionalObject(value, styleState) !== 0
+          ) {
+            inline = false
+          }
+        }
+        ;(styleState as DirectState).flatInlineStyleProp = inline
+        contributeValue(styleState, key, value, styleOriginals?.[key])
+        ;(styleState as DirectState).flatInlineStyleProp = false
       }
     }
     pass[passSourceLayer] = layerBeforeStyle
@@ -1926,6 +1955,16 @@ function writeCapturedStyleRecord(
       (entryFlags & (recordInline | recordCSS)) !==
       (flags & (recordInline | recordCSS))
     ) {
+      // a piece landing after a plain style value replaces its inline record
+      if (
+        sourceLayer === sourceLayerStyle &&
+        entry[7]! >> 5 === sourceLayerStyle &&
+        entry[0] === source[0] &&
+        !condition &&
+        !entry[2]
+      ) {
+        list.splice(index--, 1)
+      }
       continue
     }
     if (entry[0] !== source[0]) continue
@@ -2100,6 +2139,8 @@ type HOCClassNames = [
 ]
 
 type DirectState = GetStyleState & {
+  // set while a plain style prop value contributes, so its record stays inline
+  flatInlineStyleProp?: boolean
   flatValueScope?: ValueScopeCache
   flatConditions?: Map<string, Condition>
   flatConditionsClassed?: boolean
@@ -2224,7 +2265,12 @@ function writeStyleRecord(
   const identity = cursor ? cursor[conditionKey] : ''
   const direct = state as DirectState
   const slots = (direct.flatSlots ||= new Map())
-  const slot =
+  const sourceLayer = direct.flatPass?.[passSourceLayer] || 0
+  if (direct.flatInlineStyleProp) flags |= recordInline
+  // css records share a slot per shorthand group so one class covers the
+  // group; an inline record keeps its own property slot because the emitter
+  // merges exactly one inline winner per slot
+  const cssSlot =
     process.env.TAMAGUI_TARGET === 'web' &&
     canGenerateCSS &&
     (state.flatShouldDoClasses || flags & recordCSS)
@@ -2232,8 +2278,30 @@ function writeStyleRecord(
       : property.startsWith('transition')
         ? 'transition'
         : property
+  const slot = flags & recordInline && cssSlot !== property ? property : cssSlot
   let list = slots.get(slot)
   if (!list) slots.set(slot, (list = []))
+  // a style array is last-wins per property even across a piece (a class) and
+  // a plain value (inline), which otherwise never meet
+  if (sourceLayer === sourceLayerStyle && !condition) {
+    const other =
+      slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property)
+    if (other) {
+      for (let index = 0; index < other.length; index++) {
+        const entry = other[index]
+        const entryFlags = entry[7]!
+        if (
+          entry[0] === property &&
+          !entry[2] &&
+          entryFlags >> 5 === sourceLayerStyle &&
+          (entryFlags & (recordInline | recordCSS)) !==
+            (flags & (recordInline | recordCSS))
+        ) {
+          other.splice(index--, 1)
+        }
+      }
+    }
+  }
   for (let index = 0; index < list.length; index++) {
     const entry = list[index]
     const entryFlags = entry[7]!
@@ -2263,7 +2331,7 @@ function writeStyleRecord(
     cursor ? cursor[conditionSelector] : '',
     cursor ? cursor[conditionWrappers] : undefined,
     original,
-    flags | (((state as DirectState).flatPass?.[passSourceLayer] || 0) << 5),
+    flags | (sourceLayer << 5),
   ])
 }
 
@@ -2526,7 +2594,8 @@ function configuredValue(
   state: GetStyleState,
   property: string,
   raw: string,
-  embedded = false
+  embedded = false,
+  nativeColors?: Map<string, unknown>
 ): any {
   const grammar = getConfigRevisionState(state.conf)
   let name = raw
@@ -2552,7 +2621,7 @@ function configuredValue(
     property === 'letterSpacing'
   const resolveValues = state.styleProps.resolveValues
   let byRaw: Map<string, any> | undefined
-  if (!fontProperty) {
+  if (!fontProperty && !nativeColors) {
     const revision = grammar.revision
     if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
       valueCacheConf = state.conf
@@ -2746,7 +2815,7 @@ function configuredValue(
     out =
       resolveValues === 'except-theme' && fromTheme
         ? `${THEME_REF_PREFIX}${lookupName}${opacity !== undefined ? `/${opacity}` : ''}`
-        : resolveVariableValue(property, value, resolveValues)
+        : resolveVariableValue(nativeColors ? 'color' : property, value, resolveValues)
     if (opacity !== undefined) {
       out =
         process.env.TAMAGUI_TARGET === 'web'
@@ -2754,13 +2823,20 @@ function configuredValue(
           : (normalizeColor(out, opacity / 100) ?? out)
     }
   }
+  if (nativeColors && out && typeof out === 'object') {
+    const reference = `__tamagui_native_color_${nativeColors.size}`
+    nativeColors.set(reference, out)
+    out = reference
+  }
   if (embedded && out === raw) {
     const usedSafeArea = state.flatUsesSafeArea
-    out = grammar.embeddedTokens(raw, (word) => configuredValue(state, property, word))
+    out = grammar.embeddedTokens(raw, (word) =>
+      configuredValue(state, property, word, false, nativeColors)
+    )
     // a safe-area token flips state as it resolves, so a cached hit would lose it
     if (!usedSafeArea && state.flatUsesSafeArea) return out
   }
-  if (!fontProperty && !fromTheme) {
+  if (!fontProperty && !fromTheme && !nativeColors) {
     if (valueCacheEntries > 8192) {
       valueCaches = new WeakMap()
       valueCacheEntries = 0
@@ -3028,8 +3104,16 @@ function emitResolved(
   )
 }
 
-function resolveValue(state: GetStyleState, property: string, raw: any) {
-  let value = typeof raw === 'string' ? configuredValue(state, property, raw, true) : raw
+function resolveValue(
+  state: GetStyleState,
+  property: string,
+  raw: any,
+  nativeColors?: Map<string, unknown>
+) {
+  let value =
+    typeof raw === 'string'
+      ? configuredValue(state, property, raw, true, nativeColors)
+      : raw
   if (
     (process.env.TAMAGUI_TARGET === 'native' || !state.flatShouldDoClasses) &&
     typeof value === 'string' &&
@@ -3293,7 +3377,15 @@ function emitValue(
     return
   }
 
-  let value: any = resolveValue(state, property, raw)
+  const nativeColors =
+    process.env.TAMAGUI_TARGET === 'native' &&
+    typeof raw === 'string' &&
+    (property === 'backgroundImage' ||
+      property === 'boxShadow' ||
+      property === 'textShadow')
+      ? new Map<string, unknown>()
+      : undefined
+  let value: any = resolveValue(state, property, raw, nativeColors)
   if (
     canGenerateCSS &&
     state.flatShouldDoClasses &&
@@ -3311,7 +3403,7 @@ function emitValue(
       property === 'boxShadow' ||
       property === 'textShadow')
   ) {
-    const parsed = parseNativeStyle(property, value)
+    const parsed = parseNativeStyle(property, value, nativeColors)
     if (parsed) {
       if (property === 'textShadow') {
         for (const [key, parsedValue] of parsed) {
@@ -3756,6 +3848,7 @@ function contributeValue(
 
 function clearDirectStyle(state: GetStyleState, property: string) {
   const direct = state as DirectState
+  if (direct.flatDynamicColors) delete direct.flatDynamicColors[property]
   if (process.env.TAMAGUI_TARGET === 'web') property = webStyleProperty(property)
   const propertyKind = getConfigRevisionState(state.conf).propertyKind(property)
   const atomicKey = property.startsWith('transition')
@@ -3770,15 +3863,20 @@ function clearDirectStyle(state: GetStyleState, property: string) {
   const slot = process.env.TAMAGUI_TARGET === 'web' ? styleSlot(atomicKey) : atomicKey
   direct.flatAtomics?.delete(slot)
   if (direct.flatSlots) {
-    if (slot !== atomicKey) {
+    // a slot groups related properties under one atomic class. clearing a
+    // longhand removes only its records, and so does clearing `flex`, which
+    // shares its slot with flexDirection and flexWrap: <XStack flex={undefined} />
+    // keeps the styled row
+    if (slot !== atomicKey || atomicKey === 'flex') {
       const entries = direct.flatSlots.get(slot)
       if (entries) {
         for (let index = entries.length; index--; ) {
           if (entries[index][0] === atomicKey) entries.splice(index, 1)
         }
+        if (!entries.length) direct.flatSlots.delete(slot)
       }
     }
-    direct.flatSlots.delete(atomicKey)
+    if (atomicKey !== 'flex') direct.flatSlots.delete(atomicKey)
   }
   if (atomicKey === 'transform') state.transformAccumulator = undefined
   if (state.style) delete state.style[atomicKey]

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,gBAAgB,EAEhB,mBAAmB,EAEnB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAEb,eAAe,EACf,YAAY,EAGZ,qBAAqB,EACrB,qBAAqB,EAErB,WAAW,EAGZ,MAAM,UAAU,CAAA;AAkBjB,OAAO,EAAE,oBAAoB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAKlF,OAAO,EAAE,oBAAoB,EAAE,CAAA;AAmB/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAe3D,OAAO,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AACvF,YAAY,EACV,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAE9B,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAK3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,MAAM,MAAM,aAAa,GAAG,CAC1B,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,EAEjB,eAAe,CAAC,EAAE,mBAAmB,GAAG,IAAI,EAC5C,iBAAiB,CAAC,EAAE,iBAAiB,KAClC,IAAI,GAAG,cAAc,CAAA;AA4U1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAEhF;AA6nBD,eAAO,MAAM,cAAc,EAAE,aA0mB5B,CAAA;AAuWD,MAAM,MAAM,UAAU,GAAG,CACvB,KAAK,EAAE,aAAa,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,gBAAgB,CAAC,EAAE,OAAO,EAC1B,aAAa,CAAC,EAAE,GAAG,KAChB,IAAI,CAAA;AAyyCT,KAAK,oBAAoB,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,CAAA;AAgCnF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,oBAAoB,GAAG,IAAI,EACjC,QAAQ,SAAI,EACZ,WAAW,UAAQ,WAyNpB;AAqHD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,aAAa,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,GAAG,EACb,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,OAAO,QAsBlB;AAID,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAgBtF;AAMD,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,gBAAgB,EAEhB,mBAAmB,EAEnB,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAEb,eAAe,EACf,YAAY,EAGZ,qBAAqB,EACrB,qBAAqB,EAErB,WAAW,EAGZ,MAAM,UAAU,CAAA;AAkBjB,OAAO,EAAE,oBAAoB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAKlF,OAAO,EAAE,oBAAoB,EAAE,CAAA;AAmB/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAe3D,OAAO,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AACvF,YAAY,EACV,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAE9B,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAK3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,MAAM,MAAM,aAAa,GAAG,CAC1B,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,EAEjB,eAAe,CAAC,EAAE,mBAAmB,GAAG,IAAI,EAC5C,iBAAiB,CAAC,EAAE,iBAAiB,KAClC,IAAI,GAAG,cAAc,CAAA;AA4U1B,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,WAEhF;AA0pBD,eAAO,MAAM,cAAc,EAAE,aA0mB5B,CAAA;AAiXD,MAAM,MAAM,UAAU,GAAG,CACvB,KAAK,EAAE,aAAa,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,gBAAgB,CAAC,EAAE,OAAO,EAC1B,aAAa,CAAC,EAAE,GAAG,KAChB,IAAI,CAAA;AA81CT,KAAK,oBAAoB,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,CAAA;AAgCnF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,oBAAoB,GAAG,IAAI,EACjC,QAAQ,SAAI,EACZ,WAAW,UAAQ,WAyNpB;AA2HD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,aAAa,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,GAAG,EACb,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,OAAO,QAsBlB;AAID,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAgBtF;AAMD,cAAc,mBAAmB,CAAA"}