Support CSS color channel calculations

Author: cray0000

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

@@ -113,12 +113,17 @@ function mixRgb (
   const a = colorA.toRgb()
   const b = colorB.toRgb()
   const secondWeight = 1 - firstWeight
+  const alphaValue = alpha(a.alpha * firstWeight + b.alpha * secondWeight)
+
+  if (alphaValue === 0) {
+    return rgbaString({ r: 0, g: 0, b: 0, alpha: 0 })
+  }
 
   return rgbaString({
-    r: round(a.r * firstWeight + b.r * secondWeight),
-    g: round(a.g * firstWeight + b.g * secondWeight),
-    b: round(a.b * firstWeight + b.b * secondWeight),
-    alpha: alpha(a.alpha * firstWeight + b.alpha * secondWeight)
+    r: round((a.r * a.alpha * firstWeight + b.r * b.alpha * secondWeight) / alphaValue),
+    g: round((a.g * a.alpha * firstWeight + b.g * b.alpha * secondWeight) / alphaValue),
+    b: round((a.b * a.alpha * firstWeight + b.b * b.alpha * secondWeight) / alphaValue),
+    alpha: alphaValue
   })
 }
 

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

@@ -272,9 +272,10 @@ function resolveCalcs (
 }
 
 function evaluateCalc (expression: string): string | null {
-  if (expression.includes('%')) return null
-  const hasPx = /(?:^|[^\w.-])[+-]?(?:\d*\.)?\d+px\b/.test(expression)
-  const normalized = expression.replace(/([+-]?(?:\d*\.)?\d+)px\b/g, '$1')
+  const unit = getCalcUnit(expression)
+  if (unit === false) return null
+
+  const normalized = expression.replace(/([+-]?(?:\d*\.)?\d+)(px\b|%)/g, (_match, number: string) => number)
   if (!/^[0-9+\-*/().\s]+$/.test(normalized)) return null
 
   let index = 0
@@ -353,10 +354,25 @@ function evaluateCalc (expression: string): string | null {
   skipWhitespace()
 
   return result != null && index === normalized.length && Number.isFinite(result)
-    ? hasPx ? `${result}px` : String(result)
+    ? unit ? `${roundCalc(result)}${unit}` : String(roundCalc(result))
     : null
 }
 
+function getCalcUnit (expression: string): 'px' | '%' | '' | false {
+  const units = new Set<string>()
+  expression.replace(/(?:^|[^\w.-])[+-]?(?:\d*\.)?\d+(px\b|%)/g, (_match, unit: string) => {
+    units.add(unit === '%' ? '%' : 'px')
+    return ''
+  })
+
+  if (units.size > 1) return false
+  return (units.values().next().value ?? '') as 'px' | '%' | ''
+}
+
+function roundCalc (value: number): number {
+  return Math.round(value * 1000000) / 1000000
+}
+
 function findMatchingParen (input: string, openIndex: number): number {
   let depth = 0
   for (let index = openIndex; index < input.length; index++) {

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

@@ -89,6 +89,19 @@ describe('@cssxjs/css-to-rn value resolver', () => {
     assert.equal(result.dependencies.dimensions, true)
   })
 
+  it('resolves percentage and unitless calc expressions for color channels', () => {
+    assert.equal(resolveCssValue('calc(50% + 10%)').value, '60%')
+    assert.equal(resolveCssValue('calc(0.2 * 0.5)').value, '0.1')
+    assert.equal(resolveCssValue('oklch(calc(50% + 10%) calc(0.2 * 0.5) 250)').value, 'rgba(79, 132, 186, 1)')
+  })
+
+  it('mixes srgb colors with transparent using premultiplied alpha', () => {
+    assert.equal(
+      resolveCssValue('color-mix(in srgb, rgb(24 107 236) 5%, transparent)').value,
+      'rgba(24, 107, 236, 0.05)'
+    )
+  })
+
   it('rejects unsupported calc expressions', () => {
     const result = resolveCssValue('calc(100% - 16px)')