@remix-run/ui 0.0.0 → 0.1.1

package/src/style/css-mixin.ts

@@ -0,0 +1,82 @@
+import { createMixin, renderMixinElement } from '../runtime/mixins/mixin.ts'
+import type { MixinDescriptor } from '../runtime/mixins/mixin.ts'
+import type { ElementProps } from '../runtime/jsx.ts'
+import { invariant } from '../runtime/invariant.ts'
+import { processStyleClass } from '../style/index.ts'
+import type { CSSProps } from '../style/style.ts'
+
+type StyleEntry = { selector: string; css: string }
+type StyleCache = Map<string, StyleEntry>
+type StyleManagerLike = {
+  insert(className: string, rule: string): void
+  remove(className: string): void
+  getGeneration?(): number
+}
+
+export type CSSMixinDescriptor = MixinDescriptor<Element, [styles: CSSProps], ElementProps>
+
+const clientStyleCache: StyleCache = new Map()
+
+/**
+ * Applies generated class names for CSS object styles.
+ */
+export const css = createMixin<Element, [styles: CSSProps], ElementProps>((handle) => {
+  let activeSelector = ''
+  let activeGeneration = -1
+  let currentStyles: CSSProps = {}
+
+  handle.addEventListener('remove', () => {
+    if (!activeSelector) return
+    let runtime = handle.frame.$runtime as {
+      styleCache?: StyleCache
+      styleManager?: StyleManagerLike
+    }
+    invariant(runtime, 'css mixin requires frame runtime')
+    let styleTarget = resolveStyleTarget(runtime)
+    styleTarget.styleManager?.remove(activeSelector)
+    activeSelector = ''
+    activeGeneration = -1
+  })
+
+  return (styles, props) => {
+    currentStyles = styles
+    let runtime = handle.frame.$runtime as {
+      styleCache?: StyleCache
+      styleManager?: StyleManagerLike
+    }
+    invariant(runtime, 'css mixin requires frame runtime')
+    let styleTarget = resolveStyleTarget(runtime)
+    let { selector, css: cssText } = processStyleClass(currentStyles, styleTarget.styleCache)
+    let styleGeneration = styleTarget.styleManager?.getGeneration?.() ?? 0
+
+    if (styleTarget.styleManager) {
+      if (activeSelector && activeSelector !== selector) {
+        styleTarget.styleManager.remove(activeSelector)
+      }
+      if (selector && (activeSelector !== selector || activeGeneration !== styleGeneration)) {
+        styleTarget.styleManager.insert(selector, cssText)
+      }
+      activeSelector = selector
+      activeGeneration = selector ? styleGeneration : -1
+    }
+
+    if (!selector) {
+      return handle.element
+    }
+
+    return renderMixinElement(handle.element, {
+      ...(props ?? {}),
+      className: props?.className ? `${props.className} ${selector}` : selector,
+    })
+  }
+})
+
+function resolveStyleTarget(runtime: {
+  styleCache?: StyleCache
+  styleManager?: StyleManagerLike
+}): { styleCache: StyleCache; styleManager?: StyleManagerLike } {
+  return {
+    styleCache: runtime.styleCache ?? clientStyleCache,
+    styleManager: runtime.styleManager,
+  }
+}

package/src/style/index.ts

@@ -0,0 +1,10 @@
+import { createStyleManager } from './stylesheet.ts'
+
+export type {
+  CSSProps as EnhancedStyleProperties,
+  DOMStyleProperties as StyleProperties,
+} from './style.ts'
+export { processStyleClass, normalizeCssValue } from './style.ts'
+export { createStyleManager }
+
+export type StyleManager = ReturnType<typeof createStyleManager>

package/src/style/style.ts

