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

package/src/table.ts

@@ -0,0 +1,47 @@
+import { grammarEntries, wholeClassConveniences, wholeClassUtilities } from './registry'
+import { grammarDecisions } from './toolingRegistry'
+
+export function generateGrammarTable(): string {
+  const rows = [
+    '| Candidate | Props | Token category | Convenience |',
+    '| --- | --- | --- | --- |',
+  ]
+  const byPrefix = new Map<string, (typeof grammarEntries)[number][]>()
+  for (const entry of grammarEntries) {
+    if (!entry.prefix) continue
+    const entries = byPrefix.get(entry.prefix) || []
+    entries.push(entry)
+    byPrefix.set(entry.prefix, entries)
+  }
+  for (const [prefix, entries] of [...byPrefix].sort(([a], [b]) => a.localeCompare(b))) {
+    rows.push(
+      `| \`${prefix}-<value>\` | ${entries.map((entry) => `\`${entry.prop}\``).join(', ')} | ${
+        [...new Set(entries.map((entry) => entry.tokenCategory).filter(Boolean))].join(
+          ', '
+        ) || 'raw/enum'
+      } | ${
+        [...new Set(entries.flatMap((entry) => entry.conveniences || []))].join(', ') ||
+        'none'
+      } |`
+    )
+  }
+  rows.push(
+    '| arbitrary values | `<prefix>-[<value>]` | none | canonical raw-value form |'
+  )
+  rows.push('', '| Whole-class utility | Props | Kind |', '| --- | --- | --- |')
+  for (const candidate of Object.keys(wholeClassUtilities).sort()) {
+    const properties = Object.keys(wholeClassUtilities[candidate])
+      .map((prop) => `\`${prop}\``)
+      .join(', ')
+    rows.push(
+      `| \`${candidate}\` | ${properties} | ${wholeClassConveniences[candidate] || 'enum'} |`
+    )
+  }
+  rows.push('', '| Convenience syntax | Decision | Reason |', '| --- | --- | --- |')
+  for (const decision of grammarDecisions) {
+    rows.push(`| \`${decision.syntax}\` | ${decision.decision} | ${decision.reason} |`)
+  }
+  return rows.join('\n')
+}
+
+export const grammarTable: string = generateGrammarTable()

package/src/textDecorationFamily.ts

