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

package/src/programs.ts

@@ -0,0 +1,95 @@
+import { clauseConditionSetKey } from './clausePrecedence'
+import type { LonghandProgram, ParsedClause, ParsedValue } from './valueTypes'
+
+export const longhandExpansionTable: Readonly<Record<string, readonly string[]>> = {
+  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
+  paddingHorizontal: ['paddingLeft', 'paddingRight'],
+  paddingVertical: ['paddingTop', 'paddingBottom'],
+  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
+  marginHorizontal: ['marginLeft', 'marginRight'],
+  marginVertical: ['marginTop', 'marginBottom'],
+  inset: ['top', 'right', 'bottom', 'left'],
+  borderWidth: [
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+  ],
+  borderColor: [
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+  ],
+  borderStyle: [
+    'borderTopStyle',
+    'borderRightStyle',
+    'borderBottomStyle',
+    'borderLeftStyle',
+  ],
+  borderRadius: [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius',
+  ],
+  overflow: ['overflowX', 'overflowY'],
+  gap: ['rowGap', 'columnGap'],
+}
+
+export function expandToLonghands(
+  prop: string,
+  shorthands?: Record<string, string>
+): readonly string[] {
+  const resolvedProp = shorthands?.[prop] ?? prop
+  return longhandExpansionTable[resolvedProp] ?? [resolvedProp]
+}
+
+/**
+ * The merge unit is the clause, keyed by its exact condition set (decision
+ * 21): the later contribution replaces the base only when it restates one,
+ * replaces the clauses whose condition sets it restates, and its clauses
+ * append after the surviving earlier ones so last-match-wins holds. A styled
+ * `bg="gray hover:blue"` overridden by a call-site `bg="red"` keeps the
+ * hover clause, matching tailwind-merge's per-variant conflict groups.
+ */
+export function mergeProgramValues(
+  earlier: ParsedValue,
+  later: ParsedValue
+): ParsedValue {
+  const base = later.base ?? earlier.base
+  if (!earlier.clauses.length) {
+    return base === later.base ? later : { base, clauses: later.clauses }
+  }
+  if (!later.clauses.length) {
+    return base === earlier.base ? earlier : { base, clauses: earlier.clauses }
+  }
+  const restated = new Set<string>()
+  for (const clause of later.clauses) {
+    restated.add(clauseConditionSetKey(clause.modifiers))
+  }
+  const clauses: ParsedClause[] = []
+  for (const clause of earlier.clauses) {
+    if (!restated.has(clauseConditionSetKey(clause.modifiers))) clauses.push(clause)
+  }
+  for (const clause of later.clauses) clauses.push(clause)
+  return { base, clauses }
+}
+
+export function mergePrograms(
+  entries: ReadonlyArray<{ prop: string; value: ParsedValue }>,
+  shorthands?: Record<string, string>
+): Map<string, LonghandProgram> {
+  const programs = new Map<string, LonghandProgram>()
+
+  for (const { prop, value } of entries) {
+    for (const property of expandToLonghands(prop, shorthands)) {
+      const existing = programs.get(property)
+      const merged = existing ? mergeProgramValues(existing.value, value) : value
+      programs.delete(property)
+      programs.set(property, { property, value: merged, sourceProp: prop })
+    }
+  }
+
+  return programs
+}

package/src/registry.ts

