@tamagui/web 3.0.0-beta.765.1 → 3.0.0-beta.804.1

package/src/helpers/getVariantExtras.tsx

@@ -38,9 +38,21 @@ export const getVariantExtras = (styleState: GetStyleState) => {
       // font identity survives in the font_<name> class.
       const className = props.className
       if (typeof className === 'string') {
-        const match = /(?:^|\s)font_([A-Za-z0-9_-]+)/.exec(className)
-        if (match && fonts[match[1]]) {
-          return fonts[match[1]]
+        let start = 0
+        for (let index = 0; index <= className.length; index++) {
+          if (index !== className.length && className.charCodeAt(index) > 32) continue
+          if (
+            index - start > 5 &&
+            className.charCodeAt(start) === 102 &&
+            className.charCodeAt(start + 1) === 111 &&
+            className.charCodeAt(start + 2) === 110 &&
+            className.charCodeAt(start + 3) === 116 &&
+            className.charCodeAt(start + 4) === 95
+          ) {
+            const name = className.slice(start + 5, index)
+            if (fonts[name]) return fonts[name]
+          }
+          start = index + 1
         }
       }
 

package/src/helpers/insertStyleRule.tsx

@@ -339,7 +339,7 @@ export function stopAccumulatingRules() {
 }
 
 export function updateRules(identifier: string, rules: string[]) {
-  if (trackAllRules) {
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && trackAllRules) {
     allRules[identifier] = rules.join(' ')
     sortedRulesStale = true
   }
@@ -352,7 +352,9 @@ export function setNonce(_: string) {
 }
 
 export function insertStyleRules(rulesToInsert: RulesToInsert) {
-  if (process.env.TAMAGUI_TARGET !== 'web') return
+  if (process.env.TAMAGUI_DID_OUTPUT_CSS || process.env.TAMAGUI_TARGET !== 'web') {
+    return
+  }
 
   if (!sheet && document.head) {
     const styleTag = document.createElement('style')

package/src/helpers/mediaState.ts

@@ -11,3 +11,18 @@ export const mediaQueryConfig: MediaQueries = {}
 export const getMedia = () => mediaState
 
 export const mediaKeys = new Set<string>()
+
+export function mediaKeyMatch(
+  key: string,
+  dimensions: { width: number; height: number }
+) {
+  const mediaQueries = mediaQueryConfig[key]
+  for (const query in mediaQueries) {
+    const expectedVal = +mediaQueries[query]
+    const isMax = query.startsWith('max')
+    const isWidth = query.endsWith('Width')
+    const givenVal = dimensions[isWidth ? 'width' : 'height']
+    if (isMax ? givenVal >= expectedVal : givenVal <= expectedVal) return false
+  }
+  return true
+}

package/src/helpers/normalizeStyle.ts

@@ -1,7 +1,16 @@
+import { isWeb } from '@tamagui/constants'
+import { stylePropsTransform } from '@tamagui/helpers'
+import {
+  addTransformValue,
+  createTransformAccumulator,
+  finalizeTransformAccumulator,
+  type TransformAccumulator,
+} from '@tamagui/style-grammar/runtime'
 import { expandStyle } from './expandStyle'
 import { fixStyles } from './expandStyles'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import { styleOriginalValues } from './styleOriginalValues'
+import { transformsToString } from './transformsToString'
 
 /**
  * This is what you want to run before Object.assign() a style onto another.
@@ -11,18 +20,28 @@ import { styleOriginalValues } from './styleOriginalValues'
  *   3. Preserves original-value provenance across expanded longhands
  */
 
-export function normalizeStyle(style: Record<string, any>, disableNormalize = false) {
+export function normalizeStyle(
+  style: Record<string, any>,
+  disableNormalize = false,
+  mergeTransforms = false
+) {
   const res: Record<string, any> = {}
   const originalValues = styleOriginalValues.get(style)
   let nextOriginalValues: Record<string, any> | undefined
+  let transformAccumulator: TransformAccumulator | undefined
 
   for (let key in style) {
     const prop = style[key]
     if (prop == null) continue
     const originalValue = originalValues?.[key]
+    if (mergeTransforms && (key === 'transform' || key in stylePropsTransform)) {
+      transformAccumulator ||= createTransformAccumulator()
+      addTransformValue(transformAccumulator, key, prop)
+      continue
+    }
     const value = disableNormalize ? prop : normalizeValueWithProperty(prop, key)
     // expand react-native shorthands
-    const out = expandStyle(key, value)
+    const out = mergeTransforms ? undefined : expandStyle(key, value)
     if (out) {
       for (const [nextKey, nextValue] of out) {
         res[nextKey] = nextValue
@@ -40,6 +59,12 @@ export function normalizeStyle(style: Record<string, any>, disableNormalize = fa
     }
   }
 
+  if (transformAccumulator) {
+    const transform = finalizeTransformAccumulator(transformAccumulator)
+    res.transform =
+      isWeb && Array.isArray(transform) ? transformsToString(transform) : transform
+  }
+
   fixStyles(res)
 
   if (nextOriginalValues) {

package/src/helpers/resolveRem.ts

@@ -13,5 +13,5 @@ export function resolveRem(value: string): string {
  * Checks if a value is a rem string
  */
 export function isRemValue(value: unknown): value is string {
-  return typeof value === 'string' && value.includes('rem')
+  return typeof value === 'string' && value.endsWith('rem')
 }

package/src/helpers/skipProps.ts

@@ -1,6 +1,8 @@
 import { nativeOnlyProps } from './nativeOnlyProps'
 import { webPropsToSkip } from './webPropsToSkip'
 
+export const HOC_CLASSNAME_MARKER = 'data-tamagui-hoc-class'
+
 /**
  * These are props that dont pass down below Tamagui styled components
  */
@@ -17,6 +19,7 @@ export const skipProps = {
   disableNativeStyle: 1,
   render: 1,
   style: 1, // handled after the prop loop to preserve authored order
+  [HOC_CLASSNAME_MARKER]: 1,
   group: 1,
   container: 1,
   animatePresence: 1,

package/src/helpers/styleFrontend.ts

@@ -44,6 +44,22 @@ export type FrontendComponent = FunctionComponent<any> & {
   staticConfig: FrontendStaticConfig
 }
 
+export type FrontendClassPlanEntry = readonly [
+  property: string,
+  value: unknown,
+  condition?: string,
+  modifiers?: readonly string[],
+]
+
+export type FrontendClassPlan =
+  | 'raw'
+  | null
+  | readonly FrontendClassPlanEntry[]
+  | {
+      entries: readonly FrontendClassPlanEntry[]
+      preserveRawClass: boolean
+    }
+
 /**
  * A component's authoring syntax. It is chosen by the package the component was
  * imported from and frozen onto its static config when the component is created:
@@ -58,15 +74,10 @@ export type FrontendComponent = FunctionComponent<any> & {
  */
 export type StyleFrontend = {
   /**
-   * Turns authored props into the neutral props the shared renderer consumes.
-   * Runs once per render in `createComponent`, before component state is derived,
-   * because reconstructed enter/exit, pseudo, media and related state props must
-   * exist before the animation and state machinery reads them.
+   * Classifies one class candidate. The shared style cursor owns the className
+   * character walk and feeds every returned entry through its one property sink.
    */
-  preprocessProps: (
-    props: Record<string, any>,
-    config: StyleFrontendConfig
-  ) => Record<string, any>
+  getClassPlan?: (candidate: string, config: StyleFrontendConfig) => FrontendClassPlan
 
   /**
    * Resolves frontend-specific static style input (a class-string base, string
@@ -79,26 +90,8 @@ export type StyleFrontend = {
   ) => Config
 }
 
-/**
- * Marks props that already went through `preprocessProps`, so the style split does
- * not tokenize a second time. A Symbol key is invisible to the `for..in` prop loop,
- * so it never leaks into style processing.
- */
-export const STYLE_FRONTEND_PREPROCESSED: unique symbol = Symbol(
-  'tamaguiStyleFrontendPreprocessed'
-)
-
-/**
- * Internal ordered-prop channel for raw CSS classes a frontend does not own.
- * Numbered keys let passthrough segments keep their exact position among claimed
- * style contributions while the shared renderer still handles them as className.
- */
-export const STYLE_FRONTEND_PASSTHROUGH_PREFIX = '__tamagui_frontend_passthrough_'
-
 /**
  * The regular Tamagui frontend: props are already the renderer's input shape, so
  * preprocessing is identity and costs one property read plus one call.
  */
-export const regularStyleFrontend: StyleFrontend = {
-  preprocessProps: (props) => props,
-}
+export const regularStyleFrontend: StyleFrontend = {}

package/src/helpers/styleToCSS.native.ts

@@ -0,0 +1 @@
+export function styleToCSS(_style: Record<string, any>) {}

package/src/helpers/styleToCSS.ts

@@ -0,0 +1,43 @@
+import { defaultOffset } from './defaultOffset'
+import { normalizeColor } from './normalizeColor'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+
+export function styleToCSS(style: Record<string, any>) {
+  const { shadowOffset, shadowRadius, shadowColor, shadowOpacity } = style
+  if (
+    shadowRadius != null ||
+    shadowColor ||
+    shadowOffset != null ||
+    shadowOpacity != null
+  ) {
+    const offset = shadowOffset || defaultOffset
+    const width = normalizeValueWithProperty(offset.width)
+    const height = normalizeValueWithProperty(offset.height)
+    const radius = normalizeValueWithProperty(shadowRadius)
+    const color = normalizeColor(shadowColor, shadowOpacity)
+    if (color) {
+      const shadow = `${width} ${height} ${radius} ${color}`
+      style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow
+    }
+    delete style.shadowOffset
+    delete style.shadowRadius
+    delete style.shadowColor
+    delete style.shadowOpacity
+  }
+
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style
+  if (textShadowColor || textShadowOffset || textShadowRadius) {
+    const { height, width } = textShadowOffset || defaultOffset
+    const radius = textShadowRadius || 0
+    const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')
+    if (color && (height !== 0 || width !== 0 || radius !== 0)) {
+      const blurRadius = normalizeValueWithProperty(radius)
+      const offsetX = normalizeValueWithProperty(width)
+      const offsetY = normalizeValueWithProperty(height)
+      style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
+    }
+    delete style.textShadowColor
+    delete style.textShadowOffset
+    delete style.textShadowRadius
+  }
+}

package/src/helpers/subscribeToContextGroup.tsx

@@ -1,4 +1,5 @@
 import { mergeIfNotShallowEqual } from '@tamagui/is-equal-shallow'
+import { useRef } from 'react'
 import { getMediaState } from '../hooks/useMedia'
 import type { ComponentSetStateShallow, DisposeFn, AllGroupContexts } from '../types'
 
@@ -9,6 +10,35 @@ type SubscribeToContextGroupProps = {
   groupContext: AllGroupContexts
 }
 
+export const useGroupSetRevision = (
+  pseudoGroups: Set<string> | undefined,
+  mediaGroups: Set<string> | undefined
+) => {
+  const previous = useRef({ pseudoGroups, mediaGroups, revision: 0 })
+
+  if (
+    !setsEqual(previous.current.pseudoGroups, pseudoGroups) ||
+    !setsEqual(previous.current.mediaGroups, mediaGroups)
+  ) {
+    previous.current = {
+      pseudoGroups,
+      mediaGroups,
+      revision: previous.current.revision + 1,
+    }
+  }
+
+  return previous.current.revision
+}
+
+const setsEqual = (a: Set<string> | undefined, b: Set<string> | undefined) => {
+  if (a === b) return true
+  if (!a || !b || a.size !== b.size) return false
+  for (const value of a) {
+    if (!b.has(value)) return false
+  }
+  return true
+}
+
 export const subscribeToContextGroup = (props: SubscribeToContextGroupProps) => {
   const { pseudoGroups, mediaGroups, groupContext } = props
   if (pseudoGroups || mediaGroups) {

package/src/helpers/variables.ts

@@ -1,4 +1,5 @@
 import { reservedThemeProps, simpleHash } from '@tamagui/helpers'
+import { platformMatches } from '@tamagui/constants'
 import {
   grammarPlatformNames,
   isRootThemeName,
@@ -12,7 +13,6 @@ import { getSetting } from '../config'
 import { createVariable, isVariable } from '../createVariable'
 import { getConfigRevisionState, type ConfigRevisionState } from './grammarConfig'
 import { themeUpdateStateKey, type ThemeUpdateLayerInfo } from './themeUpdateState'
-import { platformMatches } from './directStyle'
 import { findVariableToken, isUnitlessVariableKey } from './variableValue'
 import { warnOnce } from './warnOnce'
 import type {
@@ -278,6 +278,7 @@ export function getVariablesCSSRules(
   props: InlineValues,
   conf: TamaguiInternalConfig
 ): VariablesCSS | null {
+  if (process.env.TAMAGUI_DID_OUTPUT_CSS) return null
   const cycleDropped = getCycleDroppedKeys(props)
   const themes = props.themes as
     | Record<string, InlineValues['values'] | undefined>

package/src/helpers/warnOnce.ts

@@ -1,10 +1,9 @@
 // One development warning per key, for the whole runtime.
 //
 // The set is BOUNDED rather than trusted to stay small, and that bound is what
-// lets a warning quote the offending value. `getCSSStylesAtomic` takes a
-// flattened style object from react-native-web, so a page rendering a
-// CMS-supplied colour can vary a refused value without limit, and keying on the
-// value alone would grow this set forever.
+// lets a warning quote the offending value. A page rendering a CMS-supplied
+// colour can vary a refused value without limit, and keying on the value alone
+// would grow this set forever.
 //
 // Keying on the PROPERTY alone was the first answer to that and it was too
 // quiet: a second, different typo in the same prop said nothing, and once a

package/src/helpers/wrapStyleTags.tsx

@@ -67,7 +67,7 @@ function getCachedStyleTag(styleObject: StyleObject) {
 }
 
 export function getStyleTags(styles: StyleObject[]) {
-  if (process.env.TAMAGUI_TARGET !== 'native') {
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET !== 'native') {
     if (styles.length) {
       queueStyleTagCacheClear()
       return <>{styles.map(getCachedStyleTag)}</>