@@ -0,0 +1,312 @@
+export type DOMStyleProperties = {
+  [key in keyof Omit<
+    CSSStyleDeclaration,
+    'item' | 'setProperty' | 'removeProperty' | 'getPropertyValue' | 'getPropertyPriority'
+  >]?: string | number | null | undefined
+}
+export type AllStyleProperties = {
+  [key: string]: string | number | null | undefined
+}
+export interface StyleProps extends AllStyleProperties, DOMStyleProperties {
+  cssText?: string | null
+}
+
+// allow nesting
+export interface CSSProps extends DOMStyleProperties {
+  [key: string]: CSSProps | string | number | null | undefined
+}
+
+type StyleObject = Record<string, unknown>
+
+// Convert camelCase CSS properties to kebab-case
+function camelToKebab(str: string): string {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+}
+
+// Properties that should remain unitless (numeric values without px)
+const NUMERIC_CSS_PROPS = new Set([
+  'aspect-ratio',
+  'z-index',
+  'opacity',
+  'flex-grow',
+  'flex-shrink',
+  'flex-order',
+  'grid-area',
+  'grid-row',
+  'grid-column',
+  'font-weight',
+  'line-height',
+  'order',
+  'orphans',
+  'widows',
+  'zoom',
+  'columns',
+  'column-count',
+])
+
+// Normalize numeric CSS values: append 'px' for properties that need units
+// In Standards Mode, browsers drop numeric values without units when multiple properties
+// are present in insertRule(). We must normalize them ourselves.
+export function normalizeCssValue(key: string, value: unknown): string {
+  if (value == null) return String(value)
+  if (typeof value === 'number' && value !== 0) {
+    let cssKey = camelToKebab(key)
+    if (!NUMERIC_CSS_PROPS.has(cssKey) && !cssKey.startsWith('--')) {
+      return `${value}px`
+    }
+  }
+  return String(value)
+}
+
+// Check if a style property is a nested selector or media query
+function isComplexSelector(key: string): boolean {
+  return (
+    key.startsWith('&') ||
+    key.startsWith('@') ||
+    key.startsWith(':') ||
+    key.startsWith('[') ||
+    key.startsWith('.')
+  )
+}
+
+// Detect @keyframes (including vendor-prefixed variants)
+function isKeyframesAtRule(key: string): boolean {
+  if (!key.startsWith('@')) return false
+  let lower = key.toLowerCase()
+  return (
+    lower.startsWith('@keyframes') ||
+    lower.startsWith('@-webkit-keyframes') ||
+    lower.startsWith('@-moz-keyframes') ||
+    lower.startsWith('@-o-keyframes')
+  )
+}
+
+// Generate a hash for style objects to create unique class names
+function hashStyle(obj: any): string {
+  // Sort keys to ensure consistent hashing, but include values in the string
+  let sortedEntries = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b))
+  let str = JSON.stringify(sortedEntries)
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    let char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32-bit integer
+  }
+  return Math.abs(hash).toString(36)
+}
+
+// Convert style object to CSS text
+function styleToCss(styles: StyleObject, selector: string = ''): string {
+  let baseDeclarations: string[] = []
+  let nestedBlocks: string[] = []
+  let atRules: string[] = []
+  let preludeAtRules: string[] = []
+
+  for (let [key, value] of Object.entries(styles)) {
+    if (isComplexSelector(key)) {
+      if (key.startsWith('@')) {
+        // Allow at-rules to be conditionally disabled.
+        // e.g. { '@media (min-width: 600px)': condition ? undefined : { ... } }
+        let record = toRecord(value)
+        if (!record) continue
+
+        // Some at-rules (e.g., @media) scope declarations to the selector.
+        // Others (e.g., @function) must NOT include the selector in their body.
+        if (key.startsWith('@function')) {
+          let body = atRuleBodyToCss(record)
+          if (body.trim().length > 0) {
+            preludeAtRules.push(`${key} {\n${indent(body, 2)}\n}`)
+          } else {
+            preludeAtRules.push(`${key} {\n}`)
+          }
+        } else if (isKeyframesAtRule(key)) {
+          // Keyframes definitions must not be wrapped with the element selector.
+          // Emit them before the class rule so animations can be referenced.
+          let body = keyframesBodyToCss(record)
+          if (body.trim().length > 0) {
+            preludeAtRules.push(`${key} {\n${indent(body, 2)}\n}`)
+          } else {
+            preludeAtRules.push(`${key} {\n}`)
+          }
+        } else {
+          // Default: keep at-rules nested with the element selector
+          let inner = styleToCss(record, selector)
+          if (inner.trim().length > 0) {
+            atRules.push(`${key} {\n${indent(inner, 2)}\n}`)
+          } else {
+            // Empty at-rule body with selector block
+            atRules.push(`${key} {\n  ${selector} {\n  }\n}`)
+          }
+        }
+        continue
+      }
+
+      // For nested selectors, keep them wholesale inside the base block
+      // Allow nested selectors to be conditionally disabled.
+      // e.g. { '&:hover': condition ? undefined : { ... } }
+      let record = toRecord(value)
+      if (!record) continue
+
+      let nestedContent = ''
+      for (let [prop, propValue] of Object.entries(record)) {
+        if (propValue != null) {
+          let normalizedValue = normalizeCssValue(prop, propValue)
+          nestedContent += `    ${camelToKebab(prop)}: ${normalizedValue};\n`
+        }
+      }
+      if (nestedContent) {
+        // Preserve key verbatim (e.g., '&[aria-selected], &[rmx-focus]')
+        nestedBlocks.push(`  ${key} {\n${nestedContent}  }`)
+      }
+    } else {
+      // Base declaration
+      if (value != null) {
+        let normalizedValue = normalizeCssValue(key, value)
+        baseDeclarations.push(`  ${camelToKebab(key)}: ${normalizedValue};`)
+      }
+    }
+  }
+
+  let css = ''
+  if (preludeAtRules.length > 0) {
+    css += preludeAtRules.join('\n')
+  }
+  if (selector && (baseDeclarations.length > 0 || nestedBlocks.length > 0)) {
+    css += (css ? '\n' : '') + `${selector} {\n`
+    if (baseDeclarations.length > 0) {
+      css += baseDeclarations.join('\n') + '\n'
+    }
+    if (nestedBlocks.length > 0) {
+      css += nestedBlocks.join('\n') + '\n'
+    }
+    css += '}'
+  }
+
+  if (atRules.length > 0) {
+    css += (css ? '\n' : '') + atRules.join('\n')
+  }
+
+  return css
+}
+
+function indent(text: string, spaces: number): string {
+  let pad = ' '.repeat(spaces)
+  return text
+    .split('\n')
+    .map((line) => (line.length ? pad + line : line))
+    .join('\n')
+}
+
+// Narrow unknown values to plain record objects
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function toRecord(value: unknown): Record<string, unknown> | null {
+  return isRecord(value) ? value : null
+}
+
+// Build the body of a @keyframes rule (without wrapping selector)
+function keyframesBodyToCss(frames: StyleObject): string {
+  let blocks: string[] = []
+
+  for (let [frameSelector, frameValue] of Object.entries(frames)) {
+    if (!isRecord(frameValue)) {
+      // Skip non-object frame definitions
+      continue
+    }
+
+    let declarations: string[] = []
+    for (let [prop, propValue] of Object.entries(frameValue)) {
+      if (propValue == null) continue
+      // Ignore nested selectors/at-rules inside keyframe steps
+      if (isComplexSelector(prop)) continue
+      let normalizedValue = normalizeCssValue(prop, propValue)
+      declarations.push(`  ${camelToKebab(prop)}: ${normalizedValue};`)
+    }
+
+    if (declarations.length > 0) {
+      blocks.push(`${frameSelector} {\n${declarations.join('\n')}\n}`)
+    } else {
+      blocks.push(`${frameSelector} {\n}`)
+    }
+  }
+
+  return blocks.join('\n')
+}
+
+// Build the body for at-rules that should not include a selector wrapper (e.g., @function)
+function atRuleBodyToCss(styles: StyleObject): string {
+  let declarations: string[] = []
+  let nested: string[] = []
+
+  for (let [key, value] of Object.entries(styles)) {
+    if (isComplexSelector(key)) {
+      if (key.startsWith('@')) {
+        // Nested at-rules inside definition blocks; render their bodies recursively without selectors
+        let record = toRecord(value)
+        if (!record) continue
+        let inner = atRuleBodyToCss(record)
+        if (inner.trim().length > 0) {
+          nested.push(`${key} {\n${indent(inner, 2)}\n}`)
+        } else {
+          nested.push(`${key} {\n}`)
+        }
+      } else {
+        // Ignore nested selectors (&, :, ., [) inside definition-style at-rules
+        // They are not meaningful within e.g. @function bodies
+        continue
+      }
+    } else {
+      if (value != null) {
+        let normalizedValue = normalizeCssValue(key, value)
+        declarations.push(`  ${camelToKebab(key)}: ${normalizedValue};`)
+      }
+    }
+  }
+
+  let body = ''
+  if (declarations.length > 0) {
+    body += declarations.join('\n')
+  }
+  if (nested.length > 0) {
+    body += (body ? '\n' : '') + nested.join('\n')
+  }
+  return body
+}
+
+export function processStyleClass(
+  styleObj: CSSProps,
+  styleCache: Map<string, { selector: string; css: string }>,
+): {
+  selector: string
+  css: string
+} {
+  // Check if the object is empty
+  if (Object.keys(styleObj).length === 0) {
+    return { selector: '', css: '' }
+  }
+
+  // Generate a hash for the style object
+  let hash = hashStyle(styleObj)
+  let selector = `rmxc-${hash}`
+
+  // Check cache first
+  let cached = styleCache.get(hash)
+  if (cached) {
+    return cached
+  }
+
+  let css = styleToCss(styleObj, `.${selector}`)
+  let result = { selector, css }
+
+  // Store in cache
+  styleCache.set(hash, result)
+
+  return result
+}
+
+// Clear style cache (useful for testing)
+export function clearStyleCache(styleCache: Map<string, { selector: string; css: string }>): void {
+  styleCache.clear()
+}

