Skip to content

Commit 4bea5c7

Browse files
thecrypticacethecrypticace
committed
Refactor
1 parent 22438ce commit 4bea5c7

File tree

4 files changed

+86
-66
lines changed

4 files changed

+86
-66
lines changed

‎packages/tailwindcss-language-service/src/util/rewriting/add-theme-values.ts

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,18 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
1414
let replaced: Range[] = []
1515

1616
css = replaceCssCalc(css, (expr) => {
17-
let inlined = replaceCssVars(expr.value, ({ name }) => {
18-
if (!name.startsWith('--')) return null
17+
let inlined = replaceCssVars(expr.value, {
18+
replace({ name }) {
19+
if (!name.startsWith('--')) return null
1920

20-
let value = resolveVariableValue(state.designSystem, name)
21-
if (value === null) return null
21+
let value = resolveVariableValue(state.designSystem, name)
22+
if (value === null) return null
2223

23-
// Inline CSS calc expressions in theme values
24-
value = replaceCssCalc(value, (expr) => evaluateExpression(expr.value))
24+
// Inline CSS calc expressions in theme values
25+
value = replaceCssCalc(value, (expr) => evaluateExpression(expr.value))
2526

26-
return value
27+
return value
28+
},
2729
})
2830

2931
let evaluated = evaluateExpression(inlined)
@@ -62,53 +64,55 @@ export function addThemeValues(css: string, state: State, settings: TailwindCssS
6264
return null
6365
})
6466

65-
css = replaceCssVars(css, ({ name, range }) => {
66-
if (!name.startsWith('--')) return null
67+
css = replaceCssVars(css, {
68+
replace({ name, range }) {
69+
if (!name.startsWith('--')) return null
70+
71+
for (let r of replaced) {
72+
if (r.start <= range.start && r.end >= range.end) {
73+
return null
74+
}
75+
}
76+
77+
let value = resolveVariableValue(state.designSystem, name)
78+
if (value === null) return null
79+
80+
let px = addPixelEquivalentsToValue(value, settings.rootFontSize, false)
81+
if (px !== value) {
82+
comments.push({
83+
index: range.end + 1,
84+
value: `${value} = ${px}`,
85+
})
6786

68-
for (let r of replaced) {
69-
if (r.start <= range.start && r.end >= range.end) {
7087
return null
7188
}
72-
}
7389

74-
let value = resolveVariableValue(state.designSystem, name)
75-
if (value === null) return null
90+
let color = getEquivalentColor(value)
91+
if (color !== value) {
92+
comments.push({
93+
index: range.end + 1,
94+
value: `${value} = ${color}`,
95+
})
7696

77-
let px = addPixelEquivalentsToValue(value, settings.rootFontSize, false)
78-
if (px !== value) {
79-
comments.push({
80-
index: range.end + 1,
81-
value: `${value} = ${px}`,
82-
})
97+
return null
98+
}
8399

84-
return null
85-
}
100+
// Inline CSS calc expressions in theme values
101+
value = replaceCssCalc(value, (expr) => {
102+
let evaluated = evaluateExpression(expr.value)
103+
if (!evaluated) return null
104+
if (evaluated === expr.value) return null
105+
106+
return `calc(${expr.value}) ≈ ${evaluated}`
107+
})
86108

87-
let color = getEquivalentColor(value)
88-
if (color !== value) {
89109
comments.push({
90110
index: range.end + 1,
91-
value: `${value} = ${color}`,
111+
value,
92112
})
93113

94114
return null
95-
}
96-
97-
// Inline CSS calc expressions in theme values
98-
value = replaceCssCalc(value, (expr) => {
99-
let evaluated = evaluateExpression(expr.value)
100-
if (!evaluated) return null
101-
if (evaluated === expr.value) return null
102-
103-
return `calc(${expr.value}) ≈ ${evaluated}`
104-
})
105-
106-
comments.push({
107-
index: range.end + 1,
108-
value,
109-
})
110-
111-
return null
115+
},
112116
})
113117

114118
return applyComments(css, comments)

‎packages/tailwindcss-language-service/src/util/rewriting/inline-theme-values.ts

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,29 @@ export function inlineThemeValues(css: string, state: State) {
88
if (!state.designSystem) return css
99

1010
css = replaceCssCalc(css, (expr) => {
11-
let inlined = replaceCssVars(expr.value, ({ name, fallback }) => {
12-
if (!name.startsWith('--')) return null
11+
let inlined = replaceCssVars(expr.value, {
12+
replace({ name, fallback }) {
13+
if (!name.startsWith('--')) return null
1314

14-
let value = resolveVariableValue(state.designSystem, name)
15-
if (value === null) return fallback
15+
let value = resolveVariableValue(state.designSystem, name)
16+
if (value === null) return fallback
1617

17-
return value
18+
return value
19+
},
1820
})
1921

2022
return evaluateExpression(inlined)
2123
})
2224

23-
css = replaceCssVars(css, ({ name, fallback }) => {
24-
if (!name.startsWith('--')) return null
25+
css = replaceCssVars(css, {
26+
replace({ name, fallback }) {
27+
if (!name.startsWith('--')) return null
2528

26-
let value = resolveVariableValue(state.designSystem, name)
27-
if (value === null) return fallback
29+
let value = resolveVariableValue(state.designSystem, name)
30+
if (value === null) return fallback
2831

29-
return value
32+
return value
33+
},
3034
})
3135

3236
return css

‎packages/tailwindcss-language-service/src/util/rewriting/replacements.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,22 @@ export interface Range {
1616
end: number
1717
}
1818

19+
export interface ReplacerOptions {
20+
/**
21+
* How to replace the CSS variable
22+
*/
23+
replace: CssVarReplacer
24+
}
25+
1926
export type CssVarReplacer = (node: CssVariable) => string | null
2027

2128
/**
2229
* Replace all var expressions in a string using the replacer function
2330
*/
24-
export function replaceCssVars(str: string, replace: CssVarReplacer): string {
31+
export function replaceCssVars(
32+
str: string,
33+
{ replace, recursive = true }: ReplacerOptions,
34+
): string {
2535
for (let i = 0; i < str.length; ++i) {
2636
if (!str.startsWith('var(', i)) continue
2737

‎packages/tailwindcss-language-service/src/util/rewriting/var-fallbacks.ts

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,22 @@ import { resolveVariableValue } from './lookup'
33
import { replaceCssVars } from './replacements'
44

55
export function replaceCssVarsWithFallbacks(state: State, str: string): string {
6-
return replaceCssVars(str, ({ name, fallback }) => {
7-
// Replace with the value from the design system first. The design system
8-
// take precedences over other sources as that emulates the behavior of a
9-
// browser where the fallback is only used if the variable is defined.
10-
if (state.designSystem && name.startsWith('--')) {
11-
let value = resolveVariableValue(state.designSystem, name)
12-
if (value !== null) return value
13-
}
6+
return replaceCssVars(str, {
7+
replace({ name, fallback }) {
8+
// Replace with the value from the design system first. The design system
9+
// take precedences over other sources as that emulates the behavior of a
10+
// browser where the fallback is only used if the variable is defined.
11+
if (state.designSystem && name.startsWith('--')) {
12+
let value = resolveVariableValue(state.designSystem, name)
13+
if (value !== null) return value
14+
}
1415

15-
if (fallback) {
16-
return fallback
17-
}
16+
if (fallback) {
17+
return fallback
18+
}
1819

19-
// Don't touch it since there's no suitable replacement
20-
return null
20+
// Don't touch it since there's no suitable replacement
21+
return null
22+
},
2123
})
2224
}

0 commit comments

Comments
 (0)