fix: playground current color stopped working (#294)

<img width="1439" alt="image"
src="https://user-images.githubusercontent.com/22126563/200785190-dae8a79b-efe9-46d8-91df-199ba3ec1991.png">


Closes: #288

Author: LuciNyan

src/handler/expand.ts

@@ -199,43 +199,52 @@ function normalizeColor(value: string | object) {
 }
 
 export default function expand(
-  style: Record<string, string | number>,
+  style: Record<string, string | number> | undefined,
   inheritedStyle: Record<string, string | number>
 ): Record<string, string | number> {
   const transformedStyle = {} as any
 
-  for (const prop in style) {
-    // Internal properties.
-    if (prop.startsWith('_')) {
-      transformedStyle[prop] = style[prop]
-      continue
-    }
+  if (style) {
+    const currentColor = getCurrentColor(style.color as string, inheritedStyle.color as string)
 
-    const name = getPropertyName(prop)
-    const currentColor = (style.color || inheritedStyle.color) as string
+    transformedStyle.color = currentColor
 
-    try {
-      const resolvedStyle =
-        handleSpecialCase(name, style[prop], currentColor) ||
-        handleFallbackColor(
-          name,
-          getStylesForProperty(name, purify(name, style[prop]), true),
-          style[prop] as string,
-          currentColor
-        )
+    for (const prop in style) {
+      // Internal properties.
+      if (prop.startsWith('_')) {
+        transformedStyle[prop] = style[prop]
+        continue
+      }
 
-      Object.assign(transformedStyle, resolvedStyle)
-    } catch (err) {
-      throw new Error(
-        err.message +
+      if (prop === 'color') {
+        continue
+      }
+
+      const name = getPropertyName(prop)
+
+      try {
+        const resolvedStyle =
+          handleSpecialCase(name, style[prop], currentColor) ||
+          handleFallbackColor(
+            name,
+            getStylesForProperty(name, purify(name, style[prop]), true),
+            style[prop] as string,
+            currentColor
+          )
+
+        Object.assign(transformedStyle, resolvedStyle)
+      } catch (err) {
+        throw new Error(
+          err.message +
           // Attach the extra information of the rule itself if it's not included in
           // the error message.
           (err.message.includes(style[prop])
             ? '\n  ' + getErrorHint(name)
             : `\n  in CSS rule \`${name}: ${style[prop]}\`.${getErrorHint(
-                name
-              )}`)
-      )
+              name
+            )}`)
+        )
+      }
     }
   }
 
@@ -337,3 +346,11 @@ export default function expand(
 
   return transformedStyle
 }
+
+function getCurrentColor(color: string | undefined, inheritedColor: string) {
+  if (color && color.toLowerCase() !== 'currentcolor') {
+    return color
+  }
+
+  return inheritedColor
+}

test/__image_snapshots__/color-models-test-tsx-test-color-models-test-tsx-2-m-22-m-color-models-2-m-22-mbackground-color-and-color-2-m-22-mshould-support-currentcolor-when-inherit-1-snap.png

@@ -169,6 +169,56 @@ describe('Color Models', () => {
       expect(toImage(svg, 100)).toMatchImageSnapshot()
     })
 
+    it('should support inherit color', async () => {
+      const svg = await satori(
+        <div
+          style={{
+            display: 'flex',
+            backgroundColor: 'pink',
+            color: 'red',
+            height: '100%',
+            width: '100%',
+          }}
+        >
+          <div style={{ display: 'flex' }}>
+            red
+            <div>red</div>
+          </div>
+        </div>,
+        {
+          width: 100,
+          height: 100,
+          fonts,
+        }
+      )
+      expect(toImage(svg, 100)).toMatchImageSnapshot()
+    })
+
+    it('should support currentcolor when inherit', async () => {
+      const svg = await satori(
+        <div
+          style={{
+            display: 'flex',
+            backgroundColor: 'pink',
+            color: 'red',
+            height: '100%',
+            width: '100%',
+          }}
+        >
+          <div style={{ display: 'flex', color: 'currentcolor' }}>
+            red
+            <div>red</div>
+          </div>
+        </div>,
+        {
+          width: 100,
+          height: 100,
+          fonts,
+        }
+      )
+      expect(toImage(svg, 100)).toMatchImageSnapshot()
+    })
+
     // TODO: add `currentcolor` support to css-to-react-native lib
     // it('should support currentcolor', async () => {
     //   const svg = await satori(