fix(workflows): validate gradient color stops

Author: waleedlatif1

packages/utils/src/color.test.ts

@@ -48,6 +48,10 @@ describe('perceivedBackgroundBrightness', () => {
     expect(
       perceivedBackgroundBrightness('linear-gradient(45deg, currentColor, transparent)')
     ).toBeNull()
+    expect(
+      perceivedBackgroundBrightness('linear-gradient(45deg, #fff, rebeccapurple, #000)')
+    ).toBeNull()
+    expect(perceivedBackgroundBrightness('linear-gradient(rebeccapurple, #fff, #000)')).toBeNull()
     expect(perceivedBackgroundBrightness('currentColor')).toBeNull()
   })
 })

packages/utils/src/color.ts

@@ -34,21 +34,49 @@ export function perceivedBackgroundBrightness(background: string): number | null
   const solidBrightness = parseSolidBrightness(value)
   if (solidBrightness !== null) return solidBrightness
 
-  if (!/^(?:repeating-)?(?:linear|radial|conic)-gradient\(/.test(value)) return null
+  const gradient = value.match(/^(?:repeating-)?(linear|radial|conic)-gradient\((.*)\)$/)
+  if (!gradient) return null
 
-  const colorStops = value.match(/#[0-9a-f]{6}\b|#[0-9a-f]{3}\b|\b(?:white|black)\b/g)
-  if (!colorStops || colorStops.length < 2) return null
+  const [, gradientType, contents] = gradient
+  const parts = contents.split(',').map((part) => part.trim())
+  const firstStop = parseSupportedColorStop(parts[0])
+  const colorStops = firstStop === null ? parts.slice(1) : parts
+  if (
+    colorStops.length < 2 ||
+    (firstStop === null && !isSupportedGradientPreamble(gradientType, parts[0]))
+  ) {
+    return null
+  }
 
   let totalBrightness = 0
   for (const colorStop of colorStops) {
-    const brightness = parseSolidBrightness(colorStop)
+    const brightness = parseSupportedColorStop(colorStop)
     if (brightness === null) return null
     totalBrightness += brightness
   }
 
   return totalBrightness / colorStops.length
 }
 
+function parseSupportedColorStop(value: string): number | null {
+  const match = value.match(/^(#[0-9a-f]{6}\b|#[0-9a-f]{3}\b|(?:white|black)\b)(?:\s|$)/)
+  return match ? parseSolidBrightness(match[1]) : null
+}
+
+function isSupportedGradientPreamble(type: string, value: string): boolean {
+  if (type === 'linear') {
+    return /^(?:-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|grad|rad|turn)|to\s+(?:top|right|bottom|left)(?:\s+(?:top|right|bottom|left))?)$/.test(
+      value
+    )
+  }
+  if (type === 'radial') {
+    return /^(?:(?:circle|ellipse|closest-side|closest-corner|farthest-side|farthest-corner|at)\b|-?(?:\d|\.\d))/.test(
+      value
+    )
+  }
+  return /^(?:from|at)\b/.test(value)
+}
+
 function parseSolidBrightness(value: string): number | null {
   if (value === 'white') return 1
   if (value === 'black') return 0