@tamagui/tailwind 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/src/styled.tsx

@@ -0,0 +1,52 @@
+import { createFrontendStyled } from '@tamagui/core/internal-runtime'
+import { tailwindStyleFrontend } from './frontend'
+import type {
+  GetTailwindNonStyleProps,
+  GetTailwindRef,
+  GetTailwindVariantProps,
+  TailwindComponent,
+  TailwindStyledOptions,
+  TailwindVariantDefinitions,
+  TailwindVariantProps,
+} from './types'
+
+const styledWithFrontend = createFrontendStyled(tailwindStyleFrontend)
+
+/**
+ * Class-first `styled()`. The base is a class string, variant values are class
+ * strings, and the resulting component accepts `className` plus its variants —
+ * never Tamagui inline style props.
+ *
+ * The class base and variant values are parsed once per (component, config) pair
+ * by the frontend's `normalizeStaticConfig`, so authoring cost is not per render.
+ */
+export function styled<
+  Parent extends TailwindComponent<any, any, any>,
+  Variants extends TailwindVariantDefinitions = {},
+>(
+  Component: Parent,
+  baseClassName: string,
+  options?: TailwindStyledOptions<Variants>
+): TailwindComponent<
+  GetTailwindRef<Parent>,
+  GetTailwindNonStyleProps<Parent>,
+  GetTailwindVariantProps<Parent> & TailwindVariantProps<Variants>
+>
+export function styled<
+  Parent extends TailwindComponent<any, any, any>,
+  Variants extends TailwindVariantDefinitions = {},
+>(
+  Component: Parent,
+  options?: TailwindStyledOptions<Variants>
+): TailwindComponent<
+  GetTailwindRef<Parent>,
+  GetTailwindNonStyleProps<Parent>,
+  GetTailwindVariantProps<Parent> & TailwindVariantProps<Variants>
+>
+export function styled(
+  Component: any,
+  optionsOrBaseClassName?: any,
+  maybeOptions?: any
+): any {
+  return styledWithFrontend(Component, optionsOrBaseClassName, maybeOptions)
+}

package/src/types.ts

