rn-shiki 0.0.37-19 → 0.0.37-20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-19",
+  "version": "0.0.37-20",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",

package/src/utils/style-transformer.ts

@@ -7,37 +7,72 @@ export interface HighlighterStyleSheet {
 
 export type ReactStyle = Record<string, TextStyle>
 
-const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
-  color: true,
-  backgroundColor: true,
-  fontWeight: true,
-  fontStyle: true,
+// Helper function to convert hex color to RGB
+function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: Number.parseInt(result[1]!, 16),
+        g: Number.parseInt(result[2]!, 16),
+        b: Number.parseInt(result[3]!, 16),
+      }
+    : null
+}
+
+// Helper function to normalize color values
+function normalizeColor(color: string | undefined): string {
+  if (!color)
+    return 'transparent'
+
+  // Type guard to ensure color is string before we call string methods
+  if (typeof color === 'string' && color.startsWith('#')) {
+    const rgb = hexToRgb(color)
+    if (rgb) {
+      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+    }
+  }
+  return color
 }
 
 export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
   const styleMap: ReactStyle = {}
 
+  // Add default styles
+  styleMap.default = {
+    color: '#e1e4e8',
+    backgroundColor: 'transparent',
+  }
+
   tokenColors.forEach((token) => {
-    const { scope, settings } = token
+    if (!token.settings || !token.scope)
+      return
+
+    const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
     const styleEntries: Array<[string, string]> = []
 
-    if (settings.foreground)
-      styleEntries.push(['color', settings.foreground])
-    if (settings.background)
-      styleEntries.push(['backgroundColor', settings.background])
-    if (settings.fontStyle) {
-      if (settings.fontStyle.includes('italic'))
+    // Only add styles if they exist
+    if (token.settings.foreground) {
+      styleEntries.push(['color', normalizeColor(token.settings.foreground)])
+    }
+    if (token.settings.background) {
+      styleEntries.push(['backgroundColor', normalizeColor(token.settings.background)])
+    }
+    if (token.settings.fontStyle) {
+      if (token.settings.fontStyle.includes('italic')) {
         styleEntries.push(['fontStyle', 'italic'])
-      if (settings.fontStyle.includes('bold'))
+      }
+      if (token.settings.fontStyle.includes('bold')) {
         styleEntries.push(['fontWeight', 'bold'])
+      }
     }
 
     if (styleEntries.length > 0) {
-      const transformedStyle = transform(styleEntries.filter(([key]) => ALLOWED_STYLE_PROPERTIES[key]))
+      const transformedStyle = transform(styleEntries)
 
-      const scopes = Array.isArray(scope) ? scope : [scope]
-      scopes.forEach((sc: string) => {
-        styleMap[sc] = { ...(styleMap[sc] || {}), ...transformedStyle }
+      scopes.forEach((scope: string) => {
+        if (typeof scope === 'string') {
+          styleMap[scope] = { ...(styleMap[scope] || {}), ...transformedStyle }
+        }
       })
     }
   })
@@ -46,12 +81,27 @@ export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
 }
 
 export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
-  console.log('Converting theme to React Native styles:', theme)
-  if (!theme.tokenColors) {
+  if (!theme || !theme.tokenColors) {
     console.error('Provided theme does not contain \'tokenColors\'.')
     return {}
   }
-  const reactStyle = convertTokenColorsToReactStyle(theme.tokenColors)
-  console.log('Converted theme to React Native styles:', reactStyle)
-  return reactStyle
+
+  try {
+    // Convert theme colors to React Native styles
+    const styles = convertTokenColorsToReactStyle(theme.tokenColors)
+
+    // Add theme-specific base styles if they exist
+    if (theme.colors) {
+      styles.base = {
+        color: normalizeColor(theme.colors['editor.foreground']),
+        backgroundColor: normalizeColor(theme.colors['editor.background']),
+      }
+    }
+
+    return styles
+  }
+  catch {
+    console.error('Error converting theme styles')
+    return {}
+  }
 }