package/src/style/stylesheet.ts

@@ -0,0 +1,209 @@
+type RuleEntry = { count: number; index: number }
+type ServerStyleSource = ParentNode | Iterable<Node>
+
+const SERVER_STYLE_SELECTOR = 'style[data-rmx]'
+const DEFAULT_STYLE_LAYER = 'rmx'
+
+function getStyleLayerName(className: string, layer: string = DEFAULT_STYLE_LAYER): string {
+  return `${layer}.${className}`
+}
+
+function compareNodesInDocumentOrder(a: Node, b: Node): number {
+  if (a === b) return 0
+
+  let position = a.compareDocumentPosition(b)
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1
+  return 0
+}
+
+function isParentNode(value: ServerStyleSource): value is ParentNode {
+  return 'querySelectorAll' in value
+}
+
+function collectServerStyleTagsFromNode(node: Node, into: Set<HTMLStyleElement>): void {
+  if (isHtmlStyleElement(node) && node.matches(SERVER_STYLE_SELECTOR)) {
+    into.add(node)
+    return
+  }
+
+  if (
+    !(node instanceof Element) &&
+    !(node instanceof Document) &&
+    !(node instanceof DocumentFragment)
+  ) {
+    return
+  }
+
+  let nested = node.querySelectorAll?.(SERVER_STYLE_SELECTOR) ?? []
+  for (let i = 0; i < nested.length; i++) {
+    let el = nested[i]
+    if (isHtmlStyleElement(el)) {
+      into.add(el)
+    }
+  }
+}
+
+function collectServerStyleTags(source: ServerStyleSource): HTMLStyleElement[] {
+  let styles = new Set<HTMLStyleElement>()
+
+  if (isParentNode(source)) {
+    collectServerStyleTagsFromNode(source as unknown as Node, styles)
+  } else {
+    for (let node of source) {
+      collectServerStyleTagsFromNode(node, styles)
+    }
+  }
+
+  return Array.from(styles).sort(compareNodesInDocumentOrder)
+}
+
+function isHtmlStyleElement(node: unknown): node is HTMLStyleElement {
+  return typeof node === 'object' && node !== null && node instanceof HTMLStyleElement
+}
+
+function getStyleSelector(styleEl: HTMLStyleElement): string | null {
+  let selector = styleEl.getAttribute('data-rmx')?.trim()
+  return selector ? selector : null
+}
+
+export function createStyleManager(layer: string = 'rmx') {
+  let stylesheet: CSSStyleSheet | null = null
+  let generation = 0
+
+  // Track usage count and rule index per className
+  // Using an object to track both count and index together
+  let ruleMap = new Map<string, RuleEntry>()
+
+  function getStylesheet(): CSSStyleSheet {
+    if (!stylesheet) {
+      stylesheet = new CSSStyleSheet()
+      document.adoptedStyleSheets.push(stylesheet)
+    }
+    return stylesheet
+  }
+
+  function removeStylesheet() {
+    if (!stylesheet) return
+    document.adoptedStyleSheets = Array.from(document.adoptedStyleSheets).filter(
+      (s) => s !== stylesheet,
+    )
+    stylesheet = null
+  }
+
+  function clearStylesheet() {
+    if (!stylesheet) return
+    for (let i = stylesheet.cssRules.length - 1; i >= 0; i--) {
+      stylesheet.deleteRule(i)
+    }
+  }
+
+  function adoptServerStyleTag(styleEl: HTMLStyleElement) {
+    let selector = getStyleSelector(styleEl)
+    if (!selector) return
+
+    if (ruleMap.has(selector)) {
+      styleEl.remove()
+      return
+    }
+
+    let cssText = styleEl.textContent?.trim() ?? ''
+    if (cssText.length === 0) {
+      styleEl.remove()
+      return
+    }
+
+    try {
+      let sheet = getStylesheet()
+      let index = sheet.cssRules.length
+      sheet.insertRule(cssText, index)
+      ruleMap.set(selector, { count: 1, index })
+      styleEl.remove()
+    } catch {
+      // If adoption fails, keep the <style> tag in the DOM so styles still apply.
+    }
+  }
+
+  function has(className: string) {
+    let entry = ruleMap.get(className)
+    return entry !== undefined && entry.count > 0
+  }
+
+  function getGeneration() {
+    return generation
+  }
+
+  function insert(className: string, rule: string) {
+    let entry = ruleMap.get(className)
+
+    if (entry) {
+      // Already exists, just increment count
+      entry.count++
+      return
+    }
+
+    // New rule - insert and track
+    let sheet = getStylesheet()
+    let index = sheet.cssRules.length
+    // This may throw for invalid CSS. If it does, we intentionally let it
+    // bubble so the rule is not tracked unless insertion actually succeeds.
+    sheet.insertRule(`@layer ${getStyleLayerName(className, layer)} { ${rule} }`, index)
+    ruleMap.set(className, { count: 1, index })
+  }
+
+  function remove(className: string) {
+    let entry = ruleMap.get(className)
+
+    if (!entry) return
+
+    // Decrement count
+    entry.count--
+
+    if (entry.count > 0) {
+      // Still in use, keep the rule
+      return
+    }
+
+    // Count reached zero, remove the rule
+    let indexToDelete = entry.index
+
+    // Remove from tracking
+    ruleMap.delete(className)
+
+    // TODO: just search and remove, stop re-indexing
+    if (!stylesheet) return
+    stylesheet.deleteRule(indexToDelete)
+
+    // Update indices for all rules that came after the deleted one
+    // They all shift down by 1
+    for (let [, data] of ruleMap.entries()) {
+      if (data.index > indexToDelete) {
+        data.index--
+      }
+    }
+  }
+
+  function reset() {
+    clearStylesheet()
+    ruleMap.clear()
+    removeStylesheet()
+    generation++
+  }
+
+  function adoptServerStyles(source: ServerStyleSource) {
+    let styles = collectServerStyleTags(source)
+
+    for (let styleEl of styles) {
+      adoptServerStyleTag(styleEl)
+    }
+  }
+
+  function dispose() {
+    removeStylesheet()
+    // Clear internal state
+    ruleMap.clear()
+    generation++
+  }
+
+  return { insert, remove, has, getGeneration, reset, adoptServerStyles, dispose }
+}

