@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/helpers/themeRef.ts

@@ -0,0 +1,34 @@
+/**
+ * Compile-time theme reference sentinel.
+ *
+ * The static compiler resolves styles with `resolveValues: 'except-theme'`.
+ * Values that resolve through the active theme (as opposed to static tokens,
+ * which are theme-independent) are kept symbolic as a sentinel string so the
+ * compiler can split them out and emit `theme.<key>.get()` expressions inside
+ * `_withStableStyle`, instead of freezing the build machine's first-theme
+ * values into compiled output. A string survives every downstream style
+ * normalization path untouched; the control character cannot appear in a real
+ * style value.
+ */
+export const THEME_REF_PREFIX = '\u0001theme:'
+
+/**
+ * The theme key of a pure reference, or null when the value is anything else,
+ * including a reference embedded in a larger string or carrying an opacity
+ * modifier, which compiled output cannot represent and must leave on the
+ * runtime path.
+ */
+export function themeRefKey(value: unknown): string | null {
+  if (typeof value !== 'string' || !value.startsWith(THEME_REF_PREFIX)) return null
+  const key = value.slice(THEME_REF_PREFIX.length)
+  return key && !key.includes('/') && !key.includes(THEME_REF_PREFIX) ? key : null
+}
+
+export function containsThemeRef(value: unknown): boolean {
+  if (typeof value === 'string') return value.includes(THEME_REF_PREFIX)
+  if (Array.isArray(value)) return value.some(containsThemeRef)
+  if (value && typeof value === 'object') {
+    return Object.values(value).some(containsThemeRef)
+  }
+  return false
+}

package/src/helpers/themeable.tsx

