rn-shiki 0.0.37-7 → 0.0.37-8

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "rn-shiki",
3
3
  "type": "module",
4
- "version": "0.0.37-7",
4
+ "version": "0.0.37-8",
5
5
  "description": "Shiki syntax highlighter for React Native.",
6
6
  "author": "Ryan Skinner <hello@ryanskinner.com>",
7
7
  "license": "MIT",
@@ -34,6 +34,7 @@
34
34
  "shiki": "^1.1.7"
35
35
  },
36
36
  "dependencies": {
37
+ "css-to-react-native": "^3.2.0",
37
38
  "shiki": "^1.1.7"
38
39
  },
39
40
  "devDependencies": {
@@ -1,4 +1,5 @@
1
1
  import type { RawThemeSetting, ThemeRegistrationAny } from 'shiki'
2
+ import transform, { type StyleTuple } from 'css-to-react-native'
2
3
  import { StyleSheet, type TextStyle } from 'react-native'
3
4
 
4
5
  export interface HighlighterStyleSheet {
@@ -9,34 +10,31 @@ export interface HighlighterStyleSheet {
9
10
  [key: string]: TextStyle | Record<string, TextStyle>
10
11
  }
11
12
 
12
- interface TokenStyle {
13
- color?: string
14
- fontStyle?: 'normal' | 'italic'
15
- fontWeight?: 'normal' | 'bold'
13
+ // Allowed CSS properties for conversion
14
+ const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
15
+ color: true,
16
+ backgroundColor: true,
17
+ fontWeight: true,
18
+ fontStyle: true,
16
19
  }
17
20
 
18
- function processSettings(settings: RawThemeSetting[]): Record<string, TokenStyle> {
19
- const tokenStyles: Record<string, TokenStyle> = {}
21
+ // Cleans and transforms CSS properties to React Native compatible style
22
+ function cleanStyle(style: Record<string, any>): TextStyle {
23
+ const filteredStyles = Object.entries(style)
24
+ .filter(([key]) => ALLOWED_STYLE_PROPERTIES[key])
25
+ .map<StyleTuple>(([key, value]) => [key, value])
26
+
27
+ return transform(filteredStyles)
28
+ }
29
+
30
+ function processSettings(settings: RawThemeSetting[]): Record<string, TextStyle> {
31
+ const tokenStyles: Record<string, TextStyle> = {}
20
32
 
21
33
  settings.forEach((setting) => {
22
34
  if (!setting.scope || !setting.settings)
23
35
  return
24
36
 
25
- const style: TokenStyle = {}
26
- const { foreground, fontStyle } = setting.settings
27
-
28
- if (foreground) {
29
- style.color = foreground
30
- }
31
-
32
- if (fontStyle) {
33
- if (fontStyle.includes('italic')) {
34
- style.fontStyle = 'italic'
35
- }
36
- if (fontStyle.includes('bold')) {
37
- style.fontWeight = 'bold'
38
- }
39
- }
37
+ const style = cleanStyle(setting.settings)
40
38
 
41
39
  // Handle single scope
42
40
  if (typeof setting.scope === 'string') {
@@ -67,11 +65,7 @@ export function convertShikiTheme(theme: ThemeRegistrationAny): ReturnType<typeo
67
65
 
68
66
  // Convert token styles to RN styles
69
67
  const tokenStylesMap = Object.entries(tokenStyles).reduce<Record<string, TextStyle>>((acc, [scope, style]) => {
70
- acc[`token-${scope.replace(/\./g, '-')}`] = {
71
- color: style.color,
72
- ...(style.fontStyle && { fontStyle: style.fontStyle }),
73
- ...(style.fontWeight && { fontWeight: style.fontWeight }),
74
- }
68
+ acc[`token-${scope.replace(/\./g, '-')}`] = style
75
69
  return acc
76
70
  }, {})
77
71
 
@@ -95,14 +89,3 @@ export function convertShikiTheme(theme: ThemeRegistrationAny): ReturnType<typeo
95
89
 
96
90
  return StyleSheet.create(completeStyles)
97
91
  }
98
-
99
- export function getTokenStyle(theme: HighlighterStyleSheet, tokenTypes: string[], defaultColor: string): TextStyle {
100
- const matchingStyles = tokenTypes.map(type => theme.styles[`token-${type.replace(/\./g, '-')}`]).filter(Boolean)
101
-
102
- return {
103
- ...theme.token,
104
- color: matchingStyles[0]?.color || defaultColor,
105
- ...(matchingStyles.some(s => s?.fontStyle === 'italic') && { fontStyle: 'italic' }),
106
- ...(matchingStyles.some(s => s?.fontWeight === 'bold') && { fontWeight: 'bold' }),
107
- }
108
- }