Skip to content

Commit 38cef34

Browse files
thecrypticacethecrypticace
committed
Add test for rewriting input CSS
1 parent 827bf7d commit 38cef34

File tree

1 file changed

+286
-0
lines changed

1 file changed

+286
-0
lines changed

‎packages/tailwindcss-language-server/src/language/rewriting.test.ts

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
import { describe, expect, test } from 'vitest'
2+
import { rewriteCss } from './rewriting'
3+
import dedent from 'dedent'
4+
5+
// TODO: Remove once the bundled CSS language service is updated
6+
test('@layer statements are removed', () => {
7+
let input = [
8+
//
9+
'@layer theme, base, components, utilities;',
10+
'@import "tailwindcss";',
11+
]
12+
13+
let output = [
14+
//
15+
'', // wrong
16+
'@import "tailwindcss" ;',
17+
]
18+
19+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
20+
})
21+
22+
test('@layer blocks', () => {
23+
let input = [
24+
//
25+
'@layer utilities {',
26+
' .foo {',
27+
' color: red;',
28+
' }',
29+
'}',
30+
]
31+
32+
let output = [
33+
//
34+
'@media(℘) {',
35+
' .foo {',
36+
' color: red;',
37+
' }',
38+
'}',
39+
]
40+
41+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
42+
})
43+
44+
test('@utility', () => {
45+
let input = [
46+
//
47+
'@utility foo {',
48+
' color: red;',
49+
'}',
50+
'@utility foo-* {',
51+
' color: red;',
52+
'}',
53+
]
54+
55+
let output = [
56+
//
57+
'.placeholder {', // wrong
58+
' color: red;',
59+
'}',
60+
'.placeholder {', // wrong
61+
' color: red;',
62+
'}',
63+
]
64+
65+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
66+
})
67+
68+
test('@custom-variant', () => {
69+
let input = [
70+
//
71+
'@custom-variant foo (&:hover);',
72+
'@custom-variant foo {',
73+
' &:hover {',
74+
' @slot;',
75+
' }',
76+
'}',
77+
]
78+
79+
let output = [
80+
//
81+
'@media (℘) {}', // wrong
82+
'.placeholder {', // wrong
83+
' &:hover {',
84+
' @slot;',
85+
' }',
86+
'}',
87+
]
88+
89+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
90+
})
91+
92+
test('@variant', () => {
93+
let input = [
94+
//
95+
'@variant foo {',
96+
' &:hover {',
97+
' @slot;',
98+
' }',
99+
'}',
100+
]
101+
102+
let output = [
103+
//
104+
'.placeholder {', // wrong
105+
' &:hover {',
106+
' @slot;',
107+
' }',
108+
'}',
109+
]
110+
111+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
112+
})
113+
114+
test('@reference', () => {
115+
let input = [
116+
//
117+
'@reference "./app.css";',
118+
'@reference "./app.css" source(none);',
119+
]
120+
121+
let output = [
122+
//
123+
'@import "./app.css" ;', // wrong
124+
'@import "./app.css" ;', // wrong
125+
]
126+
127+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
128+
})
129+
130+
test('@import', () => {
131+
let input = [
132+
//
133+
'@import "tailwindcss";',
134+
'@import "tailwindcss" source(none);',
135+
'@import "tailwindcss/utilities" layer(utilities);',
136+
'@import "tailwindcss/utilities" layer(utilities) source(none);',
137+
'@import "tailwindcss/utilities" layer(utilities) theme(inline);',
138+
'@import "tailwindcss/utilities" layer(utilities) prefix(tw);',
139+
'@import "tailwindcss/utilities" layer(utilities) source(none) theme(inline) prefix(tw);',
140+
]
141+
142+
let output = [
143+
//
144+
'@import "tailwindcss" ;', // wrong
145+
'@import "tailwindcss" ;', // wrong
146+
'@import "tailwindcss/utilities" layer(utilities);',
147+
'@import "tailwindcss/utilities" layer(utilities) ;', // wrong
148+
'@import "tailwindcss/utilities" layer(utilities) ;', // wrong
149+
'@import "tailwindcss/utilities" layer(utilities) ;', // wrong
150+
'@import "tailwindcss/utilities" layer(utilities) ;', // wrong
151+
]
152+
153+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
154+
})
155+
156+
describe('v3', () => {
157+
test('@screen', () => {
158+
let input = [
159+
//
160+
'@screen sm {',
161+
' .foo {',
162+
' color: red;',
163+
' }',
164+
'}',
165+
]
166+
167+
let output = [
168+
//
169+
'@media(℘) {',
170+
' .foo {',
171+
' color: red;',
172+
' }',
173+
'}',
174+
]
175+
176+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
177+
})
178+
179+
test('@variants', () => {
180+
let input = [
181+
//
182+
'@variants focus, hover {',
183+
' .foo {',
184+
' color: red;',
185+
' }',
186+
'}',
187+
]
188+
189+
let output = [
190+
//
191+
'@media(℘) {',
192+
' .foo {',
193+
' color: red;',
194+
' }',
195+
'}',
196+
]
197+
198+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
199+
})
200+
201+
test('@responsive', () => {
202+
let input = [
203+
//
204+
'@responsive {',
205+
' .foo {',
206+
' color: red;',
207+
' }',
208+
'}',
209+
]
210+
211+
let output = [
212+
//
213+
'@media(℘) {', // todo wrong
214+
' .foo {',
215+
' color: red;',
216+
' }',
217+
'}',
218+
]
219+
220+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
221+
})
222+
223+
test('@responsive', () => {
224+
let input = [
225+
//
226+
'@responsive {',
227+
' .foo {',
228+
' color: red;',
229+
' }',
230+
'}',
231+
]
232+
233+
let output = [
234+
//
235+
'@media(℘) {', // incorrect
236+
' .foo {',
237+
' color: red;',
238+
' }',
239+
'}',
240+
]
241+
242+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
243+
})
244+
245+
test('@media screen(…)', () => {
246+
let input = [
247+
//
248+
'@media screen(sm) {',
249+
' .foo {',
250+
' color: red;',
251+
' }',
252+
'}',
253+
]
254+
255+
let output = [
256+
//
257+
'@media (℘) {',
258+
' .foo {',
259+
' color: red;',
260+
' }',
261+
'}',
262+
]
263+
264+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
265+
})
266+
267+
test('theme(keypath) + config(keypath)', () => {
268+
let input = [
269+
//
270+
'.foo {',
271+
' width: calc(1rem * theme(colors.red[500]));',
272+
' height: calc(1rem * config(screens.mobile.[sm]));',
273+
'}',
274+
]
275+
276+
let output = [
277+
//
278+
'.foo {',
279+
' width: calc(1rem * theme(colors_red_500_));',
280+
' height: calc(1rem * config(screens_mobile__sm_));',
281+
'}',
282+
]
283+
284+
expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
285+
})
286+
})

0 commit comments

Comments
 (0)