refactor

src/react/ShikiMagicMoveRenderer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type { KeyedTokensInfo, MagicMoveRenderOptions } from '../types'
 import { MagicMoveRenderer as Renderer } from '../renderer'
-import { createCSSPropertiesFromString } from './utils'
+import { normalizeCSSProperties } from './utils'
 
 export interface ShikiMagicMoveRendererProps {
   animate?: boolean
@@ -87,9 +87,7 @@ export function ShikiMagicMoveRenderer(
             return (
               <span
                 style={{
-                  ...typeof token.htmlStyle === 'string'
-                    ? createCSSPropertiesFromString(token.htmlStyle)
-                    : token.htmlStyle,
+                  ...normalizeCSSProperties(token.htmlStyle),
                   color: token.color,
                 }}
                 className={['shiki-magic-move-item', token.htmlClass].filter(Boolean).join(' ')}

src/react/utils.ts

@@ -1,9 +1,12 @@
-export function createCSSPropertiesFromString(css?: string) {
-  const style: Record<string, string> = {}
-  css?.split(';').forEach((pair) => {
-    const [key, value] = pair.split(':')
-    if (key && value)
-      style[key.trim()] = value.trim()
-  })
-  return style as React.CSSProperties
+export function normalizeCSSProperties(css?: string | Record<string, string>): React.CSSProperties {
+  if (typeof css === 'string') {
+    const style: Record<string, string> = {}
+    css?.split(';').forEach((pair) => {
+      const [key, value] = pair.split(':')
+      if (key && value)
+        style[key.trim()] = value.trim()
+    })
+    return style as React.CSSProperties
+  }
+  return css as React.CSSProperties
 }