fix: color in hsl with unit like deg,turn should render correctly i…

…n `@resvg/resvg-js` (vercel#449)

Close vercel#374


Releated issue: linebender/resvg#579

package.json

@@ -102,6 +102,7 @@
     "css-to-react-native": "^3.0.0",
     "emoji-regex": "^10.2.1",
     "linebreak": "^1.1.0",
+    "parse-css-color": "^0.2.1",
     "postcss-value-parser": "^4.2.0",
     "yoga-wasm-web": "^0.3.3"
   },

src/handler/expand.ts

@@ -6,6 +6,7 @@
 import { getPropertyName, getStylesForProperty } from 'css-to-react-native'
 import { parseElementStyle } from 'css-background-parser'
 import { parse as parseBoxShadow } from 'css-box-shadow'
+import cssColorParse from 'parse-css-color'
 
 import CssDimension from '../vendor/parse-css-dimension/index.js'
 import parseTransformOrigin from '../transform-origin.js'
@@ -369,12 +370,28 @@ export default function expand(
   return transformedStyle
 }
 
+/**
+ * @see https://github.com/RazrFalcon/resvg/issues/579
+ */
+function refineHSL(color: string) {
+  if (color.startsWith('hsl')) {
+    const t = cssColorParse(color)
+    const [h, s, l] = t.values
+
+    return `hsl(${[h, `${s}%`, `${l}%`]
+      .concat(t.alpha === 1 ? [] : [t.alpha])
+      .join(',')})`
+  }
+
+  return color
+}
+
 function getCurrentColor(color: string | undefined, inheritedColor: string) {
   if (color && color.toLowerCase() !== 'currentcolor') {
-    return color
+    return refineHSL(color)
   }
 
-  return inheritedColor
+  return refineHSL(inheritedColor)
 }
 
 function convertCurrentColorToActualValue(

test/color-models.test.tsx

@@ -279,6 +279,61 @@ describe('Color Models', () => {
     })
   })
 
+  it('should support css4 synatx color in hsl', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          fontSize: 16,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          textAlign: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <span style={{ color: 'hsl(200deg, 50%, 50%)' }}>A</span>
+        <span style={{ color: 'hsl(200deg, 50%, 50%, 0.6)' }}>A</span>
+        <span style={{ color: 'hsl(200, 50%, 50%)' }}>B</span>
+        <span style={{ color: 'hsl(0.3turn, 50%, 50%)' }}>C</span>
+        <span style={{ color: 'hsl(0.3turn, 50%, 50%, 0.6)' }}>D</span>
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
+  it('should support css4 synatx color in hsl if inherited', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          fontSize: 16,
+          background: 'white',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          textAlign: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'hsl(200deg, 50%, 50%)',
+        }}
+      >
+        <span>A</span>
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
+
   // Borders: shorthand, border-bottom-color, border-color, border-left-color, border-right-color, border-top-color
 
   // Box shadow