rn-shiki 0.0.37-15 → 0.0.37-16

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-15",
4
+ "version": "0.0.37-16",
5
5
  "description": "Shiki syntax highlighter for React Native.",
6
6
  "author": "Ryan Skinner <hello@ryanskinner.com>",
7
7
  "license": "MIT",
@@ -1,35 +1,57 @@
1
- import type { CSSProperties } from 'react'
2
1
  import type { TextStyle } from 'react-native'
3
2
  import transform from 'css-to-react-native'
4
3
 
5
4
  export interface HighlighterStyleSheet {
6
5
  [key: string]: TextStyle
7
6
  }
8
- export type ReactStyle = Record<string, CSSProperties>
7
+
8
+ export type ReactStyle = Record<string, TextStyle>
9
9
 
10
10
  const ALLOWED_STYLE_PROPERTIES: Record<string, boolean> = {
11
11
  color: true,
12
- background: true,
13
12
  backgroundColor: true,
14
13
  fontWeight: true,
15
14
  fontStyle: true,
16
15
  }
17
16
 
18
- export function getRNStylesFromShikiStyle(shikiStyle: ReactStyle): HighlighterStyleSheet {
19
- return Object.fromEntries(
20
- Object.entries(shikiStyle)
21
- .map(([className, style]) => {
22
- // Filter the styles based on allowed properties
23
- const filteredStyle = Object.fromEntries(
24
- Object.entries(style).filter(([property]) => ALLOWED_STYLE_PROPERTIES[property]),
25
- )
17
+ export function convertTokenColorsToReactStyle(tokenColors: any[]): ReactStyle {
18
+ const styleMap: ReactStyle = {}
19
+
20
+ tokenColors.forEach((token) => {
21
+ const { scope, settings } = token
22
+ const styleEntries: Array<[string, string]> = []
23
+
24
+ if (settings.foreground)
25
+ styleEntries.push(['color', settings.foreground])
26
+ if (settings.background)
27
+ styleEntries.push(['backgroundColor', settings.background])
28
+ if (settings.fontStyle) {
29
+ if (settings.fontStyle.includes('italic'))
30
+ styleEntries.push(['fontStyle', 'italic'])
31
+ if (settings.fontStyle.includes('bold'))
32
+ styleEntries.push(['fontWeight', 'bold'])
33
+ }
26
34
 
27
- // Convert the filtered style to React Native style
28
- const rnStyle: TextStyle = transform(Object.entries(filteredStyle)) as TextStyle
35
+ if (styleEntries.length > 0) {
36
+ const transformedStyle = transform(styleEntries.filter(([key]) => ALLOWED_STYLE_PROPERTIES[key]))
29
37
 
30
- console.log(`Converted style for ${className}:`, rnStyle)
38
+ const scopes = Array.isArray(scope) ? scope : [scope]
39
+ scopes.forEach((sc: string) => {
40
+ styleMap[sc] = { ...(styleMap[sc] || {}), ...transformedStyle }
41
+ })
42
+ }
43
+ })
44
+
45
+ return styleMap
46
+ }
31
47
 
32
- return [className, rnStyle] // Return the class name and the converted style
33
- }),
34
- )
48
+ export function getRNStylesFromShikiStyle(theme: any): HighlighterStyleSheet {
49
+ console.log('Converting theme to React Native styles:', theme)
50
+ if (!theme.tokenColors) {
51
+ console.error('Provided theme does not contain \'tokenColors\'.')
52
+ return {}
53
+ }
54
+ const reactStyle = convertTokenColorsToReactStyle(theme.tokenColors)
55
+ console.log('Converted theme to React Native styles:', reactStyle)
56
+ return reactStyle
35
57
  }