@@ -9,16 +9,13 @@ export function themeable<ComponentType extends (props: any) => any>(
   staticConfig: Partial<StaticConfig>,
   optimize = false
 ) {
-  const withThemeComponent = React.forwardRef(function WithTheme(
-    props: ThemeableProps,
-    ref
-  ) {
+  const withThemeComponent = function WithTheme(props: ThemeableProps & { ref?: any }) {
     'use no memo'
 
-    const userDefaults = getDefaultProps(staticConfig, props.componentName)
+    const userDefaults = getDefaultProps(staticConfig)
     const defaultTheme = userDefaults?.theme
     const defaultResetTheme = userDefaults?.themeReset
-    const { theme, componentName, themeReset, ...rest } = props
+    const { theme, themeReset, ref, ...rest } = props
 
     let overriddenContextProps: object | undefined
     const context = staticConfig?.context
@@ -48,11 +45,6 @@ export function themeable<ComponentType extends (props: any) => any>(
     // which is not allowed in HTML and causes hydration errors / logs
     let filteredProps: Partial<ThemeProps> | null = null
 
-    const compName = componentName || staticConfig?.componentName
-    if (compName) {
-      filteredProps = filteredProps || {}
-      filteredProps.componentName = compName
-    }
     if ('debug' in props) {
       filteredProps = filteredProps || {}
       filteredProps.debug = props.debug
@@ -89,7 +81,7 @@ export function themeable<ComponentType extends (props: any) => any>(
     }
 
     return contents
-  })
+  }
 
   const withTheme: any = withThemeComponent
   withTheme.displayName = `Themed(${

package/src/helpers/themes.ts

@@ -4,20 +4,19 @@ import { createVariable, isVariable } from '../createVariable'
 // shared by createTamagui so extracted here
 export function ensureThemeVariable(theme: any, key: string) {
   const val = theme[key]
+  const value = isVariable(val) ? val.val : val
   if (!isVariable(val)) {
     theme[key] = createVariable({
       key,
       name: key,
-      val,
+      val: value,
+    })
+  } else if (val.name !== key) {
+    // rename to theme name
+    theme[key] = createVariable({
+      key: val.name,
+      name: key,
+      val: value,
     })
-  } else {
-    if (val.name !== key) {
-      // rename to theme name
-      theme[key] = createVariable({
-        key: val.name,
-        name: key,
-        val: val.val,
-      })
-    }
   }
 }

package/src/helpers/tokenCategories.ts

@@ -0,0 +1,104 @@
+// The prop -> token-category tables.
+//
+// Its own module because both `propMapper` and `directStyle` bind props to
+// these categories, and `propMapper` needs `directStyle`'s condition resolver:
+// leaving the tables where the resolver's consumer lives made the two files
+// import each other.
+
+import { tokenCategories } from '@tamagui/helpers'
+
+export type StyleTokenCategory = 'size' | 'space' | 'radius' | 'zIndex' | 'fontSize'
+
+function mapTokenCategory(keys: Record<string, boolean>, category: StyleTokenCategory) {
+  return Object.fromEntries(Object.keys(keys).map((key) => [key, category]))
+}
+
+// exported so the flat-value grammar adapter binds props to the same token
+// categories the bare-token path already uses, rather than keeping a second table
+export const tokenCategoryByProperty: Record<string, StyleTokenCategory> = {
+  ...mapTokenCategory(tokenCategories.size, 'size'),
+  ...mapTokenCategory(tokenCategories.radius, 'radius'),
+  ...mapTokenCategory(tokenCategories.zIndex, 'zIndex'),
+  // the transform family's x/y are lengths from the space scale (v6 decision:
+  // `x="4"` resolves like `p="4"`), never the size category
+  x: 'space',
+  y: 'space',
+  fontSize: 'fontSize',
+  borderWidth: 'space',
+  borderTopWidth: 'space',
+  borderRightWidth: 'space',
+  borderBottomWidth: 'space',
+  borderLeftWidth: 'space',
+  borderBlockWidth: 'space',
+  borderBlockStartWidth: 'space',
+  borderBlockEndWidth: 'space',
+  borderInlineWidth: 'space',
+  borderInlineStartWidth: 'space',
+  borderInlineEndWidth: 'space',
+  outlineOffset: 'space',
+  outlineWidth: 'space',
+  gap: 'space',
+  rowGap: 'space',
+  columnGap: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
+  margin: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginEnd: 'space',
+  marginLeft: 'space',
+  marginHorizontal: 'space',
+  marginStart: 'space',
+  marginVertical: 'space',
+  padding: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingEnd: 'space',
+  paddingLeft: 'space',
+  paddingHorizontal: 'space',
+  paddingStart: 'space',
+  paddingVertical: 'space',
+}
+
+export type RuntimeTokenCategory = StyleTokenCategory | 'color' | 'font' | 'fontFamily'
+
+export function getTokenCategoryForProperty(
+  property: string
+): RuntimeTokenCategory | undefined {
+  if (property === 'fontFamily') return 'fontFamily'
+  if (
+    property === 'fontSize' ||
+    property === 'fontWeight' ||
+    property === 'lineHeight' ||
+    property === 'letterSpacing'
+  ) {
+    return 'font'
+  }
+  return (
+    tokenCategoryByProperty[property] ||
+    (property in tokenCategories.color ? 'color' : undefined)
+  )
+}

package/src/helpers/transformsToString.ts

@@ -1,20 +1,22 @@
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 
 export function transformsToString(transforms: object[]) {
-  return transforms
-    .map(
-      // { scale: 2 } => 'scale(2)'
-      // { translateX: 20 } => 'translateX(20px)'
-      // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
-      // { perspective: 1000 } => perspective(1000px)
-      (transform) => {
-        const type = Object.keys(transform)[0]
-        const value = transform[type]
-        if (type === 'matrix' || type === 'matrix3d') {
-          return `${type}(${value.join(',')})`
-        }
-        return `${type}(${normalizeValueWithProperty(value, type)})`
-      }
-    )
-    .join(' ')
+  // { scale: 2 } => 'scale(2)'
+  // { translateX: 20 } => 'translateX(20px)'
+  // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+  // { perspective: 1000 } => perspective(1000px)
+  let out = ''
+  for (const transform of transforms) {
+    // each transform object has exactly one key
+    for (const type in transform) {
+      const value = transform[type]
+      if (out) out += ' '
+      out +=
+        type === 'matrix' || type === 'matrix3d'
+          ? `${type}(${value.join(',')})`
+          : `${type}(${normalizeValueWithProperty(value, type)})`
+      break
+    }
+  }
+  return out
 }