rn-shiki 0.0.37-25 → 0.0.37-27

package/package.json

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

package/src/syntax/highlighter.ts

@@ -14,7 +14,7 @@ async function initializeHighlighter(langs: LanguageInput[], themes: ThemeInput[
     return await createHighlighterCore({
       langs,
       themes,
-      engine,
+      engine, // Pass the configured engine
     })
   }
   catch (err) {

package/src/utils/style-transformer.ts

@@ -1,5 +1,4 @@
 import type { TextStyle } from 'react-native'
-import transform from 'css-to-react-native'
 
 export interface HighlighterStyleSheet {
   [key: string]: TextStyle
@@ -9,7 +8,15 @@ export type ReactStyle = Record<string, TextStyle>
 
 // 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)
+  // Remove # if present
+  hex = hex.replace(/^#/, '')
+
+  // Handle both 3 and 6 digit hex
+  if (hex.length === 3) {
+    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
+  }
+
+  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),
@@ -19,18 +26,25 @@ function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
     : null
 }
 
-// Helper function to normalize color values
 function normalizeColor(color: string | undefined): string {
-  if (!color)
+  if (!color) {
     return 'transparent'
+  }
 
-  // Type guard to ensure color is string before we call string methods
-  if (typeof color === 'string' && color.startsWith('#')) {
+  // Handle hex colors
+  if (color.startsWith('#')) {
     const rgb = hexToRgb(color)
     if (rgb) {
       return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
     }
   }
+
+  // Handle rgb/rgba
+  if (color.startsWith('rgb')) {
+    return color
+  }
+
+  // Handle named colors
   return color
 }
 
@@ -44,64 +58,84 @@ export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
   }
 
   tokenColors.forEach((token) => {
-    if (!token.settings || !token.scope)
+    if (!token.settings)
+      return
+
+    // Handle global theme settings
+    if (!token.scope) {
+      if (token.settings.foreground) {
+        styleMap.default!.color = normalizeColor(token.settings.foreground)
+      }
+      if (token.settings.background) {
+        styleMap.default!.backgroundColor = normalizeColor(token.settings.background)
+      }
       return
+    }
 
     const scopes = Array.isArray(token.scope) ? token.scope : [token.scope]
-    const styleEntries: Array<[string, string]> = []
+    const style: TextStyle = {}
 
-    // Only add styles if they exist
     if (token.settings.foreground) {
-      styleEntries.push(['color', normalizeColor(token.settings.foreground)])
+      style.color = normalizeColor(token.settings.foreground)
     }
     if (token.settings.background) {
-      styleEntries.push(['backgroundColor', normalizeColor(token.settings.background)])
+      style.backgroundColor = normalizeColor(token.settings.background)
     }
     if (token.settings.fontStyle) {
       if (token.settings.fontStyle.includes('italic')) {
-        styleEntries.push(['fontStyle', 'italic'])
+        style.fontStyle = 'italic'
       }
       if (token.settings.fontStyle.includes('bold')) {
-        styleEntries.push(['fontWeight', 'bold'])
+        style.fontWeight = 'bold'
       }
     }
 
-    if (styleEntries.length > 0) {
-      const transformedStyle = transform(styleEntries)
-
-      scopes.forEach((scope: string) => {
-        if (typeof scope === 'string') {
-          styleMap[scope] = { ...(styleMap[scope] || {}), ...transformedStyle }
-        }
-      })
-    }
+    scopes.forEach((scope: string) => {
+      styleMap[scope] = { ...(styleMap[scope] || {}), ...style }
+    })
   })
 
   return styleMap
 }
 
-export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
-  if (!theme || !theme.tokenColors) {
-    console.error('Provided theme does not contain \'tokenColors\'.')
+interface ThemeColors {
+  'editor.background'?: string
+  'editor.foreground'?: string
+  [key: string]: string | undefined
+}
+
+interface Theme {
+  colors?: ThemeColors
+  tokenColors?: any[]
+}
+
+export function getRNStylesFromShikiStyle(theme: Theme): HighlighterStyleSheet {
+  if (!theme)
     return {}
-  }
 
   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']),
-      }
+    // Start with default styles
+    const styles: HighlighterStyleSheet = {
+      editor: {
+        backgroundColor: normalizeColor(theme.colors?.['editor.background']),
+      },
+      base: {
+        color: normalizeColor(theme.colors?.['editor.foreground']),
+      },
+    }
+
+    // Process token colors
+    if (theme.tokenColors) {
+      const tokenStyles = convertTokenColorsToReactStyle(theme.tokenColors)
+      Object.assign(styles, tokenStyles)
     }
 
     return styles
   }
   catch {
-    console.error('Error converting theme styles')
-    return {}
+    return {
+      editor: { backgroundColor: '#1e1e1e' },
+      base: { color: '#d4d4d4' },
+    }
   }
 }