@tamagui/web 3.0.0-beta.924.1 → 3.0.0

package/src/helpers/expandStyle.ts

@@ -7,6 +7,7 @@ import { isAndroid, isWeb } from '@tamagui/constants'
 
 import { getStyleCompat, type StyleCompat } from '../config'
 import type { PropMappedValue } from '../types'
+import { splitComponents } from './borderComponents'
 import { parseBorderShorthand } from './parseBorderShorthand'
 import { parseOutlineShorthand } from './parseOutlineShorthand'
 
@@ -90,13 +91,17 @@ export function expandStyle(
         ]
       }
     }
-  }
 
-  if (process.env.TAMAGUI_TARGET === 'native') {
-    if (isAndroid && key === 'elevationAndroid') {
-      return [['elevation', value]]
+    // react-native's RTL-aware names are not CSS. `padding-start`, `border-end-color`,
+    // `border-top-start-radius`, `start` and friends come from a dropped draft that no
+    // browser implements, so the rules generated for them were inert and the props did
+    // nothing on web. map them onto the CSS logical properties that do the same job.
+    if (key in webInlineRenames) {
+      return [[webInlineRenames[key], value]]
     }
+  }
 
+  if (process.env.TAMAGUI_TARGET === 'native') {
     // native-only value transforms
     switch (key) {
       case 'objectFit': {
@@ -106,6 +111,29 @@ export function expandStyle(
       case 'verticalAlign': {
         return [['textAlignVertical', verticalAlignMap[value] || 'auto']]
       }
+      case 'direction': {
+        // css direction sets layout order and text base direction; native
+        // splits that across yoga `direction` and text `writingDirection`
+        return [
+          ['direction', value],
+          ['writingDirection', directionMap[value] || 'auto'],
+        ]
+      }
+      case 'gap': {
+        // Yoga has no multi-value gap string, so `gap: "10px 20px"` splits
+        // into row/column longhands per CSS slot order. a single value stays
+        // on `gap`, which Yoga reads directly
+        if (typeof value === 'string') {
+          const parts = splitComponents(value)
+          if (parts.length === 2) {
+            return [
+              ['rowGap', parts[0]],
+              ['columnGap', parts[1]],
+            ]
+          }
+        }
+        return
+      }
       case 'position': {
         // position: fixed|sticky -> absolute on native
         if (value === 'fixed' || value === 'sticky') {
@@ -191,6 +219,12 @@ const verticalAlignMap: Record<string, string> = {
   auto: 'auto',
 }
 
+const directionMap: Record<string, string> = {
+  ltr: 'ltr',
+  rtl: 'rtl',
+  inherit: 'auto',
+}
+
 // shared expansions
 const all = ['Top', 'Right', 'Bottom', 'Left']
 const horiz = ['Right', 'Left']
@@ -262,6 +296,30 @@ const universalExpansions: Record<string, string[]> = {
   inlineSize: ['width'],
 }
 
+// react-native spells its RTL-aware props the way an old CSS draft did
+// (padding-start, border-end-color, border-top-start-radius, start/end). None of
+// those are real CSS, so on web they are renamed to the logical properties the
+// browser actually implements — which are RTL-aware in exactly the same way.
+const webInlineRenames: Record<string, string> = {
+  paddingStart: 'paddingInlineStart',
+  paddingEnd: 'paddingInlineEnd',
+  marginStart: 'marginInlineStart',
+  marginEnd: 'marginInlineEnd',
+  borderStartWidth: 'borderInlineStartWidth',
+  borderEndWidth: 'borderInlineEndWidth',
+  borderStartColor: 'borderInlineStartColor',
+  borderEndColor: 'borderInlineEndColor',
+  borderStartStyle: 'borderInlineStartStyle',
+  borderEndStyle: 'borderInlineEndStyle',
+  // css orders these block-then-inline, so top-start is start-start
+  borderTopStartRadius: 'borderStartStartRadius',
+  borderTopEndRadius: 'borderStartEndRadius',
+  borderBottomStartRadius: 'borderEndStartRadius',
+  borderBottomEndRadius: 'borderEndEndRadius',
+  start: 'insetInlineStart',
+  end: 'insetInlineEnd',
+}
+
 // Inline-axis logical expansions are native-only: their targets are RN-style
 // RTL-aware names (marginStart/borderEndColor/etc.) which web's CSS hyphenator
 // would emit as invalid CSS. On web these props pass through as native CSS
@@ -285,3 +343,29 @@ const nativeInlineExpansions: Record<string, string[]> = {
   insetInlineStart: ['left'],
   insetInlineEnd: ['right'],
 }
+
+// react native ranks an rtl-aware longhand (paddingStart, borderTopStartRadius)
+// and rowGap/columnGap above the shorthand regardless of order, so a later
+// shorthand has to retract the earlier ones it covers to keep authored order.
+// physical longhands need no entry: the shorthand expands onto them
+const paddingLogicals = ['paddingStart', 'paddingEnd']
+const marginLogicals = ['marginStart', 'marginEnd']
+export const nativeShorthandLogicals: Record<string, string[]> = {
+  padding: paddingLogicals,
+  paddingHorizontal: paddingLogicals,
+  margin: marginLogicals,
+  marginHorizontal: marginLogicals,
+  borderRadius: [
+    'borderTopStartRadius',
+    'borderTopEndRadius',
+    'borderBottomStartRadius',
+    'borderBottomEndRadius',
+    'borderStartStartRadius',
+    'borderStartEndRadius',
+    'borderEndStartRadius',
+    'borderEndEndRadius',
+  ],
+  borderWidth: ['borderStartWidth', 'borderEndWidth'],
+  borderColor: ['borderStartColor', 'borderEndColor'],
+  gap: ['rowGap', 'columnGap'],
+}

package/src/helpers/expandStyles.ts

@@ -2,16 +2,6 @@ import { isWeb } from '@tamagui/constants'
 import { normalizeShadow } from './normalizeShadow'
 
 export function fixStyles(style: Record<string, any>) {
-  if (process.env.TAMAGUI_TARGET === 'native') {
-    if ('elevationAndroid' in style) {
-      // @ts-ignore
-      style['elevation'] = style.elevationAndroid
-      // @ts-ignore
-      delete style.elevationAndroid
-    }
-  }
-
-  // TODO deprecate for web-style shadows
   if (
     style.shadowRadius != null ||
     style.shadowColor ||
@@ -38,5 +28,10 @@ const borderDefaults = {
   borderTopWidth: nativeStyle || 'borderTopStyle',
   borderLeftWidth: nativeStyle || 'borderLeftStyle',
   borderRightWidth: nativeStyle || 'borderRightStyle',
-  // TODO: need to add borderBlock and borderInline here, but they are alot and might impact performance
+  borderBlockWidth: nativeStyle || 'borderBlockStyle',
+  borderBlockStartWidth: nativeStyle || 'borderBlockStartStyle',
+  borderBlockEndWidth: nativeStyle || 'borderBlockEndStyle',
+  borderInlineWidth: nativeStyle || 'borderInlineStyle',
+  borderInlineStartWidth: nativeStyle || 'borderInlineStartStyle',
+  borderInlineEndWidth: nativeStyle || 'borderInlineEndStyle',
 }

package/src/helpers/fluid.ts

@@ -0,0 +1,66 @@
+export interface FluidOptions {
+  min: number
+  max: number
+  from?: number
+  to?: number
+  unit?: 'cqi' | 'cqw' | 'vw'
+}
+
+/**
+ * Generates a CSS clamp() string implementing a linear fluid scale.
+ * Symmetrically consumed by Web (CSS engine) and Native (Tamagui unit resolver).
+ *
+ * @example
+ * fluid({ min: 18, max: 36, from: 375, to: 1200, unit: 'cqi' })
+ * // => "clamp(18px, 2.1818cqi + 9.82px, 36px)"
+ *
+ * fluid(18, 36, { from: 375, to: 1200 })
+ * // => "clamp(18px, 2.1818cqi + 9.82px, 36px)"
+ */
+export function fluid(options: FluidOptions): string
+export function fluid(
+  min: number,
+  max: number,
+  options?: Omit<FluidOptions, 'min' | 'max'>
+): string
+export function fluid(
+  arg1: number | FluidOptions,
+  arg2?: number,
+  arg3?: Omit<FluidOptions, 'min' | 'max'>
+): string {
+  let min: number
+  let max: number
+  let from = 375
+  let to = 1200
+  let unit: 'cqi' | 'cqw' | 'vw' = 'cqi'
+
+  if (typeof arg1 === 'number') {
+    min = arg1
+    max = arg2!
+    if (arg3) {
+      if (arg3.from !== undefined) from = arg3.from
+      if (arg3.to !== undefined) to = arg3.to
+      if (arg3.unit !== undefined) unit = arg3.unit
+    }
+  } else {
+    min = arg1.min
+    max = arg1.max
+    if (arg1.from !== undefined) from = arg1.from
+    if (arg1.to !== undefined) to = arg1.to
+    if (arg1.unit !== undefined) unit = arg1.unit
+  }
+
+  const slope = (max - min) / (to - from)
+  const intercept = min - slope * from
+  const slopePercent = +(slope * 100).toFixed(4)
+  const interceptRounded = +intercept.toFixed(2)
+
+  let expr = `${slopePercent}${unit}`
+  if (interceptRounded > 0) {
+    expr += ` + ${interceptRounded}px`
+  } else if (interceptRounded < 0) {
+    expr += ` - ${Math.abs(interceptRounded)}px`
+  }
+
+  return `clamp(${min}px, ${expr}, ${max}px)`
+}

package/src/helpers/getCSSStylesAtomic.ts

@@ -20,8 +20,11 @@ import { transformsToString } from './transformsToString'
 
 export { styleToCSS } from './styleToCSS'
 
+// outputCSS owns only config rules, so a compiled build keeps runtime CSS. a
+// zero-runtime island is the one component runtime whose artifact holds every
+// provable rule: unproven values render inline and nothing is generated here
 export const canGenerateCSS =
-  process.env.TAMAGUI_TARGET === 'web' && !process.env.TAMAGUI_DID_OUTPUT_CSS
+  process.env.TAMAGUI_TARGET === 'web' && process.env.TAMAGUI_RUNTIME !== 'island'
 
 type DirectAtomicState = GetStyleState & {
   flatAtomics?: Map<string, StyleObject>
@@ -36,6 +39,8 @@ export type AtomicSlotEntry = [
   wrappers: readonly string[] | undefined,
   original?: any,
   flags?: number,
+  lifecycle?: boolean,
+  baseVariant?: boolean,
 ]
 
 export type SlotIdentity = [
@@ -148,7 +153,7 @@ export function addComposition(state: GetStyleState, property: 'translate' | 'sc
 }
 
 export function getCSSStylesAtomic(style: ViewStyleObject) {
-  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return []
+  if (process.env.TAMAGUI_RUNTIME === 'island') return []
   styleToCSS(style)
   const out: StyleObject[] = []
   for (const key in style) {
@@ -172,7 +177,7 @@ export function getCSSStyleAtomic(
   identityKey = key,
   classRepetitions = 1
 ): StyleObject | undefined {
-  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return
+  if (process.env.TAMAGUI_RUNTIME === 'island') return
   return getStyleObject(
     val,
     key,
@@ -247,7 +252,7 @@ export function buildAtomicSlotCSS(
   entries: readonly AtomicSlotEntry[],
   signature: string
 ): SlotIdentity | undefined {
-  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return
+  if (process.env.TAMAGUI_RUNTIME === 'island') return
   syncAtomicConfig()
   let bySignature = slotIdentities.get(atomicKey)
   if (!bySignature) slotIdentities.set(atomicKey, (bySignature = new Map()))
@@ -305,7 +310,7 @@ const hcache = {}
 const toHyphenLower = (match: string) => `-${match.toLowerCase()}`
 const hyphenateStyleName = (key: string) => {
   if (key in hcache) return hcache[key]
-  const val = key.replace(/[A-Z]/g, toHyphenLower)
+  const val = key.replace(/[A-Z]/g, toHyphenLower).replace(/^ms-/, '-ms-')
   hcache[key] = val
   return val
 }
@@ -368,7 +373,7 @@ function createAtomicRules(
         const children = value === 'none' || value === 'box-only' ? 'none' : 'auto'
         rules.push(
           `${selector}{pointer-events:${subject}}`,
-          `${selector}>*{pointer-events:${children}}`
+          `:where(${selector})>*{pointer-events:${children}}`
         )
         break
       }