Add CSS color bridge helpers

Author: cray0000

packages/css-to-rn/src/colors.ts

@@ -38,6 +38,11 @@ export function evaluateCssColors (input: string): string {
   return output
 }
 
+export function isCssColor (input: string): boolean {
+  const color = colordx(evaluateCssColors(input.trim()))
+  return color.isValid()
+}
+
 function evaluateColorMix (body: string): string | null {
   const parts = splitTopLevelComma(body).map(part => part.trim()).filter(Boolean)
   if (parts.length !== 3) return null

packages/css-to-rn/src/compiler.ts

@@ -413,9 +413,21 @@ function validateBuildDeclaration (
     dimensions: {
       width: 100,
       height: 100
-    }
+    },
+    deprecateUUnits: true
   })
 
+  if (resolved.valid) {
+    for (const item of resolved.diagnostics) {
+      addDiagnostic(state, diagnostic(
+        item.code,
+        item.message,
+        item.level,
+        position
+      ))
+    }
+  }
+
   if (!resolved.valid) {
     for (const item of resolved.diagnostics) {
       addDiagnostic(state, diagnostic(

packages/css-to-rn/src/index.ts

@@ -11,6 +11,9 @@ export {
 export {
   resolveCssValue
 } from './values.ts'
+export {
+  u
+} from './units.ts'
 export {
   createCssxCache,
   cssx,

packages/css-to-rn/src/react-native.ts

@@ -7,6 +7,12 @@ export {
 export {
   resolveCssValue
 } from './values.ts'
+export {
+  u
+} from './units.ts'
+import {
+  resetUWarningForTests
+} from './units.ts'
 import {
   cssx as baseCssx,
   clearRawCssCacheForTests
@@ -73,12 +79,17 @@ export {
   useCssxRuntimeContext
 } from './react/config.ts'
 export {
+  getCssColor,
   getCssVariable,
   getCssVariableRaw,
   useMedia,
+  useCssColor,
   useCssVariable,
   useCssVariableRaw
 } from './react/hooks.ts'
+export type {
+  CssColorMixInput
+} from './react/hooks.ts'
 export {
   TrackedCssxSheet,
   isTrackedCssxSheet
@@ -151,6 +162,7 @@ export const __cssxInternals = {
   flushMicrotasksForTests,
   getRuntimeSubscriberCountForTests,
   resetStoreForTests,
+  resetUWarningForTests,
   setColorSchemeForTests,
   setDimensionsForTests,
   subscribeVariablesForTests

packages/css-to-rn/src/react/hooks.ts

@@ -6,6 +6,7 @@ import {
   useSyncExternalStore
 } from 'react'
 import { compileCss } from '../compiler.ts'
+import { isCssColor } from '../colors.ts'
 import { evaluateCssxMediaQuery } from '../resolve.ts'
 import type { CompiledCssSheet } from '../types.ts'
 import {
@@ -15,7 +16,8 @@ import {
 } from './config.ts'
 import {
   coerceCssValue,
-  resolveCssValue
+  resolveCssValue,
+  type ResolveCssValueResult
 } from '../values.ts'
 import {
   createDependencySnapshot,
@@ -36,6 +38,8 @@ const useCommitEffect = typeof window === 'undefined'
   ? useEffect
   : useLayoutEffect
 const CSS_VARIABLE_NAME_RE = /^--[A-Za-z0-9_-]+$/
+const CSS_COLOR_FUNCTION_RE = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(/i
+const CSS_COLOR_TOKEN_RE = /^[A-Za-z][A-Za-z0-9_-]*$/
 const DEFAULT_CUSTOM_MEDIA: Record<string, string> = {
   '--breakpoint-mobile': '(width < 48rem)',
   '--breakpoint-tablet': '(width >= 48rem)',
@@ -87,6 +91,14 @@ export type CssxLayerHookOutput =
   | undefined
   | false
 
+export type CssColorMixInput =
+  | number
+  | string
+  | {
+    mix?: number | string
+    with?: string
+  }
+
 export function useCssxSheet (
   sheet: CompiledCssSheet,
   options: CssxReactConfig = {}
@@ -192,7 +204,7 @@ export function useCssVariableRaw (
   const context = useCssxRuntimeContext()
   const committedDependenciesRef = useRef<CssxDependencySnapshot>(createDependencySnapshot())
   const result = resolveCssVariableRaw(name, fallback, context.scopedVariables)
-  const renderDependencies = createVariableDependencySnapshot(result)
+  const renderDependencies = createCssValueDependencySnapshot(result)
 
   useSyncExternalStore(
     listener => subscribeRuntimeStore(listener, () => committedDependenciesRef.current),
@@ -215,6 +227,28 @@ export function useCssVariable (
   return value == null ? value : coerceCssValue(value)
 }
 
+export function useCssColor (
+  color: string,
+  mix?: CssColorMixInput
+): string | undefined {
+  const context = useCssxRuntimeContext()
+  const committedDependenciesRef = useRef<CssxDependencySnapshot>(createDependencySnapshot())
+  const result = resolveCssColor(color, mix, context.scopedVariables)
+  const renderDependencies = createCssValueDependencySnapshot(result)
+
+  useSyncExternalStore(
+    listener => subscribeRuntimeStore(listener, () => committedDependenciesRef.current),
+    getRuntimeVersion,
+    getRuntimeVersion
+  )
+
+  useCommitEffect(() => {
+    committedDependenciesRef.current = renderDependencies
+  })
+
+  return result.value
+}
+
 export function getCssVariableRaw (
   name: string,
   fallback?: unknown
@@ -231,6 +265,13 @@ export function getCssVariable (
   return value == null ? value : coerceCssValue(value)
 }
 
+export function getCssColor (
+  color: string,
+  mix?: CssColorMixInput
+): string | undefined {
+  return resolveCssColor(color, mix).value
+}
+
 export function useMedia (): Record<string, boolean> {
   const context = useCssxRuntimeContext()
   const committedDependenciesRef = useRef<CssxDependencySnapshot>(createDependencySnapshot())
@@ -367,8 +408,21 @@ function resolveCssVariableRaw (
   })
 }
 
-function createVariableDependencySnapshot (
-  result: ReturnType<typeof resolveCssVariableRaw>
+function resolveCssColor (
+  color: string,
+  mix?: CssColorMixInput,
+  scopedVariables?: readonly Record<string, unknown>[]
+): ResolveCssValueResult {
+  return resolveCssValue(createCssColorExpression(color, mix), {
+    variables: getVariableValues(),
+    scopedVariables,
+    defaultVariables: getDefaultVariableValues(),
+    dimensions: getDimensions()
+  })
+}
+
+function createCssValueDependencySnapshot (
+  result: ResolveCssValueResult
 ): CssxDependencySnapshot {
   const dependencies = createDependencySnapshot()
   for (const name of result.dependencies.vars) {
@@ -380,6 +434,67 @@ function createVariableDependencySnapshot (
   return dependencies
 }
 
+function createCssColorExpression (
+  color: string,
+  mix?: CssColorMixInput
+): string {
+  const base = normalizeCssColorExpression(color)
+  const mixOptions = normalizeColorMix(mix)
+  if (mixOptions == null) return base
+
+  return `color-mix(in srgb, ${base} ${mixOptions.weight}, ${normalizeCssColorExpression(mixOptions.with)})`
+}
+
+function normalizeCssColorExpression (input: string): string {
+  const value = input.trim()
+  if (value === '') return value
+  if (/^var\(/i.test(value)) return value
+  if (value.startsWith('--')) {
+    throw new TypeError(`Ambiguous CSS color token "${input}". Use "var(${value})" or a semantic token such as "primary".`)
+  }
+  if (
+    CSS_COLOR_FUNCTION_RE.test(value) ||
+    isCssColor(value) ||
+    !CSS_COLOR_TOKEN_RE.test(value)
+  ) {
+    return value
+  }
+
+  return `var(--color-${value})`
+}
+
+function normalizeColorMix (
+  input: CssColorMixInput | undefined
+): { weight: string, with: string } | null {
+  if (input == null) return null
+  if (typeof input === 'number' || typeof input === 'string') {
+    return {
+      weight: normalizeMixWeight(input),
+      with: 'transparent'
+    }
+  }
+
+  if (input.mix == null) return null
+  return {
+    weight: normalizeMixWeight(input.mix),
+    with: input.with ?? 'transparent'
+  }
+}
+
+function normalizeMixWeight (input: number | string): string {
+  if (typeof input === 'string') {
+    const value = input.trim()
+    if (/^(?:\d+|\d*\.\d+)%$/.test(value)) return value
+    throw new TypeError(`Invalid CSS color mix weight "${input}". Expected a percentage string such as "15%".`)
+  }
+
+  if (!Number.isFinite(input) || input < 0 || input > 1) {
+    throw new TypeError(`Invalid CSS color mix weight "${input}". Expected a number from 0 to 1.`)
+  }
+
+  return `${input * 100}%`
+}
+
 function resolveMedia (
   media: Record<string, string>,
   context: ReturnType<typeof useCssxRuntimeContext>

packages/css-to-rn/src/types.ts

@@ -17,6 +17,7 @@ export type CssxDiagnosticCode =
   | 'UNSUPPORTED_BACKGROUND_SHORTHAND'
   | 'INVALID_THEME_BLOCK'
   | 'INVALID_CUSTOM_MEDIA'
+  | 'DEPRECATED_UNIT'
 
 export interface CssxDiagnostic {
   level: CssxDiagnosticLevel

packages/css-to-rn/src/units.ts

@@ -0,0 +1,14 @@
+let warnedAboutU = false
+
+export function u (value: number): number {
+  if (!warnedAboutU && process.env.NODE_ENV !== 'production') {
+    warnedAboutU = true
+    console.warn('[cssx] u() is deprecated. Use rem, var(--spacing), or CSS instead. 1u equals 0.5rem or 8px.')
+  }
+
+  return value * 8
+}
+
+export function resetUWarningForTests (): void {
+  warnedAboutU = false
+}

packages/css-to-rn/src/values.ts

@@ -14,6 +14,7 @@ export interface ResolveCssValueOptions {
     height?: number
   }
   maxVarDepth?: number
+  deprecateUUnits?: boolean
 }
 
 export interface ResolveCssValueResult {
@@ -60,7 +61,7 @@ export function resolveCssValue (
     return invalid(diagnostics, dependencies)
   }
 
-  const units = resolveUnits(variableResolution.value, options, dependencies)
+  const units = resolveUnits(variableResolution.value, options, dependencies, diagnostics)
   const calc = resolveCalcs(units.value, diagnostics)
   if (!calc.valid) {
     return invalid(diagnostics, dependencies)
@@ -213,8 +214,19 @@ function resolveVars (
 function resolveUnits (
   input: string,
   options: ResolveCssValueOptions,
-  dependencies: { vars: Set<string>, dimensions: boolean }
+  dependencies: { vars: Set<string>, dimensions: boolean },
+  diagnostics: CssxDiagnostic[]
 ): { value: string } {
+  const warnUUnits = options.deprecateUUnits && U_UNIT_RE.test(input)
+  U_UNIT_RE.lastIndex = 0
+  if (warnUUnits) {
+    diagnostics.push(diagnostic(
+      'DEPRECATED_UNIT',
+      'The CSSX "u" unit is deprecated. Use rem, var(--spacing), or calc(var(--spacing) * n).',
+      'warning'
+    ))
+  }
+
   let value = input.replace(U_UNIT_RE, (_match, prefix: string, rawNumber: string) => {
     return `${prefix}${Number(rawNumber) * 8}px`
   })

packages/css-to-rn/src/web.ts

@@ -7,6 +7,12 @@ export {
 export {
   resolveCssValue
 } from './values.ts'
+export {
+  u
+} from './units.ts'
+import {
+  resetUWarningForTests
+} from './units.ts'
 import {
   cssx as baseCssx,
   clearRawCssCacheForTests
@@ -69,12 +75,17 @@ export {
   useCssxRuntimeContext
 } from './react/config.ts'
 export {
+  getCssColor,
   getCssVariable,
   getCssVariableRaw,
   useMedia,
+  useCssColor,
   useCssVariable,
   useCssVariableRaw
 } from './react/hooks.ts'
+export type {
+  CssColorMixInput
+} from './react/hooks.ts'
 export {
   TrackedCssxSheet,
   isTrackedCssxSheet
@@ -144,6 +155,7 @@ export const __cssxInternals = {
   flushMicrotasksForTests,
   getRuntimeSubscriberCountForTests,
   resetStoreForTests,
+  resetUWarningForTests,
   setColorSchemeForTests,
   setDimensionsForTests,
   subscribeVariablesForTests

packages/css-to-rn/test/engine/compiler.test.ts

@@ -182,6 +182,14 @@ describe('@cssxjs/css-to-rn compiler IR', () => {
     assert.equal(sheet.error, undefined)
   })
 
+  it('warns about deprecated u units in build mode', () => {
+    const sheet = compileCss('.root { padding: 1u; }', { mode: 'build' })
+
+    assert.equal(sheet.error, undefined)
+    assert.equal(sheet.diagnostics[0].code, 'DEPRECATED_UNIT')
+    assert.equal(sheet.diagnostics[0].level, 'warning')
+  })
+
   it('warns and ignores unsupported selectors in runtime mode', () => {
     const sheet = compileCss(`
       .root .child { color: red; }