@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.881.1

package/src/index.ts

@@ -11,14 +11,13 @@ export { _withStableStyle } from './_withStableStyle'
 export { _withNativeStyle } from './_withNativeStyle'
 export { createComponent } from './createComponent'
 export { createStyledContext } from './helpers/createStyledContext'
-export { getDefaultProps } from './helpers/getDefaultProps'
 export { getCSSStylesAtomic } from './helpers/getCSSStylesAtomic'
 export { getExpandedShorthand } from './helpers/getExpandedShorthands'
 export { formatDiagnostic } from './helpers/formatDiagnostic'
 export {
+  getStyleStaticConfig,
   getSplitStyles,
   isValidStyleKey,
-  prepareStyleStaticConfig,
 } from './helpers/getSplitStyles'
 export {
   setNativeStyleEngine,
@@ -42,10 +41,16 @@ export { isTamaguiElement } from './helpers/isTamaguiElement'
 export { matchMedia, setupMatchMedia } from './helpers/matchMedia'
 export { mergeProps } from './helpers/mergeProps'
 export { mergeSlotStyleProps } from './helpers/mergeSlotStyleProps'
+export {
+  splitStyleProps,
+  type SplitStylePropsFilter,
+  type SplitStylePropsFilterCallback,
+  type SplitStylePropsOptions,
+  type SplitStylePropsResult,
+} from './helpers/splitStyleProps'
 export { normalizeColor } from './helpers/normalizeColor'
 export { normalizeStyle } from './helpers/normalizeStyle'
 export { containsThemeRef, themeRefKey } from './helpers/themeRef'
-export { themeable } from './helpers/themeable'
 export { getStyleTags } from './helpers/wrapStyleTags'
 
 export { createFont } from './createFont'
@@ -62,15 +67,15 @@ export {
   createVariable,
   createCSSVariable,
   getVariable,
-  getVariableName,
   getVariableValue,
-  getVariableVariable,
   isVariable,
   px,
   variableToString,
 } from './createVariable'
 export { insertFont, updateFont } from './insertFont'
 export { styled } from './styled'
+export { style } from './style'
+export { useStyle } from './hooks/useStyle'
 export { Tamagui } from './Tamagui'
 
 export type { TamaguiBuildOptions } from '@tamagui/types'
@@ -149,7 +154,6 @@ export type {
   Size,
   SizeKeys,
   SizeTokens,
-  SizeVariantSpreadFunction,
   Space,
   SpaceTokens,
   SpaceValue,
@@ -159,7 +163,9 @@ export type {
   StaticConfig,
   StaticComponentObject,
   StaticConfigPublic,
+  StaticShapeStyle,
   StyleObject,
+  StylePiece,
   StyleProp,
   StyledContext,
   StyledContextOptions,
@@ -215,8 +221,6 @@ export type {
   VariableVal,
   VariableValGeneric,
   VariableValIn,
-  VariantSpreadExtras,
-  VariantSpreadFunction,
   WidthHeight,
   WithFlatVariantValues,
   WithShorthands,
@@ -224,7 +228,7 @@ export type {
   ZIndex,
   ZIndexTokens,
 } from './types'
-export { createVariantResolver } from './types'
+export { stylePieceSymbol } from './types'
 
 export type { GetRef } from './interfaces/GetRef'
 export {
@@ -276,7 +280,6 @@ export {
   useAnimatedNumbersStyle,
   useAnimationDriver,
 } from './hooks/useAnimationDriver'
-export { useProps, usePropsAndStyle, useStyle } from './hooks/useProps'
 export { useTheme } from './hooks/useTheme'
 export { usePortalThemeState } from './hooks/usePortalThemeState'
 export { useThemeName } from './hooks/useThemeName'
@@ -334,6 +337,7 @@ export {
   StyleObjectRules,
   StyleObjectValue,
   stylePropsAll,
+  stylePropsInput,
   stylePropsText,
   stylePropsTextOnly,
   stylePropsTransform,

package/src/internal-runtime.ts

@@ -13,7 +13,6 @@ import { createComponent } from './createComponent'
 import { createVariables as createVariablesImpl } from './createVariables'
 import { fixStyles as fixStylesImpl } from './helpers/expandStyles'
 import { styleToCSS as styleToCSSImpl } from './helpers/styleToCSS'
-import { setComponentDisplayName } from './helpers/componentDisplayName'
 import { getThemeCSSRules as getThemeCSSRulesImpl } from './helpers/getThemeCSSRules'
 import { normalizeValueWithProperty as normalizeValueWithPropertyImpl } from './helpers/normalizeValueWithProperty'
 import { proxyThemeToParents as proxyThemeToParentsImpl } from './helpers/proxyThemeToParents'
@@ -120,13 +119,15 @@ export function createFrontendViews(frontend: StyleFrontend): {
   Text: FrontendComponent
 } {
   return {
-    View: setComponentDisplayName(
-      createComponent({ ...viewStaticConfig, styleFrontend: frontend }),
-      'View'
-    ),
-    Text: setComponentDisplayName(
-      createComponent({ ...textStaticConfig, styleFrontend: frontend }),
-      'Text'
-    ),
+    View: createComponent({
+      ...viewStaticConfig,
+      styleFrontend: frontend,
+      displayName: 'View',
+    }),
+    Text: createComponent({
+      ...textStaticConfig,
+      styleFrontend: frontend,
+      displayName: 'Text',
+    }),
   }
 }

package/src/internalRuntimeTypes.ts

@@ -11,6 +11,7 @@ export type {
   FrontendComponent,
   FrontendClassPlan,
   FrontendClassPlanEntry,
+  FrontendClassSink,
   FrontendStaticConfig,
   StyleFrontend,
   StyleFrontendConfig,

package/src/static-resolve.ts

@@ -10,6 +10,7 @@ import {
   StyleObjectIdentifier,
   StyleObjectProperty,
   StyleObjectRules,
+  stylePropsInput,
   stylePropsText,
   validStyles as validStylesView,
 } from '@tamagui/helpers'
@@ -24,7 +25,8 @@ import {
   updateConfig,
 } from './config'
 import { createTamagui, installTamaguiConfig } from './createTamagui'
-import { getSplitStyles, prepareStyleStaticConfig } from './helpers/getSplitStyles'
+import { getSplitStyles } from './helpers/getSplitStyles'
+import { getStyleStaticConfig } from './helpers/styleStaticConfig'
 import { mergeComponentProps } from './helpers/mergeProps'
 import type {
   SplitStyleProps,
@@ -44,7 +46,6 @@ export {
   getTokens,
   getTokenValue,
   installTamaguiConfig,
-  prepareStyleStaticConfig,
   setConfig,
   updateConfig,
 }
@@ -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 }),
@@ -175,19 +177,15 @@ export function resolveStaticElement(
   if (target !== 'native') {
     delete baseStaticConfig.isReactNative
   }
-  prepareStyleStaticConfig(baseStaticConfig)
+  const styleStaticConfig = getStyleStaticConfig(baseStaticConfig, conf)
 
-  // merge component defaultProps if defined on staticConfig
+  // mirror createComponent: only the non-style defaults are props. The styles
+  // are a base layer the style pass writes for us, so merging them here too
+  // would apply them twice and in the wrong order (above variants, not below)
   let elementProps = element.props || {}
-  if (
-    baseStaticConfig.defaultProps &&
-    Object.keys(baseStaticConfig.defaultProps).length > 0
-  ) {
-    const [merged] = mergeComponentProps(
-      baseStaticConfig.defaultProps,
-      undefined,
-      elementProps
-    )
+  const { defaultProps } = styleStaticConfig
+  if (defaultProps) {
+    const [merged] = mergeComponentProps(defaultProps, undefined, elementProps)
     elementProps = merged
   }
 
@@ -197,6 +195,7 @@ export function resolveStaticElement(
   }
 
   const styleProps: SplitStyleProps = {
+    isStatic: true,
     resolveValues:
       element.options?.resolveValues ??
       (target === 'native' ? 'except-theme' : 'variable'),
@@ -229,7 +228,15 @@ export function resolveStaticElement(
       theme,
       themeName,
       componentState,
-      styleProps
+      styleProps,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      styleStaticConfig
     )
   } catch (err: any) {
     return {

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
+}