rn-shiki 0.0.37-12 → 0.0.37-14

package/package.json

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

package/src/components/syntax/SyntaxHighlighter.tsx

@@ -23,8 +23,7 @@ const styles = StyleSheet.create({
 })
 
 const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({ text, language, languageId, theme }) => {
-  console.log('Received theme:', theme)
-
+  console.log('theme:', theme)
   const stylesheet = useMemo(() => {
     const styles = getRNStylesFromShikiStyle(theme as ReactStyle)
     console.log('Generated stylesheet:', styles)

package/src/utils/style-transformer.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react'
 import type { TextStyle } from 'react-native'
-import transform from 'css-to-react-native'
+import transform, { type StyleTuple } from 'css-to-react-native'
 
 export interface HighlighterStyleSheet {
   [key: string]: TextStyle
@@ -16,20 +16,15 @@ const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
 }
 
 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]),
-        )
+  return Object.fromEntries(Object.entries(shikiStyle).map(([className, style]) => [className, cleanStyle(style)]))
+}
 
-        // Convert the filtered style to React Native style
-        const rnStyle: TextStyle = transform(Object.entries(filteredStyle)) as TextStyle
+export function cleanStyle(style: CSSProperties) {
+  const styles = Object.entries(style)
+    .filter(([key]) => ALLOWED_STYLE_PROPERTIES[key])
+    .map<StyleTuple>(([key, value]) => [key, value])
 
-        console.log(`Converted style for ${className}:`, rnStyle)
+  console.log('Filtered styles:', styles) // Add this line
 
-        return [className, rnStyle] // Return the class name and the converted style
-      }),
-  )
+  return transform(styles)
 }