@tamagui/web 3.0.0-beta.831.1 → 3.0.0-beta.889.1

package/src/static-resolve.ts

@@ -10,6 +10,7 @@ import {
   StyleObjectIdentifier,
   StyleObjectProperty,
   StyleObjectRules,
+  stylePropsInput,
   stylePropsText,
   validStyles as validStylesView,
 } from '@tamagui/helpers'
@@ -162,11 +163,12 @@ export function resolveStaticElement(
     Object.values(themes)[0] ||
     ({} as ThemeParsed)
 
-  const isTextLike = Boolean(
-    element.staticConfig?.isText || element.staticConfig?.isInput
-  )
   const baseStaticConfig: StaticConfig = {
-    validStyles: isTextLike ? stylePropsText : validStylesView,
+    validStyles: element.staticConfig?.isInput
+      ? stylePropsInput
+      : element.staticConfig?.isText
+        ? stylePropsText
+        : validStylesView,
     defaultProps: {},
     acceptsClassName: target !== 'native',
     ...(target === 'native' && { isReactNative: true }),
@@ -193,6 +195,7 @@ export function resolveStaticElement(
   }
 
   const styleProps: SplitStyleProps = {
+    isStatic: true,
     resolveValues:
       element.options?.resolveValues ??
       (target === 'native' ? 'except-theme' : 'variable'),

package/src/style.ts

@@ -0,0 +1,97 @@
+import React from 'react'
+
+import type { StaticShapeStyle, StylePiece, TextStyle, ThemeParsed } from './types'
+import { stylePieceSymbol } from './types'
+import { warnOnce } from './helpers/warnOnce'
+
+type StylePieceLayer = 'base' | 'style'
+type StylePieceCompiler = (piece: StylePiece, layer: StylePieceLayer) => void
+type StylePieceResolver = (
+  piece: StylePiece,
+  theme: ThemeParsed,
+  themeName: string
+) => TextStyle
+
+let compileStylePiece: StylePieceCompiler | undefined
+let resolveStylePiece: StylePieceResolver | undefined
+const uncacheablePieces = new WeakSet<StylePiece>()
+const flatClausePattern = /(?:^|\s)@?[A-Za-z][A-Za-z0-9-]*(?:\/[A-Za-z0-9_-]+)?:/
+
+export function setStylePieceCompiler(compiler: StylePieceCompiler) {
+  compileStylePiece = compiler
+}
+
+export function setStylePieceResolver(resolver: StylePieceResolver) {
+  resolveStylePiece = resolver
+}
+
+export function isStylePiece(value: unknown): value is StylePiece {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    stylePieceSymbol in (value as Record<PropertyKey, unknown>)
+  )
+}
+
+export function isStylePieceCacheable(piece: StylePiece) {
+  return !uncacheablePieces.has(piece)
+}
+
+function canCacheByTheme(definition: StaticShapeStyle) {
+  for (const key in definition) {
+    const value = definition[key]
+    if (
+      (typeof value === 'string' && flatClausePattern.test(value)) ||
+      (value && typeof value === 'object')
+    ) {
+      return false
+    }
+  }
+  return true
+}
+
+export function createStylePiece(
+  definition: StaticShapeStyle,
+  layer: StylePieceLayer = 'style'
+): StylePiece {
+  const piece: StylePiece = {
+    className: '',
+    [stylePieceSymbol]: {
+      byKey: {},
+      styleObject: definition,
+    },
+  }
+  if (!canCacheByTheme(definition)) {
+    uncacheablePieces.add(piece)
+  }
+  compileStylePiece?.(piece, layer)
+  return piece
+}
+
+/**
+ * Creates a statically-shaped style fragment. The fragment is accepted only by
+ * Tamagui's `style` prop; array order uses the style prop's normal last-wins
+ * precedence.
+ */
+export function style(definition: StaticShapeStyle): StylePiece {
+  if (process.env.NODE_ENV === 'development') {
+    const internals = (React as any)
+      .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
+    if (internals?.H) {
+      warnOnce(
+        '[tamagui] style() was called during render. Define style pieces at module scope so their rules compile once.'
+      )
+    }
+  }
+  return createStylePiece(definition)
+}
+
+export function resolveStylePieceForTheme(
+  piece: StylePiece,
+  theme: ThemeParsed,
+  themeName: string
+): TextStyle {
+  return resolveStylePiece
+    ? resolveStylePiece(piece, theme, themeName)
+    : piece[stylePieceSymbol].styleObject
+}

package/src/styled.tsx

@@ -1,6 +1,10 @@
+import { stylePropsInput, stylePropsText } from '@tamagui/helpers'
+
 import { createComponent } from './createComponent'
 import { componentDisplayName } from './helpers/componentDisplayName'
 import { mergeVariants } from './helpers/mergeVariants'
+import { resolveVariantStyle } from './helpers/resolveVariantStyle'
+import { styledDynamic } from './helpers/styledDynamic'
 import type { FrontendComponent, StyleFrontend } from './helpers/styleFrontend'
 import { warnOnce } from './helpers/warnOnce'
 import type { GetRef } from './interfaces/GetRef'
@@ -11,24 +15,18 @@ import type {
   GetProps,
   GetStaticConfig,
   GetStyledVariants,
-  InferStyleProps,
   InferStyledProps,
   StaticConfig,
   StaticConfigPublic,
   StylableComponent,
   StyledContext,
+  StyledDynamicFn,
+  StyledDynamicProp,
   TamaDefer,
   TamaguiComponent,
-  ThemeValueByCategory,
   ThemeValueGet,
   VariantDefinitions,
-  VariantResolverKey,
-  VariantResolverValue,
-  VariantSpreadFunction,
 } from './types'
-import type { Text } from './views/Text'
-
-export { createVariantResolver } from './types'
 
 type AreVariantsUndefined<Variants> =
   // because we pass in the Generic variants which for some reason has this :)
@@ -39,19 +37,17 @@ type AreVariantsUndefined<Variants> =
 // objects) widen only at the final public props, in WithThemeAndShorthands
 type GetVariantAcceptedValues<V> = V extends object
   ? {
-      [Key in keyof V]?: V[Key] extends VariantSpreadFunction<any, infer Val>
+      // the fn carrier check runs first: the bare carrier's phantom is
+      // optional, so it would match a fn too and infer unknown
+      [Key in keyof V]?: V[Key] extends StyledDynamicFn<infer Val, any>
         ? Val
-        : GetVariantAcceptedValue<keyof V[Key]>
+        : V[Key] extends StyledDynamicProp<infer Val>
+          ? Val
+          : GetVariantAcceptedValue<keyof V[Key]>
     }
   : undefined
 
-type GetVariantAcceptedValue<Key> = Key extends 'true' | 'false'
-  ? boolean
-  : Key extends string
-    ? VariantResolverKey<Key> extends never
-      ? Key
-      : VariantResolverValue<Key>
-    : Key
+type GetVariantAcceptedValue<Key> = Key extends 'true' | 'false' ? boolean : Key
 
 type NoInferLocal<T> = [T][T extends any ? 0 : never]
 type IsAny<T> = 0 extends 1 & T ? true : false
@@ -122,24 +118,6 @@ type GetStyledContextVariantProps<
   Keys extends string,
 > = Omit<GetStyledContextProps<Context, Keys>, keyof GetProps<ParentComponent>>
 
-type StyledCustomTokenProps<
-  ParentComponent extends StylableComponent,
-  StyledConfig extends StaticConfigPublic,
-  ParentStylesBase extends object,
-  Accepted = StyledConfig['accept'],
-> =
-  Accepted extends Record<string, any>
-    ? {
-        [Key in keyof Accepted]?:
-          | (Key extends keyof ParentStylesBase ? ParentStylesBase[Key] : never)
-          | (Accepted[Key] extends 'style'
-              ? Partial<InferStyleProps<ParentComponent, StyledConfig>>
-              : Accepted[Key] extends 'textStyle'
-                ? Partial<InferStyleProps<typeof Text, StyledConfig>>
-                : ThemeValueByCategory<Accepted[Key]>)
-      }
-    : {}
-
 type StyledMergedVariants<
   ParentComponent extends StylableComponent,
   StyledConfig extends StaticConfigPublic,
@@ -176,15 +154,7 @@ type StyledComponentResult<
   TamaDefer,
   GetRef<ParentComponent>,
   GetNonStyledProps<ParentComponent>,
-  StyledConfig['accept'] extends Record<string, any>
-    ? ParentStylesBase &
-        StyledCustomTokenProps<
-          ParentComponent,
-          StyledConfig,
-          ParentStylesBase,
-          StyledConfig['accept']
-        >
-    : ParentStylesBase,
+  ParentStylesBase,
   StyledVariantsWithContext<
     StyledMergedVariants<ParentComponent, StyledConfig, Variants>,
     GetStyledContextVariantProps<ParentComponent, Context, ContextPropKeys>
@@ -199,7 +169,7 @@ type StyledComponentResult<
  * `@tamagui/tailwind`, which reaches the implementation through
  * `createFrontendStyled`.
  */
-function styled<
+function styledFn<
   ParentComponent extends StylableComponent,
   StyledConfig extends StaticConfigPublic,
   Variants extends VariantDefinitions<ParentComponent, StyledConfig>,
@@ -222,10 +192,15 @@ function styled<
   Context,
   ContextPropKeys
 >
-function styled(...args: any[]) {
+function styledFn(...args: any[]) {
   return (styledImpl as any)(undefined, ...args)
 }
 
+const styled = Object.assign(styledFn, {
+  /** see styledDynamic: value/prop carriers usable as `variants` entries */
+  dynamic: styledDynamic,
+})
+
 /**
  * Builds a `styled()` bound to one frontend descriptor. Components it creates carry
  * that descriptor immutably, so behavior follows import provenance instead of any
@@ -301,20 +276,6 @@ function styledImpl<
               | (Key extends keyof OurVariantProps ? OurVariantProps[Key] : undefined)
           }
 
-  type Accepted = StyledConfig['accept']
-  type CustomTokenProps =
-    Accepted extends Record<string, any>
-      ? {
-          [Key in keyof Accepted]?:
-            | (Key extends keyof ParentStylesBase ? ParentStylesBase[Key] : never)
-            | (Accepted[Key] extends 'style'
-                ? Partial<InferStyleProps<ParentComponent, StyledConfig>>
-                : Accepted[Key] extends 'textStyle'
-                  ? Partial<InferStyleProps<typeof Text, StyledConfig>>
-                  : ThemeValueByCategory<Accepted[Key]>)
-        }
-      : {}
-
   /**
    * de-opting a bit of type niceness because were hitting depth issues too soon
    * before we had:
@@ -329,9 +290,7 @@ function styledImpl<
     TamaDefer,
     GetRef<ParentComponent>,
     ParentNonStyledProps,
-    Accepted extends Record<string, any>
-      ? ParentStylesBase & CustomTokenProps
-      : ParentStylesBase,
+    ParentStylesBase,
     StyledVariantsWithContext<
       MergedVariants,
       GetStyledContextVariantProps<ParentComponent, Context, ContextPropKeys>
@@ -339,11 +298,12 @@ function styledImpl<
     GetStaticConfig<ParentComponent, StyledConfig>
   >
 
-  // validate not using a variant over an existing valid style
-  if (process.env.NODE_ENV !== 'production') {
-    if (!ComponentIn) {
-      throw new Error(`No component given to styled()`)
-    }
+  if (!ComponentIn) {
+    throw new Error(
+      process.env.NODE_ENV === 'development'
+        ? 'No component given to styled()'
+        : '❌ Error 006'
+    )
   }
 
   const parentStaticConfig = ComponentIn['staticConfig'] as StaticConfig | undefined
@@ -444,7 +404,15 @@ function styledImpl<
       }
     }
 
+    const isInput = Boolean(config?.isInput || parentStaticConfig?.isInput)
     const isText = Boolean(config?.isText || parentStaticConfig?.isText)
+    const validStyles =
+      config?.validStyles ||
+      (config?.isInput
+        ? stylePropsInput
+        : config?.isText
+          ? stylePropsText
+          : parentStaticConfig?.validStyles)
 
     const acceptsClassName =
       config?.acceptsClassName ??
@@ -466,6 +434,8 @@ function styledImpl<
         isReactNative: resolvedIsReactNative,
       }),
       isText,
+      isInput,
+      validStyles,
       acceptsClassName,
       context: mergedContext,
       contextProps: mergedContextProps,
@@ -476,6 +446,7 @@ function styledImpl<
       // only an explicitly bound frontend overrides the one inherited from the parent
       ...(frontend && { styleFrontend: frontend }),
     }
+    ;(conf as any).variantStyleResolver = resolveVariantStyle
 
     if (process.env.TAMAGUI_TARGET !== 'native') {
       delete conf.isReactNative