@@ -0,0 +1,226 @@
+import type { FrontendStaticConfig } from '@tamagui/core/internal-runtime'
+import type {
+  AriaAttributes,
+  CSSProperties,
+  FunctionComponent,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  Ref as ReactRef,
+} from 'react'
+import type {
+  PressableProps,
+  StyleProp,
+  Text as ReactNativeText,
+  TextProps as ReactNativeTextProps,
+  TextStyle,
+  View as ReactNativeView,
+  ViewProps as ReactNativeViewProps,
+  ViewStyle,
+} from 'react-native'
+
+type WebEventProps = {
+  onMouseEnter?: HTMLAttributes<HTMLDivElement>['onMouseEnter']
+  onMouseLeave?: HTMLAttributes<HTMLDivElement>['onMouseLeave']
+  onMouseDown?: HTMLAttributes<HTMLDivElement>['onMouseDown']
+  onMouseUp?: HTMLAttributes<HTMLDivElement>['onMouseUp']
+  onMouseMove?: HTMLAttributes<HTMLDivElement>['onMouseMove']
+  onMouseOver?: HTMLAttributes<HTMLDivElement>['onMouseOver']
+  onMouseOut?: HTMLAttributes<HTMLDivElement>['onMouseOut']
+  onFocus?: HTMLAttributes<HTMLDivElement>['onFocus']
+  onBlur?: HTMLAttributes<HTMLDivElement>['onBlur']
+  onClick?: HTMLAttributes<HTMLDivElement>['onClick']
+  onDoubleClick?: HTMLAttributes<HTMLDivElement>['onDoubleClick']
+  onContextMenu?: HTMLAttributes<HTMLDivElement>['onContextMenu']
+  onWheel?: HTMLAttributes<HTMLDivElement>['onWheel']
+  onKeyDown?: HTMLAttributes<HTMLDivElement>['onKeyDown']
+  onKeyUp?: HTMLAttributes<HTMLDivElement>['onKeyUp']
+  onChange?: HTMLAttributes<HTMLDivElement>['onChange']
+  onInput?: HTMLAttributes<HTMLDivElement>['onInput']
+  onBeforeInput?: HTMLAttributes<HTMLDivElement>['onBeforeInput']
+  onScroll?: HTMLAttributes<HTMLDivElement>['onScroll']
+  onCopy?: HTMLAttributes<HTMLDivElement>['onCopy']
+  onCut?: HTMLAttributes<HTMLDivElement>['onCut']
+  onPaste?: HTMLAttributes<HTMLDivElement>['onPaste']
+  onDrag?: HTMLAttributes<HTMLDivElement>['onDrag']
+  onDragStart?: HTMLAttributes<HTMLDivElement>['onDragStart']
+  onDragEnd?: HTMLAttributes<HTMLDivElement>['onDragEnd']
+  onDragEnter?: HTMLAttributes<HTMLDivElement>['onDragEnter']
+  onDragLeave?: HTMLAttributes<HTMLDivElement>['onDragLeave']
+  onDragOver?: HTMLAttributes<HTMLDivElement>['onDragOver']
+  onDrop?: HTMLAttributes<HTMLDivElement>['onDrop']
+  onPointerDown?: HTMLAttributes<HTMLDivElement>['onPointerDown']
+  onPointerMove?: HTMLAttributes<HTMLDivElement>['onPointerMove']
+  onPointerUp?: HTMLAttributes<HTMLDivElement>['onPointerUp']
+  onPointerCancel?: HTMLAttributes<HTMLDivElement>['onPointerCancel']
+}
+
+type TailwindComponentState = {
+  unmounted: boolean | 'should-enter'
+  disabled?: boolean
+  hover?: boolean
+  press?: boolean
+  pressIn?: boolean
+  focus?: boolean
+  focusVisible?: boolean
+  focusWithin?: boolean
+}
+
+type TailwindCommonProps = AriaAttributes &
+  WebEventProps & {
+    target?: string
+    htmlFor?: string
+    asChild?: boolean | 'except-style' | 'except-style-web' | 'web'
+    dangerouslySetInnerHTML?: { __html: string }
+    children?: ReactNode
+    debug?: boolean | 'break' | 'verbose' | 'visualize' | 'profile'
+    disabled?: boolean
+    themeShallow?: boolean
+    id?: string
+    render?:
+      | keyof HTMLElementTagNameMap
+      | (string & {})
+      | ReactElement
+      | ((
+          props: Record<string, any> & { ref?: ReactRef<any> },
+          state: TailwindComponentState
+        ) => ReactElement)
+    theme?: string | null
+    group?: string | boolean
+    container?: boolean
+    untilMeasured?: 'hide' | 'show'
+    name?: string
+    tabIndex?: string | number
+    role?: HTMLAttributes<HTMLDivElement>['role']
+    disableOptimization?: boolean
+    forceStyle?: 'hover' | 'press' | 'focus' | 'focusVisible' | 'focusWithin'
+    disableClassName?: boolean
+    hitSlop?:
+      | number
+      | { top?: number; left?: number; bottom?: number; right?: number }
+      | null
+    animatedBy?: string | null
+    onPress?: PressableProps['onPress']
+    onLongPress?: PressableProps['onLongPress']
+    onPressIn?: PressableProps['onPress']
+    onPressOut?: PressableProps['onPress']
+  }
+
+type LooseCombinedObjects<A extends object, B extends object> = A | B | (A & B)
+
+export type TailwindViewNonStyleProps = Omit<
+  ReactNativeViewProps,
+  'children' | 'display' | 'hitSlop' | 'pointerEvents' | 'style' | keyof WebEventProps
+> &
+  TailwindCommonProps & {
+    style?: StyleProp<LooseCombinedObjects<CSSProperties, ViewStyle>>
+  }
+
+export type TailwindTextNonStyleProps = Omit<
+  ReactNativeTextProps,
+  'children' | 'style' | keyof WebEventProps
+> &
+  TailwindCommonProps & {
+    style?: StyleProp<LooseCombinedObjects<CSSProperties, TextStyle>>
+  }
+
+type MeasureOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number
+) => void
+
+export interface TailwindElementMethods {
+  measure(callback: MeasureOnSuccessCallback): void
+  measureInWindow(
+    callback: (x: number, y: number, width: number, height: number) => void
+  ): void
+  measureLayout(
+    relativeToNativeNode: ReactNativeView | HTMLElement,
+    onSuccess: (left: number, top: number, width: number, height: number) => void,
+    onFail?: () => void
+  ): void
+  focus(): void
+  blur(): void
+}
+
+export type TailwindViewElement = (HTMLElement & TailwindElementMethods) | ReactNativeView
+export type TailwindTextElement = (HTMLElement & TailwindElementMethods) | ReactNativeText
+
+/**
+ * The complete styling surface of a `@tamagui/tailwind` component.
+ *
+ * Everything else a component accepts is ordinary behavior: children, refs,
+ * accessibility, events, ids, and the raw platform `style` escape hatch, all
+ * inherited from the shared non-style prop types. Tamagui inline style props
+ * (`padding`, `bg`, shorthands, state/media clauses, theme style props) are
+ * deliberately absent — that authoring syntax belongs to `@tamagui/core`.
+ */
+export type TailwindStyleProps = {
+  className?: string
+}
+
+/** `true`/`false` matchers become a boolean prop; every other matcher is its own literal. */
+type VariantAcceptedValue<Key> = Key extends 'true' | 'false' ? boolean : Key
+
+/**
+ * Finite variant inference: one optional prop per variant, accepting exactly the
+ * matchers that variant declares. It never reaches core's style prop graph.
+ */
+export type TailwindVariantProps<Variants> = Variants extends object
+  ? {
+      [Key in keyof Variants]?: VariantAcceptedValue<keyof Variants[Key]>
+    }
+  : {}
+
+/** Variant values are class strings — the same authoring syntax as `className`. */
+export type TailwindVariantDefinitions = {
+  [variantName: string]: { [matcher: string]: string }
+}
+
+export type TailwindCompoundVariant<Variants> = TailwindVariantProps<Variants> & {
+  style: string
+}
+
+export type TailwindStyledOptions<Variants extends TailwindVariantDefinitions> = {
+  displayName?: string
+  variants?: Variants
+  defaultVariants?: TailwindVariantProps<Variants>
+  compoundVariants?: readonly TailwindCompoundVariant<Variants>[]
+}
+
+export interface TailwindComponent<
+  Ref = any,
+  NonStyleProps = {},
+  VariantProps = {},
+> extends FunctionComponent<
+  NonStyleProps & TailwindStyleProps & VariantProps & { ref?: ReactRef<Ref> }
+> {
+  staticConfig: FrontendStaticConfig
+  /** phantom carrier so `styled()` can recover the parts of a parent component */
+  __tailwind?: { ref: Ref; props: NonStyleProps; variants: VariantProps }
+}
+
+export type GetTailwindRef<Component> =
+  Component extends TailwindComponent<infer Ref, any, any> ? Ref : any
+
+export type GetTailwindNonStyleProps<Component> =
+  Component extends TailwindComponent<any, infer Props, any> ? Props : {}
+
+export type GetTailwindVariantProps<Component> =
+  Component extends TailwindComponent<any, any, infer Variants> ? Variants : {}
+
+export type TailwindView = TailwindComponent<
+  TailwindViewElement,
+  TailwindViewNonStyleProps
+>
+export type TailwindText = TailwindComponent<
+  TailwindTextElement,
+  TailwindTextNonStyleProps
+>
+
+export type TailwindViewProps = TailwindViewNonStyleProps & TailwindStyleProps
+export type TailwindTextProps = TailwindTextNonStyleProps & TailwindStyleProps