@@ -0,0 +1,119 @@
+// The text-decoration family: value-dependent splitting of the resetting CSS
+// `text-decoration` shorthand into per-longhand programs, the border family's
+// model applied to line/style/color. `text-decoration-line` is the one CSS
+// longhand here whose value is itself a keyword LIST (`underline overline`),
+// so multiple line keywords accumulate into one payload instead of erroring
+// as duplicates.
+
+import { classifyComponent, splitTopLevelComponents } from './backgroundFamily'
+import type { ParsedClause, ParsedValue } from './valueTypes'
+
+interface TextDecorationFamilyTargets {
+  line: readonly string[]
+  style: readonly string[]
+  color: readonly string[]
+}
+
+/** authored prop -> the true longhands each component kind lands on */
+export const textDecorationFamilyTargets: Readonly<
+  Record<string, TextDecorationFamilyTargets>
+> = {
+  textDecoration: {
+    line: ['textDecorationLine'],
+    style: ['textDecorationStyle'],
+    color: ['textDecorationColor'],
+  },
+}
+
+const lineKeywords = new Set(['none', 'underline', 'overline', 'line-through'])
+
+const styleKeywords = new Set(['solid', 'double', 'dotted', 'dashed', 'wavy'])
+
+export interface TextDecorationFamilyError {
+  code: 'unsupported-text-decoration-component'
+  component: string
+  where: 'base' | number
+}
+
+interface MutableProgram {
+  base: string | null
+  clauses: ParsedClause[]
+  present: boolean
+}
+
+export function splitTextDecorationValue(
+  value: ParsedValue,
+  colorTokens: ReadonlySet<string>
+): {
+  entries: Array<{ property: string; value: ParsedValue }>
+  errors: TextDecorationFamilyError[]
+} {
+  const targets = textDecorationFamilyTargets.textDecoration
+  const errors: TextDecorationFamilyError[] = []
+  const kinds = ['line', 'style', 'color'] as const
+  const programs: Record<(typeof kinds)[number], MutableProgram> = {
+    line: { base: null, clauses: [], present: false },
+    style: { base: null, clauses: [], present: false },
+    color: { base: null, clauses: [], present: false },
+  }
+
+  for (let clauseIndex = -1; clauseIndex < value.clauses.length; clauseIndex++) {
+    const isBase = clauseIndex === -1
+    const payload = isBase ? value.base : value.clauses[clauseIndex].payload
+    if (payload === null) continue
+    const where = isBase ? ('base' as const) : clauseIndex
+
+    const found: Partial<Record<(typeof kinds)[number], string>> = {}
+    for (const component of splitTopLevelComponents(payload)) {
+      const lower = component.toLowerCase()
+      if (lineKeywords.has(lower)) {
+        // the line longhand's value is a keyword list, so repeats accumulate
+        found.line = found.line === undefined ? component : `${found.line} ${component}`
+        continue
+      }
+      const kind = styleKeywords.has(lower)
+        ? ('style' as const)
+        : classifyComponent(component, colorTokens) === 'color'
+          ? ('color' as const)
+          : null
+      if (kind === null || found[kind] !== undefined) {
+        // thickness (a length) has no cross-platform longhand, so it errors
+        // like any unknown component and the whole value stays legacy
+        errors.push({
+          code: 'unsupported-text-decoration-component',
+          component,
+          where,
+        })
+        continue
+      }
+      found[kind] = component
+    }
+
+    for (const kind of kinds) {
+      const component = found[kind]
+      if (component === undefined) continue
+      const program = programs[kind]
+      program.present = true
+      if (isBase) {
+        program.base = component
+      } else {
+        program.clauses.push({
+          modifiers: value.clauses[clauseIndex].modifiers,
+          payload: component,
+        })
+      }
+    }
+  }
+
+  const entries: Array<{ property: string; value: ParsedValue }> = []
+  for (const kind of kinds) {
+    const program = programs[kind]
+    if (!program.present) continue
+    const shared: ParsedValue = { base: program.base, clauses: program.clauses }
+    for (const longhand of targets[kind]) {
+      entries.push({ property: longhand, value: shared })
+    }
+  }
+
+  return { entries, errors }
+}

package/src/tooling.ts

@@ -0,0 +1,8 @@
+export * from './runtime'
+export * from './clauseCapability'
+export * from './table'
+export * from './toolingAnnotations'
+export * from './toolingDiagnostics'
+export * from './toolingRegistry'
+export * from './transitionLegacy'
+export * from './v6ThemeNames'

package/src/toolingAnnotations.ts

