Skip to content

Commit eb93db6

Browse files
thecrypticacethecrypticace
committed
wip
1 parent 0ab91c4 commit eb93db6

File tree

3 files changed

+98
-74
lines changed

3 files changed

+98
-74
lines changed

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

Lines changed: 0 additions & 21 deletions
This file was deleted.

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

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,82 @@
11
import type { State, TailwindCssSettings } from '../state'
22

33
import { evaluateExpression } from './calc'
4-
import { replaceCssVars, replaceCssCalc } from './replacements'
4+
import { replaceCssVars, replaceCssCalc, Range } from './replacements'
55
import { addPixelEquivalentsToValue } from '../pixelEquivalents'
6+
import { applyComments, Comment } from '../comments'
67

78
export function addThemeValues(css: string, state: State, settings: TailwindCssSettings) {
8-
// TODO: Add fallbacks to variables with their theme values
9-
// Ideally these would just be commentss like
10-
// `var(--foo) /* 3rem = 48px */` or
11-
// `calc(var(--spacing) * 5) /* 1.25rem = 20px */`
9+
let comments: Comment[] = []
10+
11+
let replaced: Range[] = []
1212

1313
css = replaceCssCalc(css, (expr) => {
1414
let inlined = replaceCssVars(expr.value, ({ name }) => {
1515
if (!name.startsWith('--')) return null
1616

1717
let value = state.designSystem.resolveThemeValue?.(name) ?? null
18-
if (value !== null) return value
18+
if (value === null) return null
1919

20-
return null
20+
return value
2121
})
2222

2323
let evaluated = evaluateExpression(inlined)
2424

2525
// No changes were made so we can just return the original expression
26-
if (expr.value === evaluated) return expr.value
26+
if (expr.value === evaluated) return null
27+
if (!evaluated) return null
28+
29+
replaced.push(expr.range)
30+
31+
let px = addPixelEquivalentsToValue(evaluated, settings.rootFontSize, false)
32+
if (px !== evaluated) {
33+
comments.push({
34+
index: expr.range.end + 1,
35+
value: `${evaluated} = ${px}`,
36+
})
2737

28-
let equiv = addPixelEquivalentsToValue(evaluated, settings.rootFontSize, false)
29-
if (equiv !== evaluated) {
30-
return `calc(${expr}) /* ${evaluated} = ${equiv} */`
38+
return null
3139
}
3240

33-
return `calc(${expr}) /* ${evaluated} */`
41+
comments.push({
42+
index: expr.range.end + 1,
43+
value: evaluated,
44+
})
45+
46+
return null
3447
})
3548

36-
css = replaceCssVars(css, ({ name }) => {
49+
css = replaceCssVars(css, ({ name, range }) => {
3750
if (!name.startsWith('--')) return null
3851

52+
for (let r of replaced) {
53+
if (r.start <= range.start && r.end >= range.end) {
54+
return null
55+
}
56+
}
57+
3958
let value = state.designSystem.resolveThemeValue?.(name) ?? null
4059
if (value === null) return null
4160

42-
let equiv = addPixelEquivalentsToValue(value, settings.rootFontSize, false)
43-
if (equiv !== value) {
44-
return `var(${name}) /* ${value} = ${equiv} */`
61+
let px = addPixelEquivalentsToValue(value, settings.rootFontSize, false)
62+
if (px !== value) {
63+
comments.push({
64+
index: range.end + 1,
65+
value: `${value} = ${px}`,
66+
})
67+
68+
return null
4569
}
4670

47-
return `var(${name}) /* ${value} */`
71+
comments.push({
72+
index: range.end + 1,
73+
value,
74+
})
75+
76+
return null
4877
})
4978

50-
return css
79+
comments.sort((a, b) => a.index - b.index)
80+
81+
return applyComments(css, comments)
5182
}

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

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { expect, test } from 'vitest'
2-
import { evaluateExpression, replaceCssCalc, replaceCssVarsWithFallbacks } from './index'
3-
import { State } from '../state'
2+
import {
3+
addThemeValues,
4+
evaluateExpression,
5+
replaceCssCalc,
6+
replaceCssVarsWithFallbacks,
7+
} from './index'
8+
import { State, TailwindCssSettings } from '../state'
49
import { DesignSystem } from '../v4'
510

611
test('replacing CSS variables with their fallbacks (when they have them)', () => {
@@ -62,36 +67,45 @@ test('Evaluating CSS calc expressions', () => {
6267
)
6368
})
6469

65-
// test('Inlicing calc expressions using the design system', () => {
66-
// let map = new Map<string, string>([['--spacing', '0.25rem']])
67-
68-
// let state: State = {
69-
// enabled: true,
70-
// designSystem: {
71-
// resolveThemeValue: (name) => map.get(name) ?? null,
72-
// } as DesignSystem,
73-
// }
74-
75-
// expect(inlineCalc(state, 'calc(var(--spacing) * 4)')).toBe('1rem')
76-
// expect(inlineCalc(state, 'calc(var(--spacing) / 4)')).toBe('0.0625rem')
77-
// expect(inlineCalc(state, 'calc(var(--spacing) * 1)')).toBe('0.25rem')
78-
// expect(inlineCalc(state, 'calc(var(--spacing) * -1)')).toBe('-0.25rem')
79-
// expect(inlineCalc(state, 'calc(1.25 / 0.875)')).toBe('1.4286')
80-
// })
81-
82-
// test('Inlicing calc expressions using the design system', () => {
83-
// let map = new Map<string, string>([['--spacing', '0.25rem']])
84-
85-
// let state: State = {
86-
// enabled: true,
87-
// designSystem: {
88-
// resolveThemeValue: (name) => map.get(name) ?? null,
89-
// } as DesignSystem,
90-
// }
91-
92-
// let settings: TailwindCssSettings = {
93-
// rootFontSize: 10,
94-
// } as any
95-
96-
// expect(addThemeValues('calc(var(--spacing) * 4)', state, settings)).toBe('1rem')
97-
// })
70+
test('Inlicing calc expressions using the design system', () => {
71+
let map = new Map<string, string>([['--spacing', '0.25rem']])
72+
73+
let state: State = {
74+
enabled: true,
75+
designSystem: {
76+
resolveThemeValue: (name) => map.get(name) ?? null,
77+
} as DesignSystem,
78+
}
79+
80+
let settings: TailwindCssSettings = {
81+
rootFontSize: 10,
82+
} as any
83+
84+
expect(addThemeValues('calc(var(--spacing) * 4)', state, settings)).toBe(
85+
'calc(var(--spacing) * 4) /* 1rem = 10px */',
86+
)
87+
88+
expect(addThemeValues('calc(var(--spacing) / 4)', state, settings)).toBe(
89+
'calc(var(--spacing) / 4) /* 0.0625rem = 0.625px */',
90+
)
91+
92+
expect(addThemeValues('calc(var(--spacing) * 1)', state, settings)).toBe(
93+
'calc(var(--spacing) * 1) /* 0.25rem = 2.5px */',
94+
)
95+
96+
expect(addThemeValues('calc(var(--spacing) * -1)', state, settings)).toBe(
97+
'calc(var(--spacing) * -1) /* -0.25rem = -2.5px */',
98+
)
99+
100+
expect(addThemeValues('calc(var(--spacing) + 1rem)', state, settings)).toBe(
101+
'calc(var(--spacing) + 1rem) /* 1.25rem = 12.5px */',
102+
)
103+
104+
expect(addThemeValues('calc(var(--spacing) - 1rem)', state, settings)).toBe(
105+
'calc(var(--spacing) - 1rem) /* -0.75rem = -7.5px */',
106+
)
107+
108+
expect(addThemeValues('calc(var(--spacing) + 1px)', state, settings)).toBe(
109+
'calc(var(--spacing) /* 0.25rem = 2.5px */ + 1px)',
110+
)
111+
})

0 commit comments

Comments
 (0)