package/src/vite/state.ts

@@ -0,0 +1,274 @@
+import { compile } from '@tailwindcss/node'
+import { Scanner } from '@tailwindcss/oxide'
+import {
+  classifyCandidate,
+  createGrammarConfigView,
+  type GrammarSourceConfig,
+} from '@tamagui/style-grammar/runtime'
+import { readFile, realpath } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+
+export const TAILWIND_VERSION = '4.3.0'
+export const TAILWIND_VIRTUAL_ID = 'virtual:tamagui-tailwind.css'
+export const TAILWIND_RESOLVED_ID = `\0${TAILWIND_VIRTUAL_ID}`
+
+export function wrapWithTamaguiLayer(css: string): string {
+  return `@layer tamagui {\n${css}\n}`
+}
+
+export function isTamaguiCoreResetCSS(id: string): boolean {
+  const normalizedId = id.split('?', 1)[0].replace(/\\/g, '/')
+  return (
+    normalizedId.endsWith('/@tamagui/core/reset.css') ||
+    normalizedId.endsWith('/code/core/core/reset.css')
+  )
+}
+
+const TAILWIND_INPUT = `@layer tamagui, theme, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);`
+
+type TailwindCompiler = Awaited<ReturnType<typeof compile>>
+
+export type TailwindScannerState = ReturnType<typeof createTailwindScannerState>
+
+export type TailwindWatchEvent = 'create' | 'update' | 'delete'
+
+function extensionForFile(id: string): string {
+  return path.extname(id.split('?', 1)[0]).slice(1) || 'html'
+}
+
+async function assertHostTailwind(root: string): Promise<void> {
+  const requireFromRoot = createRequire(path.join(root, 'package.json'))
+  let packagePath: string
+  try {
+    packagePath = requireFromRoot.resolve('tailwindcss/package.json')
+  } catch {
+    throw new Error(
+      `[tamagui] @tamagui/tailwind/vite requires tailwindcss@${TAILWIND_VERSION} in the app. Install it with \`bun add -D tailwindcss@${TAILWIND_VERSION}\` (resolved from ${root}).`
+    )
+  }
+
+  const packageJSON = JSON.parse(await readFile(packagePath, 'utf8')) as {
+    version?: string
+  }
+  if (packageJSON.version !== TAILWIND_VERSION) {
+    throw new Error(
+      `[tamagui] @tamagui/tailwind/vite requires tailwindcss@${TAILWIND_VERSION}, but ${packageJSON.version || 'an unknown version'} was resolved from ${packagePath}. Align the app dependency before starting Vite.`
+    )
+  }
+}
+
+/**
+ * The official Tailwind scanner and compiler, owned by `@tamagui/tailwind/vite`.
+ *
+ * It compiles only the candidates Tamagui's own grammar does not claim: claimed
+ * candidates already became Tamagui atoms through the shared renderer, so emitting
+ * them again would duplicate the rules and hand the cascade to whichever landed
+ * last. There is no style-mode gate here — the state exists because the app
+ * imported the Tailwind plugin.
+ */
+export function createTailwindScannerState() {
+  let root = ''
+  let generation = -1
+  let enabled = false
+  let scanner: Scanner | null = null
+  let compiler: TailwindCompiler | null = null
+  let grammarConfig = createGrammarConfigView({})
+  let candidatesByFile = new Map<string, Set<string>>()
+  let compiledCandidates = new Set<string>()
+  let addDependency: (file: string) => void = () => {}
+  let css = ''
+
+  function clear() {
+    root = ''
+    generation = -1
+    enabled = false
+    scanner = null
+    compiler = null
+    grammarConfig = createGrammarConfigView({})
+    candidatesByFile = new Map()
+    compiledCandidates = new Set()
+    addDependency = () => {}
+    css = ''
+  }
+
+  async function configure(
+    nextRoot: string,
+    nextGeneration: number,
+    config: GrammarSourceConfig | null | undefined,
+    onDependency: (file: string) => void,
+    onSourceGlob: (glob: string) => void = () => {}
+  ): Promise<boolean> {
+    // a null config means Tamagui itself is disabled for this build, and without a
+    // config there is no grammar view to decide which candidates Tamagui owns
+    if (!config) {
+      clear()
+      generation = nextGeneration
+      return false
+    }
+    if (
+      compiler &&
+      scanner &&
+      enabled &&
+      generation === nextGeneration &&
+      root === nextRoot
+    ) {
+      return true
+    }
+
+    await assertHostTailwind(nextRoot)
+    root = nextRoot
+    generation = nextGeneration
+    enabled = true
+    grammarConfig = createGrammarConfigView(config)
+    addDependency = onDependency
+    scanner = new Scanner({
+      sources: [
+        { base: root, pattern: '**/*', negated: false },
+        { base: root, pattern: 'node_modules/**', negated: true },
+        { base: root, pattern: '.git/**', negated: true },
+        { base: root, pattern: '.vite/**', negated: true },
+        { base: root, pattern: 'dist/**', negated: true },
+        { base: root, pattern: 'build/**', negated: true },
+        { base: root, pattern: 'coverage/**', negated: true },
+      ],
+    })
+    compiler = await createCompiler()
+    scanner.scan()
+    registerScannerSources(scanner, onDependency, onSourceGlob)
+    candidatesByFile = new Map()
+    await Promise.all(
+      scanner.files.map(async (file) => {
+        try {
+          const source = await readFile(file, 'utf8')
+          candidatesByFile.set(
+            await normalizeSourcePath(file),
+            candidatesForSource(scanner!, file, source)
+          )
+        } catch {
+          // A source may disappear between oxide's inventory and this read.
+        }
+      })
+    )
+    await rebuild()
+    return true
+  }
+
+  async function createCompiler() {
+    return compile(TAILWIND_INPUT, {
+      base: root,
+      onDependency: addDependency,
+    })
+  }
+
+  async function rebuild(): Promise<boolean> {
+    if (!compiler) return false
+    const allCandidates = new Set<string>()
+    for (const candidates of candidatesByFile.values()) {
+      for (const candidate of candidates) allCandidates.add(candidate)
+    }
+    const passthrough = [...allCandidates]
+      .filter(
+        (candidate) => classifyCandidate(candidate, grammarConfig).kind === 'passthrough'
+      )
+      .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+    const nextCandidates = new Set(passthrough)
+    const removedCandidate = [...compiledCandidates].some(
+      (candidate) => !nextCandidates.has(candidate)
+    )
+    if (removedCandidate) {
+      compiler = await createCompiler()
+    }
+    const nextCSS = compiler.build(passthrough)
+    compiledCandidates = nextCandidates
+    if (nextCSS === css) return false
+    css = nextCSS
+    return true
+  }
+
+  async function scanSource(id: string, source: string): Promise<boolean> {
+    if (!enabled || !scanner) return false
+    candidatesByFile.set(
+      await normalizeSourcePath(id),
+      candidatesForSource(scanner, id, source)
+    )
+    return rebuild()
+  }
+
+  async function removeSource(id: string): Promise<boolean> {
+    if (!candidatesByFile.delete(await normalizeSourcePath(id))) return false
+    return rebuild()
+  }
+
+  return {
+    clear,
+    configure,
+    removeSource,
+    scanSource,
+    get enabled() {
+      return enabled
+    },
+    get css() {
+      return css
+    },
+    get candidateCount() {
+      return compiledCandidates.size
+    },
+  }
+}
+
+export async function updateTailwindForWatchChange(
+  state: TailwindScannerState,
+  id: string,
+  event: TailwindWatchEvent,
+  configure: () => Promise<boolean>
+): Promise<boolean> {
+  if (!(await configure())) return false
+  if (event === 'delete') {
+    return state.removeSource(id)
+  }
+  try {
+    return state.scanSource(id, await readFile(id, 'utf8'))
+  } catch {
+    return state.removeSource(id)
+  }
+}
+
+function registerScannerSources(
+  scanner: Scanner,
+  onDependency: (file: string) => void,
+  onSourceGlob: (glob: string) => void
+) {
+  for (const file of scanner.files) {
+    onDependency(file)
+  }
+  for (const { base, pattern } of scanner.globs) {
+    onSourceGlob(path.join(base, pattern))
+  }
+}
+
+async function normalizeSourcePath(id: string): Promise<string> {
+  const cleanId = path.resolve(id.split('?', 1)[0])
+  try {
+    return await realpath(cleanId)
+  } catch {
+    try {
+      return path.join(await realpath(path.dirname(cleanId)), path.basename(cleanId))
+    } catch {
+      return cleanId
+    }
+  }
+}
+
+function candidatesForSource(scanner: Scanner, id: string, source: string): Set<string> {
+  return new Set(
+    scanner
+      .getCandidatesWithPositions({
+        content: source,
+        extension: extensionForFile(id),
+      })
+      .map(({ candidate }) => candidate)
+  )
+}