@@ -0,0 +1,367 @@
+import { modifierAliases } from './stateModifiers'
+
+export { modifierAliases }
+
+export type TokenCategory =
+  | 'space'
+  | 'size'
+  | 'radius'
+  | 'zIndex'
+  | 'color'
+  | 'fontFamily'
+  | 'fontSize'
+  | 'fontWeight'
+  | 'lineHeight'
+  | 'letterSpacing'
+
+export type Convenience =
+  | 'alignment-alias'
+  | 'bare-border'
+  | 'flex-bundle'
+  | 'font-generic'
+  | 'integer'
+  | 'percentage'
+  | 'sizing-keyword'
+
+export interface GrammarEntry {
+  prop: string
+  prefix: string
+  tokenCategory?: TokenCategory
+  conveniences?: readonly Convenience[]
+}
+
+export const grammarEntries: readonly GrammarEntry[] = [
+  { prop: 'backgroundColor', prefix: 'bg', tokenCategory: 'color' },
+  { prop: 'width', prefix: 'w', tokenCategory: 'size', conveniences: ['sizing-keyword'] },
+  {
+    prop: 'height',
+    prefix: 'h',
+    tokenCategory: 'size',
+    conveniences: ['sizing-keyword'],
+  },
+  {
+    prop: 'minWidth',
+    prefix: 'min-w',
+    tokenCategory: 'size',
+    conveniences: ['sizing-keyword'],
+  },
+  {
+    prop: 'maxWidth',
+    prefix: 'max-w',
+    tokenCategory: 'size',
+    conveniences: ['sizing-keyword'],
+  },
+  {
+    prop: 'minHeight',
+    prefix: 'min-h',
+    tokenCategory: 'size',
+    conveniences: ['sizing-keyword'],
+  },
+  {
+    prop: 'maxHeight',
+    prefix: 'max-h',
+    tokenCategory: 'size',
+    conveniences: ['sizing-keyword'],
+  },
+  { prop: 'padding', prefix: 'p', tokenCategory: 'space' },
+  { prop: 'paddingTop', prefix: 'pt', tokenCategory: 'space' },
+  { prop: 'paddingRight', prefix: 'pr', tokenCategory: 'space' },
+  { prop: 'paddingBottom', prefix: 'pb', tokenCategory: 'space' },
+  { prop: 'paddingLeft', prefix: 'pl', tokenCategory: 'space' },
+  { prop: 'paddingHorizontal', prefix: 'px', tokenCategory: 'space' },
+  { prop: 'paddingVertical', prefix: 'py', tokenCategory: 'space' },
+  { prop: 'margin', prefix: 'm', tokenCategory: 'space' },
+  { prop: 'marginTop', prefix: 'mt', tokenCategory: 'space' },
+  { prop: 'marginRight', prefix: 'mr', tokenCategory: 'space' },
+  { prop: 'marginBottom', prefix: 'mb', tokenCategory: 'space' },
+  { prop: 'marginLeft', prefix: 'ml', tokenCategory: 'space' },
+  { prop: 'marginHorizontal', prefix: 'mx', tokenCategory: 'space' },
+  { prop: 'marginVertical', prefix: 'my', tokenCategory: 'space' },
+  { prop: 'gap', prefix: 'gap', tokenCategory: 'space' },
+  { prop: 'borderWidth', prefix: 'border', tokenCategory: 'space' },
+  { prop: 'borderTopWidth', prefix: 'border-t', tokenCategory: 'space' },
+  { prop: 'borderRightWidth', prefix: 'border-r', tokenCategory: 'space' },
+  { prop: 'borderBottomWidth', prefix: 'border-b', tokenCategory: 'space' },
+  { prop: 'borderLeftWidth', prefix: 'border-l', tokenCategory: 'space' },
+  { prop: 'borderColor', prefix: 'border', tokenCategory: 'color' },
+  { prop: 'borderTopColor', prefix: 'border-t', tokenCategory: 'color' },
+  { prop: 'borderRightColor', prefix: 'border-r', tokenCategory: 'color' },
+  { prop: 'borderBottomColor', prefix: 'border-b', tokenCategory: 'color' },
+  { prop: 'borderLeftColor', prefix: 'border-l', tokenCategory: 'color' },
+  { prop: 'borderRadius', prefix: 'rounded', tokenCategory: 'radius' },
+  { prop: 'borderTopLeftRadius', prefix: 'rounded-tl', tokenCategory: 'radius' },
+  { prop: 'borderTopRightRadius', prefix: 'rounded-tr', tokenCategory: 'radius' },
+  { prop: 'borderBottomLeftRadius', prefix: 'rounded-bl', tokenCategory: 'radius' },
+  { prop: 'borderBottomRightRadius', prefix: 'rounded-br', tokenCategory: 'radius' },
+  { prop: 'borderStyle', prefix: 'border' },
+  { prop: 'color', prefix: 'color', tokenCategory: 'color' },
+  { prop: 'fontSize', prefix: 'text', tokenCategory: 'fontSize' },
+  // bound (2026-07-31 adjudication): the runtime resolves fontWeight through
+  // the active family's weight sub-map and the codemod already emits flat
+  // weight names, so an unbound registry row was an omission, not a decision
+  { prop: 'fontWeight', prefix: 'font', tokenCategory: 'fontWeight' },
+  {
+    prop: 'fontFamily',
+    prefix: 'font',
+    tokenCategory: 'fontFamily',
+    conveniences: ['font-generic'],
+  },
+  { prop: 'fontStyle', prefix: '' },
+  { prop: 'lineHeight', prefix: 'leading', tokenCategory: 'lineHeight' },
+  { prop: 'letterSpacing', prefix: 'tracking', tokenCategory: 'letterSpacing' },
+  { prop: 'textAlign', prefix: 'text' },
+  { prop: 'textTransform', prefix: '' },
+  { prop: 'textDecorationLine', prefix: '' },
+  { prop: 'display', prefix: '' },
+  { prop: 'position', prefix: '' },
+  { prop: 'top', prefix: 'top', tokenCategory: 'space' },
+  { prop: 'right', prefix: 'right', tokenCategory: 'space' },
+  { prop: 'bottom', prefix: 'bottom', tokenCategory: 'space' },
+  { prop: 'left', prefix: 'left', tokenCategory: 'space' },
+  { prop: 'inset', prefix: 'inset', tokenCategory: 'space' },
+  { prop: 'zIndex', prefix: 'z', tokenCategory: 'zIndex', conveniences: ['integer'] },
+  { prop: 'overflow', prefix: '' },
+  { prop: 'flex', prefix: 'flex', conveniences: ['flex-bundle'] },
+  { prop: 'flexDirection', prefix: 'flex' },
+  { prop: 'flexWrap', prefix: 'flex' },
+  { prop: 'flexGrow', prefix: 'grow' },
+  { prop: 'flexShrink', prefix: 'shrink' },
+  { prop: 'alignItems', prefix: 'items', conveniences: ['alignment-alias'] },
+  { prop: 'alignContent', prefix: 'content', conveniences: ['alignment-alias'] },
+  { prop: 'alignSelf', prefix: 'self', conveniences: ['alignment-alias'] },
+  { prop: 'justifyContent', prefix: 'justify', conveniences: ['alignment-alias'] },
+  { prop: 'opacity', prefix: 'opacity', conveniences: ['percentage'] },
+  { prop: 'boxShadow', prefix: 'shadow' },
+  { prop: 'pointerEvents', prefix: 'pointer-events' },
+  { prop: 'rotate', prefix: 'rotate' },
+  { prop: 'scale', prefix: 'scale', conveniences: ['percentage'] },
+  { prop: 'x', prefix: 'translate-x', tokenCategory: 'space' },
+  { prop: 'y', prefix: 'translate-y', tokenCategory: 'space' },
+  { prop: 'aspectRatio', prefix: 'aspect' },
+  { prop: 'objectFit', prefix: 'object' },
+] as const
+
+export const propToGrammarEntry: Readonly<Record<string, GrammarEntry>> = Object.freeze(
+  Object.fromEntries(grammarEntries.map((entry) => [entry.prop, entry]))
+)
+
+export function getTokenCategory(prop: string): TokenCategory | null {
+  return propToGrammarEntry[prop]?.tokenCategory || null
+}
+
+export const prefixToEntries: Readonly<Record<string, readonly GrammarEntry[]>> =
+  Object.freeze(
+    grammarEntries.reduce<Record<string, GrammarEntry[]>>((out, entry) => {
+      if (!entry.prefix) return out
+      ;(out[entry.prefix] ||= []).push(entry)
+      return out
+    }, {})
+  )
+
+export const standaloneValueProps: Readonly<
+  Record<string, Readonly<Record<string, string>>>
+> = Object.freeze({
+  display: {
+    flex: 'flex',
+    none: 'hidden',
+    block: 'block',
+    inline: 'inline',
+    grid: 'grid',
+    'inline-flex': 'inline-flex',
+  },
+  position: {
+    relative: 'relative',
+    absolute: 'absolute',
+    fixed: 'fixed',
+    sticky: 'sticky',
+    static: 'static',
+  },
+  flexDirection: {
+    row: 'flex-row',
+    column: 'flex-col',
+    'row-reverse': 'flex-row-reverse',
+    'column-reverse': 'flex-col-reverse',
+  },
+  flexWrap: {
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+  },
+  textTransform: {
+    uppercase: 'uppercase',
+    lowercase: 'lowercase',
+    capitalize: 'capitalize',
+    none: 'normal-case',
+  },
+  textDecorationLine: {
+    underline: 'underline',
+    'line-through': 'line-through',
+    none: 'no-underline',
+  },
+  fontStyle: {
+    italic: 'italic',
+    normal: 'not-italic',
+  },
+  borderStyle: {
+    solid: 'border-solid',
+    dashed: 'border-dashed',
+    dotted: 'border-dotted',
+    none: 'border-none',
+  },
+  alignItems: {
+    center: 'items-center',
+    'flex-start': 'items-start',
+    'flex-end': 'items-end',
+    baseline: 'items-baseline',
+    stretch: 'items-stretch',
+  },
+  alignContent: {
+    center: 'content-center',
+    'flex-start': 'content-start',
+    'flex-end': 'content-end',
+    'space-between': 'content-between',
+    'space-around': 'content-around',
+    stretch: 'content-stretch',
+  },
+  alignSelf: {
+    auto: 'self-auto',
+    center: 'self-center',
+    'flex-start': 'self-start',
+    'flex-end': 'self-end',
+    stretch: 'self-stretch',
+  },
+  justifyContent: {
+    center: 'justify-center',
+    'flex-start': 'justify-start',
+    'flex-end': 'justify-end',
+    'space-between': 'justify-between',
+    'space-around': 'justify-around',
+    'space-evenly': 'justify-evenly',
+  },
+  overflow: {
+    hidden: 'overflow-hidden',
+    scroll: 'overflow-scroll',
+    auto: 'overflow-auto',
+    visible: 'overflow-visible',
+  },
+  pointerEvents: {
+    none: 'pointer-events-none',
+    auto: 'pointer-events-auto',
+    'box-none': 'pointer-events-box-none',
+    'box-only': 'pointer-events-box-only',
+  },
+  textAlign: {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+    justify: 'text-justify',
+    start: 'text-start',
+    end: 'text-end',
+  },
+  objectFit: {
+    contain: 'object-contain',
+    cover: 'object-cover',
+    fill: 'object-fill',
+    none: 'object-none',
+    'scale-down': 'object-scale-down',
+  },
+})
+
+export const fontWeightNames: Readonly<Record<string, string>> = Object.freeze({
+  '100': 'thin',
+  '200': 'extralight',
+  '300': 'light',
+  '400': 'normal',
+  '500': 'medium',
+  '600': 'semibold',
+  '700': 'bold',
+  '800': 'extrabold',
+  '900': 'black',
+  normal: 'normal',
+  bold: 'bold',
+})
+
+const generatedWholeUtilities: Record<string, Record<string, string | number>> = {}
+for (const prop in standaloneValueProps) {
+  for (const value in standaloneValueProps[prop]) {
+    generatedWholeUtilities[standaloneValueProps[prop][value]] = { [prop]: value }
+  }
+}
+for (const value in fontWeightNames) {
+  generatedWholeUtilities[`font-${fontWeightNames[value]}`] = {
+    fontWeight: /^\d+$/.test(value) ? value : value === 'bold' ? '700' : '400',
+  }
+}
+
+export const wholeClassUtilities: Readonly<
+  Record<string, Readonly<Record<string, string | number>>>
+> = Object.freeze({
+  ...generatedWholeUtilities,
+  'flex-1': { flex: 1 },
+  'flex-auto': { flexGrow: 1, flexShrink: 1, flexBasis: 'auto' },
+  'flex-initial': { flexGrow: 0, flexShrink: 1, flexBasis: 'auto' },
+  'flex-none': { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' },
+  contents: { display: 'contents' },
+  border: { borderWidth: 1 },
+  'border-t': { borderTopWidth: 1 },
+  'border-r': { borderRightWidth: 1 },
+  'border-b': { borderBottomWidth: 1 },
+  'border-l': { borderLeftWidth: 1 },
+  'border-x': { borderLeftWidth: 1, borderRightWidth: 1 },
+  'border-y': { borderTopWidth: 1, borderBottomWidth: 1 },
+  'inset-0': { top: 0, right: 0, bottom: 0, left: 0 },
+})
+
+export const wholeClassConveniences: Readonly<Record<string, Convenience>> =
+  Object.freeze({
+    'flex-1': 'flex-bundle',
+    'flex-auto': 'flex-bundle',
+    'flex-initial': 'flex-bundle',
+    'flex-none': 'flex-bundle',
+    border: 'bare-border',
+    'border-t': 'bare-border',
+    'border-r': 'bare-border',
+    'border-b': 'bare-border',
+    'border-l': 'bare-border',
+    'border-x': 'bare-border',
+    'border-y': 'bare-border',
+    'inset-0': 'sizing-keyword',
+  })
+
+export const borderSideSuffix: Readonly<Record<string, readonly string[]>> =
+  Object.freeze({
+    t: ['Top'],
+    r: ['Right'],
+    b: ['Bottom'],
+    l: ['Left'],
+    x: ['Left', 'Right'],
+    y: ['Top', 'Bottom'],
+  })
+
+export const radiusCornerProps: Readonly<Record<string, readonly string[]>> =
+  Object.freeze({
+    tl: ['borderTopLeftRadius'],
+    tr: ['borderTopRightRadius'],
+    bl: ['borderBottomLeftRadius'],
+    br: ['borderBottomRightRadius'],
+    t: ['borderTopLeftRadius', 'borderTopRightRadius'],
+    b: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+    l: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
+    r: ['borderTopRightRadius', 'borderBottomRightRadius'],
+  })
+
+export const textAlignKeywords: ReadonlySet<string> = new Set([
+  'left',
+  'center',
+  'right',
+  'justify',
+  'start',
+  'end',
+])
+
+export const percentUtilityProps: ReadonlySet<string> = new Set([
+  'opacity',
+  'scale',
+  'scaleX',
+  'scaleY',
+])