feat: support repeating-radial-gradient (#697)

Author: Jackie1210

README.md

@@ -204,7 +204,7 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 
 <tr><td rowspan="7">Background</td></tr>
 <tr><td><code>backgroundColor</code></td><td>Supported, single value</td><td></td></tr>
-<tr><td><code>backgroundImage</code></td><td><code>linear-gradient</code>, <code>radial-gradient</code>, <code>url</code>, single value</td><td></td></tr>
+<tr><td><code>backgroundImage</code></td><td><code>linear-gradient</code>, <code>repeating-linear-gradient</code>, <code>radial-gradient</code>, <code>repeating-radial-gradient</code>, <code>url</code>, single value</td><td></td></tr>
 <tr><td><code>backgroundPosition</code></td><td>Support single value</td><td></td></tr>
 <tr><td><code>backgroundSize</code></td><td>Support two-value size i.e. <code>10px 20%</code></td><td></td></tr>
 <tr><td><code>backgroundClip</code></td><td><code>border-box</code>, <code>text</code></td><td></td></tr>

src/builder/background-image.ts

@@ -102,7 +102,10 @@ export default async function backgroundImage(
     )
   }
 
-  if (image.startsWith('radial-gradient(')) {
+  if (
+    image.startsWith('radial-gradient(') ||
+    image.startsWith('repeating-radial-gradient(')
+  ) {
     return buildRadialGradient(
       { id, width, height, repeatX, repeatY },
       image,

src/builder/gradient/radial.ts

@@ -2,6 +2,7 @@ import {
   parseRadialGradient,
   RadialResult,
   RadialPropertyValue,
+  ColorStop,
 } from 'css-gradient-parser'
 import { buildXMLString, lengthToNumber } from '../../utils.js'
 import { normalizeStops } from './utils.js'
@@ -31,6 +32,7 @@ export function buildRadialGradient(
     stops: colorStops,
     position,
     size,
+    repeating,
   } = parseRadialGradient(image)
   const [xDelta, yDelta] = dimensions
 
@@ -48,7 +50,20 @@ export function buildRadialGradient(
   cx = pos.x
   cy = pos.y
 
-  const stops = normalizeStops(width, colorStops, inheritableStyle, false, from)
+  const colorStopTotalLength = calcColorStopTotalLength(
+    width,
+    colorStops,
+    repeating,
+    inheritableStyle
+  )
+
+  const stops = normalizeStops(
+    colorStopTotalLength,
+    colorStops,
+    inheritableStyle,
+    repeating,
+    from
+  )
 
   const gradientId = `satori_radial_${id}`
   const patternId = `satori_pattern_${id}`
@@ -61,7 +76,18 @@ export function buildRadialGradient(
     inheritableStyle.fontSize as number,
     { x: cx, y: cy },
     [xDelta, yDelta],
-    inheritableStyle
+    inheritableStyle,
+    repeating
+  )
+
+  const props = calcRadialGradientProps(
+    shape as Shape,
+    inheritableStyle.fontSize as number,
+    colorStops,
+    [xDelta, yDelta],
+    inheritableStyle,
+    repeating,
+    spread
   )
 
   // TODO: check for repeat-x/repeat-y
@@ -79,6 +105,7 @@ export function buildRadialGradient(
       'radialGradient',
       {
         id: gradientId,
+        ...props,
       },
       stops
         .map((stop) =>
@@ -124,13 +151,28 @@ export function buildRadialGradient(
   return result
 }
 
-interface Position {
-  type: 'keyword' | 'length'
-  value: string
-}
-
 type PositionKeyWord = 'center' | 'left' | 'right' | 'top' | 'bottom'
 
+function calcColorStopTotalLength(
+  width: number,
+  stops: ColorStop[],
+  repeating: boolean,
+  inheritableStyle: Record<string, string | number>
+) {
+  if (!repeating) return width
+  const lastStop = stops.at(-1)
+  if (!lastStop || !lastStop.offset || lastStop.offset.unit === '%')
+    return width
+
+  return lengthToNumber(
+    `${lastStop.offset.value}${lastStop.offset.unit}`,
+    +inheritableStyle.fontSize,
+    width,
+    inheritableStyle,
+    true
+  )
+}
+
 function calcRadialGradient(
   cx: RadialPropertyValue,
   cy: RadialPropertyValue,
@@ -196,13 +238,53 @@ function calcPos(
 }
 
 type Shape = 'circle' | 'ellipse'
+
+function calcRadialGradientProps(
+  shape: Shape,
+  baseFontSize: number,
+  colorStops: ColorStop[],
+  [xDelta, yDelta]: [number, number],
+  inheritableStyle: Record<string, string | number>,
+  repeating: boolean,
+  spread: Record<string, number>
+) {
+  const { r, rx, ratio = 1 } = spread
+  if (!repeating) {
+    return {
+      spreadMethod: 'pad',
+    }
+  }
+  const last = colorStops.at(-1)
+  const radius = shape === 'circle' ? r * 2 : rx * 2
+  return {
+    spreadMethod: 'repeat',
+    cx: '50%',
+    cy: '50%',
+    r:
+      last.offset.unit === '%'
+        ? `${
+            (Number(last.offset.value) * Math.min(yDelta / xDelta, 1)) / ratio
+          }%`
+        : Number(
+            lengthToNumber(
+              `${last.offset.value}${last.offset.unit}`,
+              baseFontSize,
+              xDelta,
+              inheritableStyle,
+              true
+            ) / radius
+          ),
+  }
+}
+
 function calcRadius(
   shape: Shape,
   endingShape: RadialResult['size'],
   baseFontSize: number,
   centerAxis: { x: number; y: number },
   length: [number, number],
-  inheritableStyle: Record<string, string | number>
+  inheritableStyle: Record<string, string | number>,
+  repeating: boolean
 ) {
   const [xDelta, yDelta] = length
   const { x: cx, y: cy } = centerAxis
@@ -217,7 +299,7 @@ function calcRadius(
       )
     }
     if (shape === 'circle') {
-      return {
+      Object.assign(spread, {
         r: Number(
           lengthToNumber(
             `${endingShape[0].value.value}${endingShape[0].value.unit}`,
@@ -227,9 +309,9 @@ function calcRadius(
             true
           )
         ),
-      }
+      })
     } else {
-      return {
+      Object.assign(spread, {
         rx: Number(
           lengthToNumber(
             `${endingShape[0].value.value}${endingShape[0].value.unit}`,
@@ -248,8 +330,10 @@ function calcRadius(
             true
           )
         ),
-      }
+      })
     }
+    patchSpread(spread, xDelta, yDelta, cx, cy, repeating, shape)
+    return spread
   }
 
   switch (endingShape[0].value) {
@@ -273,6 +357,7 @@ function calcRadius(
         spread.rx = Math.max(Math.abs(xDelta - cx), Math.abs(cx))
         spread.ry = Math.max(Math.abs(yDelta - cy), Math.abs(cy))
       }
+      patchSpread(spread, xDelta, yDelta, cx, cy, repeating, shape)
       return spread
     case 'closest-side':
       if (shape === 'circle') {
@@ -286,31 +371,79 @@ function calcRadius(
         spread.rx = Math.min(Math.abs(xDelta - cx), Math.abs(cx))
         spread.ry = Math.min(Math.abs(yDelta - cy), Math.abs(cy))
       }
+      patchSpread(spread, xDelta, yDelta, cx, cy, repeating, shape)
 
       return spread
   }
   if (shape === 'circle') {
     spread.r = Math.sqrt(fx * fx + fy * fy)
   } else {
-    // Spec: https://drafts.csswg.org/css-images/#typedef-size
-    // Get the aspect ratio of the closest-side size.
-    const ratio = fy !== 0 ? fx / fy : 1
+    Object.assign(spread, f2r(fx, fy))
+  }
 
-    if (fx === 0) {
-      spread.rx = 0
-      spread.ry = 0
+  patchSpread(spread, xDelta, yDelta, cx, cy, repeating, shape)
+
+  return spread
+}
+
+// compare with farthest-corner to make it cover the whole container
+function patchSpread(
+  spread: Record<string, number>,
+  xDelta: number,
+  yDelta: number,
+  cx: number,
+  cy: number,
+  repeating: boolean,
+  shape: Shape
+) {
+  if (repeating) {
+    if (shape === 'ellipse') {
+      const mfx = Math.max(Math.abs(xDelta - cx), Math.abs(cx))
+      const mfy = Math.max(Math.abs(yDelta - cy), Math.abs(cy))
+
+      const { rx: mrx, ry: mry } = f2r(mfx, mfy)
+
+      spread.ratio = Math.max(mrx / spread.rx, mry / spread.ry)
+      if (spread.ratio > 1) {
+        spread.rx *= spread.ratio
+        spread.ry *= spread.ratio
+      }
     } else {
-      // fx^2/a^2 + fy^2/b^2 = 1
-      // fx^2/(b*ratio)^2 + fy^2/b^2 = 1
-      // (fx^2+fy^2*ratio^2) = (b*ratio)^2
-      // b = sqrt(fx^2+fy^2*ratio^2)/ratio
+      const mfx = Math.max(Math.abs(xDelta - cx), Math.abs(cx))
+      const mfy = Math.max(Math.abs(yDelta - cy), Math.abs(cy))
+
+      const mr = Math.sqrt(mfx * mfx + mfy * mfy)
 
-      spread.ry = Math.sqrt(fx * fx + fy * fy * ratio * ratio) / ratio
-      spread.rx = spread.ry * ratio
+      spread.ratio = mr / spread.r
+      if (spread.ratio > 1) {
+        spread.r = mr
+      }
     }
   }
+}
 
-  return spread
+function f2r(fx: number, fy: number) {
+  // Spec: https://drafts.csswg.org/css-images/#typedef-size
+  // Get the aspect ratio of the closest-side size.
+  const ratio = fy !== 0 ? fx / fy : 1
+
+  if (fx === 0) {
+    return {
+      rx: 0,
+      ry: 0,
+    }
+  } else {
+    // fx^2/a^2 + fy^2/b^2 = 1
+    // fx^2/(b*ratio)^2 + fy^2/b^2 = 1
+    // (fx^2+fy^2*ratio^2) = (b*ratio)^2
+    // b = sqrt(fx^2+fy^2*ratio^2)/ratio
+
+    const ry = Math.sqrt(fx * fx + fy * fy * ratio * ratio) / ratio
+    return {
+      ry,
+      rx: ry * ratio,
+    }
+  }
 }
 
 function isSizeAllLength(v: RadialPropertyValue[]): v is Array<{

src/builder/gradient/utils.ts

@@ -17,6 +17,14 @@ export function normalizeStops(
   // Resolve the color stops based on the spec:
   // https://drafts.csswg.org/css-images/#color-stop-syntax
   const stops: Stop[] = []
+  const lastColorStop = colorStops.at(-1)
+  const totalPercentage =
+    lastColorStop &&
+    lastColorStop.offset &&
+    lastColorStop.offset.unit === '%' &&
+    repeating
+      ? +lastColorStop.offset.value
+      : 100
   for (const stop of colorStops) {
     const { color } = stop
     if (!stops.length) {
@@ -35,7 +43,7 @@ export function normalizeStops(
       typeof stop.offset === 'undefined'
         ? undefined
         : stop.offset.unit === '%'
-        ? +stop.offset.value / 100
+        ? +stop.offset.value / totalPercentage
         : Number(
             lengthToNumber(
               `${stop.offset.value}${stop.offset.unit}`,

src/handler/expand.ts

@@ -60,9 +60,7 @@ function handleSpecialCase(
   currentColor: string
 ) {
   if (name === 'zIndex') {
-    console.warn(
-      '`z-index` is currently not supported.'
-    )
+    console.warn('`z-index` is currently not supported.')
     return { [name]: value }
   }
 
@@ -172,7 +170,7 @@ function handleSpecialCase(
   if (name === 'background') {
     value = value.toString().trim()
     if (
-      /^(linear-gradient|radial-gradient|url|repeating-linear-gradient)\(/.test(
+      /^(linear-gradient|radial-gradient|url|repeating-linear-gradient|repeating-radial-gradient)\(/.test(
         value
       )
     ) {