@@ -35,6 +35,25 @@ export function generateRules(
35
35
}
36
36
}
37
37
38
+ export function addThemeValues ( css : string , state : State ) {
39
+ if ( ! state . designSystem ) return css
40
+
41
+ // Add fallbacks to variables with their theme values
42
+ // Ideally these would just be commentss like
43
+ // `var(--foo) /* 3rem = 48px */` or
44
+ // `calc(var(--spacing) * 5) /* 1.25rem = 20px */`
45
+ css = replaceCssVars ( css , ( name ) => {
46
+ if ( ! name . startsWith ( '--' ) ) return null
47
+
48
+ let value = state . designSystem . resolveThemeValue ?.( name ) ?? null
49
+ if ( value === null ) return null
50
+
51
+ return `var(${ name } , ${ value } )`
52
+ } )
53
+
54
+ return css
55
+ }
56
+
38
57
export async function stringifyRoot ( state : State , root : Root , uri ?: string ) : Promise < string > {
39
58
let settings = await state . editor . getConfiguration ( uri )
40
59
let clone = root . clone ( )
@@ -45,21 +64,7 @@ export async function stringifyRoot(state: State, root: Root, uri?: string): Pro
45
64
46
65
let css = clone . toString ( )
47
66
48
- // Add fallbacks to variables with their theme values
49
- // Ideally these would just be commentss like
50
- // `var(--foo) /* 3rem = 48px */` or
51
- // `calc(var(--spacing) * 5) /* 1.25rem = 20px */`
52
- if ( state . designSystem ) {
53
- css = replaceCssVars ( css , ( name ) => {
54
- if ( ! name . startsWith ( '--' ) ) return null
55
-
56
- let value = state . designSystem . resolveThemeValue ?.( name ) ?? null
57
- if ( value === null ) return null
58
-
59
- return `var(${ name } , ${ value } )`
60
- } )
61
- }
62
-
67
+ css = addThemeValues ( css , state )
63
68
css = addEquivalents ( css , settings . tailwindCSS )
64
69
65
70
let identSize = state . v4 ? 2 : 4
0 commit comments