@@ -0,0 +1,151 @@
+// Classified source spans for one authored flat value.
+//
+// This is the read side of the tooling pipeline: where diagnostics say what is
+// wrong, annotations say what everything IS — which spans are modifiers, which
+// resolve to configured tokens (and through which category), which are style
+// keywords, and which stay literal CSS. Hover, inline color swatches, and
+// semantic highlighting all consume this one projection so no host re-derives
+// candidate resolution on its own.
+
+import { resolveCandidateTarget } from './candidateTarget'
+import { resolvePayload } from './resolvePayload'
+import {
+  fontWeightNames,
+  grammarEntries,
+  standaloneValueProps,
+  type TokenCategory,
+} from './registry'
+import {
+  createCandidatePropertyVocabulary,
+  modifierChainBefore,
+  referenceKindFor,
+  type DiagnoseStyleValueOptions,
+} from './toolingDiagnostics'
+import { parseValueWithSourceSpans } from './valueParser'
+import { reservedCssIdents, type ModifierKind } from './valueTypes'
+
+export type StyleValueAnnotationKind =
+  /** a registered clause modifier (`hover`, `sm`, `dark`, `@md`) */
+  | 'modifier'
+  /** a candidate that resolves to a configured token or theme value */
+  | 'token'
+  /** a style keyword the grammar accepts for the target property, or a CSS-wide keyword */
+  | 'keyword'
+  /** an ident or hex color the config does not resolve; passes through as CSS */
+  | 'identifier'
+
+export interface StyleValueAnnotation {
+  kind: StyleValueAnnotationKind
+  /** character span within the authored value */
+  start: number
+  end: number
+  text: string
+  /** the clause modifier chain owning this slot; empty for the base value */
+  modifiers?: readonly string[]
+  /** for kind `modifier` */
+  modifierKind?: ModifierKind
+  /** for kind `token`: the category binding it to the target property */
+  tokenCategory?: TokenCategory
+  /** the resolved target property, when the candidate or keyword targets it */
+  property?: string
+  /** authored color opacity suffix percentage */
+  opacity?: number
+}
+
+const grammarEntryByProp = new Map(grammarEntries.map((entry) => [entry.prop, entry]))
+
+// the categories whose bare numbers resolve as tokens, per the resolver contract
+const numericCategories: ReadonlySet<TokenCategory> = new Set([
+  'space',
+  'size',
+  'radius',
+  'zIndex',
+])
+
+const reservedFolded: ReadonlySet<string> = new Set(
+  Array.from(reservedCssIdents, (ident) => ident.toLowerCase())
+)
+
+/**
+ * Classifies every meaningful span in one authored value. Works on partially
+ * invalid values too: whatever the parser could segment gets annotated, so
+ * hover and colors keep working while the author types.
+ */
+export function annotateStyleValue(
+  property: string,
+  input: string,
+  options: DiagnoseStyleValueOptions
+): readonly StyleValueAnnotation[] {
+  const targetProperty = options.config.shorthands?.[property] || property
+  const entry = grammarEntryByProp.get(targetProperty)
+  const candidates =
+    options.candidates || createCandidatePropertyVocabulary(options.config)
+  const { spans } = parseValueWithSourceSpans(input, options.registry)
+  const annotations: StyleValueAnnotation[] = []
+
+  for (const span of spans) {
+    if (span.kind === 'modifier') {
+      const name = input.slice(span.start, span.end)
+      const modifierKind = options.registry.get(name)
+      if (modifierKind) {
+        annotations.push({
+          kind: 'modifier',
+          start: span.start,
+          end: span.end,
+          text: name,
+          modifierKind,
+        })
+      }
+      continue
+    }
+    if (span.kind !== 'base' && span.kind !== 'payload') continue
+    if (span.start >= span.end) continue
+
+    const modifiers =
+      span.kind === 'payload' ? modifierChainBefore(input, spans, span.start) : []
+    const payload = input.slice(span.start, span.end)
+
+    resolvePayload(payload, {
+      resolveNumbers:
+        entry?.tokenCategory !== undefined && numericCategories.has(entry.tokenCategory),
+      lookup(name) {
+        const contributions = candidates.get(name)
+        if (!contributions) return undefined
+        return { name, kind: referenceKindFor(contributions, targetProperty) }
+      },
+      onCandidate(start, end, name, reference) {
+        const at = {
+          start: span.start + start,
+          end: span.start + end,
+          text: payload.slice(start, end),
+          modifiers,
+        }
+        const contributions = reference && candidates.get(name)
+        if (reference && contributions) {
+          const target = resolveCandidateTarget(targetProperty, name, contributions)
+          const contribution = target.ok ? target.contribution : contributions[0]
+          annotations.push({
+            kind: target.ok ? 'token' : 'identifier',
+            ...at,
+            tokenCategory: contribution.tokenCategory,
+            ...(target.ok && { property: targetProperty }),
+            ...(reference.opacity !== undefined && { opacity: reference.opacity }),
+          })
+          return
+        }
+        const keyword =
+          standaloneValueProps[targetProperty]?.[name] !== undefined ||
+          (targetProperty === 'fontWeight' && fontWeightNames[name] !== undefined) ||
+          reservedFolded.has(name.toLowerCase())
+        annotations.push({
+          kind: keyword ? 'keyword' : 'identifier',
+          ...at,
+          ...(keyword && { property: targetProperty }),
+        })
+      },
+    })
+  }
+
+  annotations.sort((a, b) => a.start - b.start)
+  return annotations
+}