rn-shiki 0.0.37-15 → 0.0.37-16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-15",
+  "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,35 +1,57 @@
-import type { CSSProperties } from 'react'
 import type { TextStyle } from '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]) => {
-        // Filter the styles based on allowed properties
-        const filteredStyle = Object.fromEntries(
-          Object.entries(style).filter(([property]) => ALLOWED_STYLE_PROPERTIES[property]),
-        )
+export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
+  const styleMap: ReactStyle = {}
+
+  tokenColors.forEach((token) => {
+    const { scope, settings } = token
+    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'))
+        styleEntries.push(['fontStyle', 'italic'])
+      if (settings.fontStyle.includes('bold'))
+        styleEntries.push(['fontWeight', 'bold'])
+    }
 
-        // Convert the filtered style to React Native style
-        const rnStyle: TextStyle = transform(Object.entries(filteredStyle)) as TextStyle
+    if (styleEntries.length > 0) {
+      const transformedStyle = transform(styleEntries.filter(([key]) => ALLOWED_STYLE_PROPERTIES[key]))
 
-        console.log(`Converted style for ${className}:`, rnStyle)
+      const scopes = Array.isArray(scope) ? scope : [scope]
+      scopes.forEach((sc: string) => {
+        styleMap[sc] = { ...(styleMap[sc] || {}), ...transformedStyle }
+      })
+    }
+  })
+
+  return styleMap
+}
 
-        return [className, rnStyle] // Return the class name and the converted style
-      }),
-  )
+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
 }