rn-shiki 0.0.37-14 → 0.0.37-16

package/package.json

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

package/src/utils/style-transformer.ts

@@ -1,30 +1,57 @@
-import type { CSSProperties } from 'react'
 import type { TextStyle } from 'react-native'
-import transform, { type StyleTuple } from 'css-to-react-native'
+import transform from 'css-to-react-native'
 
 export interface HighlighterStyleSheet {
   [key: string]: TextStyle
 }
-export type ReactStyle = Record<string, CSSProperties>
+
+export type ReactStyle = Record<string, TextStyle>
 
 const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
   color: true,
-  background: true,
   backgroundColor: true,
   fontWeight: true,
   fontStyle: true,
 }
 
-export function getRNStylesFromShikiStyle(shikiStyle: ReactStyle): HighlighterStyleSheet {
-  return Object.fromEntries(Object.entries(shikiStyle).map(([className, style]) => [className, cleanStyle(style)]))
-}
+export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
+  const styleMap: ReactStyle = {}
+
+  tokenColors.forEach((token) => {
+    const { scope, settings } = token
+    const styleEntries: Array<[string, string]> = []
 
-export function cleanStyle(style: CSSProperties) {
-  const styles = Object.entries(style)
-    .filter(([key]) => ALLOWED_STYLE_PROPERTIES[key])
-    .map<StyleTuple>(([key, value]) => [key, value])
+    if (settings.foreground)
+      styleEntries.push(['color', settings.foreground])
+    if (settings.background)
+      styleEntries.push(['backgroundColor', settings.background])
+    if (settings.fontStyle) {
+      if (settings.fontStyle.includes('italic'))
+        styleEntries.push(['fontStyle', 'italic'])
+      if (settings.fontStyle.includes('bold'))
+        styleEntries.push(['fontWeight', 'bold'])
+    }
 
-  console.log('Filtered styles:', styles) // Add this line
+    if (styleEntries.length > 0) {
+      const transformedStyle = transform(styleEntries.filter(([key]) => ALLOWED_STYLE_PROPERTIES[key]))
+
+      const scopes = Array.isArray(scope) ? scope : [scope]
+      scopes.forEach((sc: string) => {
+        styleMap[sc] = { ...(styleMap[sc] || {}), ...transformedStyle }
+      })
+    }
+  })
+
+  return styleMap
+}
 
-  return transform(styles)
+export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
+  console.log('Converting theme to React Native styles:', theme)
+  if (!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
 }