package/src/test/utils.ts

@@ -0,0 +1,45 @@
+export type Assert<T extends true> = T
+
+export type Equal<X, Y> =
+  (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false
+
+export async function drain(stream: ReadableStream<Uint8Array>): Promise<string> {
+  let reader = stream.getReader()
+  let decoder = new TextDecoder()
+  let html = ''
+
+  while (true) {
+    let { done, value } = await reader.read()
+    if (done) break
+    html += decoder.decode(value)
+  }
+
+  return html
+}
+
+export function readChunks(stream: ReadableStream<Uint8Array>): AsyncGenerator<string, void, void> {
+  let reader = stream.getReader()
+  let decoder = new TextDecoder()
+
+  return (async function* () {
+    while (true) {
+      let { done, value } = await reader.read()
+      if (done) break
+      yield decoder.decode(value)
+    }
+  })()
+}
+
+export function withResolvers<T = unknown>(): [
+  Promise<T>,
+  (value: T) => void,
+  (error: unknown) => void,
+] {
+  let resolve!: (value: T) => void
+  let reject!: (error: unknown) => void
+  let promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return [promise, resolve, reject]
+}

package/src/test.ts

@@ -0,0 +1,2 @@
+export { render } from './runtime/render.ts'
+export type { RenderOptions, RenderResult } from './runtime/render.ts'