rn-shiki 0.0.37-6 → 0.0.37-8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-shiki",
   "type": "module",
-  "version": "0.0.37-6",
+  "version": "0.0.37-8",
   "description": "Shiki syntax highlighter for React Native.",
   "author": "Ryan Skinner <hello@ryanskinner.com>",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "shiki": "^1.1.7"
   },
   "dependencies": {
+    "css-to-react-native": "^3.2.0",
     "shiki": "^1.1.7"
   },
   "devDependencies": {

package/src/syntax/{highlighter/index.ts → highlighter.ts}

@@ -1,5 +1,5 @@
 import type { LanguageInput, ThemedToken, ThemeInput } from 'shiki'
-import type { TokenType } from '../../types/shiki'
+import type { TokenType } from '../types/shiki'
 import { createHighlighterCore } from 'shiki/dist/core.mjs'
 import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs'
 

package/src/utils/style-transformer.ts

@@ -1,4 +1,5 @@
 import type { RawThemeSetting, ThemeRegistrationAny } from 'shiki'
+import transform, { type StyleTuple } from 'css-to-react-native'
 import { StyleSheet, type TextStyle } from 'react-native'
 
 export interface HighlighterStyleSheet {
@@ -9,34 +10,31 @@ export interface HighlighterStyleSheet {
   [key: string]: TextStyle | Record<string, TextStyle>
 }
 
-interface TokenStyle {
-  color?: string
-  fontStyle?: 'normal' | 'italic'
-  fontWeight?: 'normal' | 'bold'
+// Allowed CSS properties for conversion
+const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
+  color: true,
+  backgroundColor: true,
+  fontWeight: true,
+  fontStyle: true,
 }
 
-function processSettings(settings: RawThemeSetting[]): Record<string, TokenStyle> {
-  const tokenStyles: Record<string, TokenStyle> = {}
+// Cleans and transforms CSS properties to React Native compatible style
+function cleanStyle(style: Record<string, any>): TextStyle {
+  const filteredStyles = Object.entries(style)
+    .filter(([key]) => ALLOWED_STYLE_PROPERTIES[key])
+    .map<StyleTuple>(([key, value]) => [key, value])
+
+  return transform(filteredStyles)
+}
+
+function processSettings(settings: RawThemeSetting[]): Record<string, TextStyle> {
+  const tokenStyles: Record<string, TextStyle> = {}
 
   settings.forEach((setting) => {
     if (!setting.scope || !setting.settings)
       return
 
-    const style: TokenStyle = {}
-    const { foreground, fontStyle } = setting.settings
-
-    if (foreground) {
-      style.color = foreground
-    }
-
-    if (fontStyle) {
-      if (fontStyle.includes('italic')) {
-        style.fontStyle = 'italic'
-      }
-      if (fontStyle.includes('bold')) {
-        style.fontWeight = 'bold'
-      }
-    }
+    const style = cleanStyle(setting.settings)
 
     // Handle single scope
     if (typeof setting.scope === 'string') {
@@ -67,11 +65,7 @@ export function convertShikiTheme(theme: ThemeRegistrationAny): ReturnType<typeo
 
   // Convert token styles to RN styles
   const tokenStylesMap = Object.entries(tokenStyles).reduce<Record<string, TextStyle>>((acc, [scope, style]) => {
-    acc[`token-${scope.replace(/\./g, '-')}`] = {
-      color: style.color,
-      ...(style.fontStyle && { fontStyle: style.fontStyle }),
-      ...(style.fontWeight && { fontWeight: style.fontWeight }),
-    }
+    acc[`token-${scope.replace(/\./g, '-')}`] = style
     return acc
   }, {})
 
@@ -95,14 +89,3 @@ export function convertShikiTheme(theme: ThemeRegistrationAny): ReturnType<typeo
 
   return StyleSheet.create(completeStyles)
 }
-
-export function getTokenStyle(theme: HighlighterStyleSheet, tokenTypes: string[], defaultColor: string): TextStyle {
-  const matchingStyles = tokenTypes.map(type => theme.styles[`token-${type.replace(/\./g, '-')}`]).filter(Boolean)
-
-  return {
-    ...theme.token,
-    color: matchingStyles[0]?.color || defaultColor,
-    ...(matchingStyles.some(s => s?.fontStyle === 'italic') && { fontStyle: 'italic' }),
-    ...(matchingStyles.some(s => s?.fontWeight === 'bold') && { fontWeight: 'bold' }),
-  }
-}