Skip to content

Commit e572dc6

Browse files
RobinMalfaitRobinMalfait
authored
Bump lightningcss dependency (#11388)
* bump `lightningcss` * allow for non-standard selector combinators such as `::deep` * just use Prettier when comparing CSS results We were using 2 different engines where the stable one was not using Lightning CSS and the Oxide one was using Lightning CSS. To ensure that we didn't have to rewrite every single test expectation, the `toMatchFormattedCss` parsed both the actual and expected value using Lightning CSS (to make the result similar), then it used Prettier to make it... pretty. Right now we _only_ use Lightning CSS, which means that we can drop the additional lightningcss format step and just use Prettier on both the actual and expected values. Pretty also only prettifies the CSS, it doesn't rewrite it. E.g.: `@media (min-width: 768px)` will not be optimized to `@media (width >= 768px)`, that's something that Lightning CSS does for us. This will require some changes in our test output, but it will be consistent afterwards because there won't be hidden transformation steps anymore. Because up until now it could be that the actual result was `color: black` but the tests showed `color: #000` (because it is shorter). This change will reflect reality. * update tests based on previous commit * only use `toMatchFormattedCss` instead of `toMatchCss` They both do the exact same thing right now. While `toMatchCss` is shorter, `toMatchFormattedCss` makes a bit more sense since we are comparing the Prettier results. * update integration tests
1 parent 571c27e commit e572dc6

File tree

60 files changed

+908
-936
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+908
-936
lines changed

‎integrations/content-resolution/tests/content.test.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ it('looks in the CWD by default', async () => {
6060

6161
let result = await build({ cwd: path.resolve(__dirname, '..') })
6262

63-
expect(result.css).toMatchCss(css`
63+
expect(result.css).toMatchFormattedCss(css`
6464
.content-\[real-static-positive\] {
6565
--tw-content: real-static-positive;
6666
content: var(--tw-content);
@@ -69,7 +69,7 @@ it('looks in the CWD by default', async () => {
6969

7070
result = await build({ cwd: path.resolve(__dirname, '../src') })
7171

72-
expect(result.css).toMatchCss(``)
72+
expect(result.css).toMatchFormattedCss(``)
7373
})
7474

7575
it('looks in the CWD for non-config-relative paths', async () => {
@@ -88,7 +88,7 @@ it('looks in the CWD for non-config-relative paths', async () => {
8888

8989
let result = await build({ cwd: path.resolve(__dirname, '..') })
9090

91-
expect(result.css).toMatchCss(css`
91+
expect(result.css).toMatchFormattedCss(css`
9292
.content-\[real-static-positive\] {
9393
--tw-content: real-static-positive;
9494
content: var(--tw-content);
@@ -97,7 +97,7 @@ it('looks in the CWD for non-config-relative paths', async () => {
9797

9898
result = await build({ cwd: path.resolve(__dirname, '../src') })
9999

100-
expect(result.css).toMatchCss(``)
100+
expect(result.css).toMatchFormattedCss(``)
101101
})
102102

103103
it('can look for content files relative to the config', async () => {
@@ -113,12 +113,12 @@ it('can look for content files relative to the config', async () => {
113113
// Here `./real` doesn't exist next to the config in the root directory
114114
let result = await build({ cwd: path.resolve(__dirname, '..') })
115115

116-
expect(result.css).toMatchCss(css``)
116+
expect(result.css).toMatchFormattedCss(css``)
117117

118118
// But here it `./real` does exist next to the config in the `./src` directory!
119119
result = await build({ cwd: path.resolve(__dirname, '../src') })
120120

121-
expect(result.css).toMatchCss(css`
121+
expect(result.css).toMatchFormattedCss(css`
122122
.content-\[real-static-positive\] {
123123
--tw-content: real-static-positive;
124124
content: var(--tw-content);
@@ -143,7 +143,7 @@ it('it handles ignored globs correctly when not relative to the config', async (
143143

144144
let result = await build({ cwd: path.resolve(__dirname, '..') })
145145

146-
expect(result.css).toMatchCss(css`
146+
expect(result.css).toMatchFormattedCss(css`
147147
.content-\[real-dynamic-positive\] {
148148
--tw-content: real-dynamic-positive;
149149
content: var(--tw-content);
@@ -157,7 +157,7 @@ it('it handles ignored globs correctly when not relative to the config', async (
157157
// But here it `./real` does exist next to the config in the `./src` directory!
158158
result = await build({ cwd: path.resolve(__dirname, '../src') })
159159

160-
expect(result.css).toMatchCss(``)
160+
expect(result.css).toMatchFormattedCss(``)
161161
})
162162

163163
it('it handles ignored globs correctly when relative to the config', async () => {
@@ -177,12 +177,12 @@ it('it handles ignored globs correctly when relative to the config', async () =>
177177

178178
let result = await build({ cwd: path.resolve(__dirname, '..') })
179179

180-
expect(result.css).toMatchCss(``)
180+
expect(result.css).toMatchFormattedCss(``)
181181

182182
// But here it `./real` does exist next to the config in the `./src` directory!
183183
result = await build({ cwd: path.resolve(__dirname, '../src') })
184184

185-
expect(result.css).toMatchCss(css`
185+
expect(result.css).toMatchFormattedCss(css`
186186
.content-\[real-dynamic-positive\] {
187187
--tw-content: real-dynamic-positive;
188188
content: var(--tw-content);
@@ -215,7 +215,7 @@ it('it can resolve symlinks for files when not relative to the config', async ()
215215

216216
let result = await build({ cwd: path.resolve(__dirname, '..') })
217217

218-
expect(result.css).toMatchCss(css`
218+
expect(result.css).toMatchFormattedCss(css`
219219
.content-\[real-dynamic-positive\] {
220220
--tw-content: real-dynamic-positive;
221221
content: var(--tw-content);
@@ -237,7 +237,7 @@ it('it can resolve symlinks for files when not relative to the config', async ()
237237
// But here it `./real` does exist next to the config in the `./src` directory!
238238
result = await build({ cwd: path.resolve(__dirname, '../src') })
239239

240-
expect(result.css).toMatchCss(``)
240+
expect(result.css).toMatchFormattedCss(``)
241241
})
242242

243243
it('it can resolve symlinks for files when relative to the config', async () => {
@@ -261,12 +261,12 @@ it('it can resolve symlinks for files when relative to the config', async () =>
261261

262262
let result = await build({ cwd: path.resolve(__dirname, '..') })
263263

264-
expect(result.css).toMatchCss(``)
264+
expect(result.css).toMatchFormattedCss(``)
265265

266266
// But here it `./real` does exist next to the config in the `./src` directory!
267267
result = await build({ cwd: path.resolve(__dirname, '../src') })
268268

269-
expect(result.css).toMatchCss(css`
269+
expect(result.css).toMatchFormattedCss(css`
270270
.content-\[real-dynamic-positive\] {
271271
--tw-content: real-dynamic-positive;
272272
content: var(--tw-content);

‎integrations/parcel/tests/integration.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ describe('watcher', () => {
263263
.font-bold {
264264
font-weight: 700;
265265
}
266-
@media (min-width: 768px) {
266+
@media (width >= 768px) {
267267
.md\:font-medium {
268268
font-weight: 500;
269269
}
@@ -301,7 +301,7 @@ describe('watcher', () => {
301301
.font-bold {
302302
font-weight: bold;
303303
}
304-
@media (min-width: 800px) {
304+
@media (width >= 800px) {
305305
.md\:font-medium {
306306
font-weight: 500;
307307
}
@@ -352,11 +352,11 @@ describe('watcher', () => {
352352

353353
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(
354354
css`
355-
/* prettier-ignore */
356355
.btn {
357-
border-radius: .25rem;
358-
padding: .25rem .5rem;
356+
border-radius: 0.25rem;
357+
padding: 0.25rem 0.5rem;
359358
}
359+
360360
.font-bold {
361361
font-weight: 700;
362362
}

‎integrations/postcss-cli/tests/integration.test.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ describe('watcher', () => {
137137
.font-bold {
138138
font-weight: 700;
139139
}
140-
@media (min-width: 768px) {
140+
@media (width >= 768px) {
141141
.md\:font-medium {
142142
font-weight: 500;
143143
}
@@ -174,7 +174,7 @@ describe('watcher', () => {
174174
.font-bold {
175175
font-weight: bold;
176176
}
177-
@media (min-width: 800px) {
177+
@media (width >= 800px) {
178178
.md\:font-medium {
179179
font-weight: 500;
180180
}
@@ -247,12 +247,11 @@ describe('watcher', () => {
247247

248248
expect(await readOutputFile('main.css')).toIncludeCss(
249249
css`
250-
/* prettier-ignore */
251250
.btn {
252-
border-radius: 0.25rem;
253-
z-index: 0;
254-
padding: 0.25rem 0.5rem;
255-
}
251+
z-index: 0;
252+
border-radius: 0.25rem;
253+
padding: 0.25rem 0.5rem;
254+
}
256255
.font-bold {
257256
font-weight: 700;
258257
}

‎integrations/rollup-sass/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ describe('watcher', () => {
136136
.font-bold {
137137
font-weight: 700;
138138
}
139-
@media (min-width: 768px) {
139+
@media (width >= 768px) {
140140
.md\:font-medium {
141141
font-weight: 500;
142142
}
@@ -173,7 +173,7 @@ describe('watcher', () => {
173173
.font-bold {
174174
font-weight: bold;
175175
}
176-
@media (min-width: 800px) {
176+
@media (width >= 800px) {
177177
.md\:font-medium {
178178
font-weight: 500;
179179
}

‎integrations/rollup/tests/integration.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ describe('watcher', () => {
224224
.font-bold {
225225
font-weight: 700;
226226
}
227-
@media (min-width: 768px) {
227+
@media (width >= 768px) {
228228
.md\:font-medium {
229229
font-weight: 500;
230230
}
@@ -261,7 +261,7 @@ describe('watcher', () => {
261261
.font-bold {
262262
font-weight: bold;
263263
}
264-
@media (min-width: 800px) {
264+
@media (width >= 800px) {
265265
.md\:font-medium {
266266
font-weight: 500;
267267
}
@@ -334,8 +334,8 @@ describe('watcher', () => {
334334
expect(await readOutputFile('index.css')).toIncludeCss(
335335
css`
336336
.btn {
337-
border-radius: 0.25rem;
338337
z-index: 0;
338+
border-radius: 0.25rem;
339339
padding: 0.25rem 0.5rem;
340340
}
341341
.font-bold {

‎integrations/tailwindcss-cli/tests/cli.test.js

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ describe('Build command', () => {
150150
theme: {
151151
extend: {
152152
fontWeight: {
153-
bold: 'BOLD',
153+
bold: 'bold',
154154
},
155155
},
156156
},
@@ -171,7 +171,7 @@ describe('Build command', () => {
171171
expect(await readOutputFile('main.css')).toIncludeCss(
172172
css`
173173
.font-bold {
174-
font-weight: BOLD;
174+
font-weight: bold;
175175
}
176176
`
177177
)
@@ -231,11 +231,8 @@ describe('Build command', () => {
231231
}
232232
233233
.btn-after {
234+
padding: 0.25rem 0.5rem;
234235
display: flex;
235-
padding-left: 0.5rem;
236-
padding-right: 0.5rem;
237-
padding-top: 0.25rem;
238-
padding-bottom: 0.25rem;
239236
}
240237
`
241238
)
@@ -281,11 +278,8 @@ describe('Build command', () => {
281278
}
282279
283280
.btn-after {
281+
padding: 0.25rem 0.5rem;
284282
display: flex;
285-
padding-left: 0.5rem;
286-
padding-right: 0.5rem;
287-
padding-top: 0.25rem;
288-
padding-bottom: 0.25rem;
289283
}
290284
`
291285
)
@@ -437,7 +431,7 @@ describe('Build command', () => {
437431
css`
438432
@media (min-width: 768px) {
439433
.md\:something-cool {
440-
color: blue;
434+
color: #00f;
441435
}
442436
}
443437
`

‎integrations/tailwindcss-cli/tests/integration.test.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -884,7 +884,6 @@ describe('watcher', () => {
884884
expect(await readOutputFile('main.css')).not.toIncludeCss(
885885
css`
886886
.underline {
887-
-webkit-text-decoration-line: underline;
888887
text-decoration-line: underline;
889888
}
890889
`
@@ -898,7 +897,6 @@ describe('watcher', () => {
898897
expect(await readOutputFile('main.css')).toIncludeCss(
899898
css`
900899
.underline {
901-
-webkit-text-decoration-line: underline;
902900
text-decoration-line: underline;
903901
}
904902
`
@@ -938,7 +936,6 @@ describe('watcher', () => {
938936
expect(await readOutputFile('main.css')).not.toIncludeCss(
939937
css`
940938
.underline {
941-
-webkit-text-decoration-line: underline;
942939
text-decoration-line: underline;
943940
}
944941
`
@@ -952,7 +949,6 @@ describe('watcher', () => {
952949
expect(await readOutputFile('main.css')).toIncludeCss(
953950
css`
954951
.underline {
955-
-webkit-text-decoration-line: underline;
956952
text-decoration-line: underline;
957953
}
958954
`
@@ -1037,7 +1033,6 @@ describe('watcher', () => {
10371033
}
10381034
10391035
.underline {
1040-
-webkit-text-decoration-line: underline;
10411036
text-decoration-line: underline;
10421037
}
10431038
`
@@ -1082,7 +1077,6 @@ describe('watcher', () => {
10821077
}
10831078
10841079
.underline {
1085-
-webkit-text-decoration-line: underline;
10861080
text-decoration-line: underline;
10871081
}
10881082
`

‎integrations/vite/tests/integration.test.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ describe('watcher', () => {
255255
.font-bold {
256256
font-weight: 700;
257257
}
258-
@media (min-width: 768px) {
258+
@media (width >= 768px) {
259259
.md\:font-medium {
260260
font-weight: 500;
261261
}
@@ -292,7 +292,7 @@ describe('watcher', () => {
292292
.font-bold {
293293
font-weight: bold;
294294
}
295-
@media (min-width: 800px) {
295+
@media (width >= 800px) {
296296
.md\:font-medium {
297297
font-weight: 500;
298298
}
@@ -373,12 +373,9 @@ describe('watcher', () => {
373373
expect(await fetchCSS()).toIncludeCss(
374374
css`
375375
.btn {
376-
border-radius: 0.25rem;
377376
z-index: 0;
378-
padding-left: 0.5rem;
379-
padding-right: 0.5rem;
380-
padding-top: 0.25rem;
381-
padding-bottom: 0.25rem;
377+
border-radius: 0.25rem;
378+
padding: 0.25rem 0.5rem;
382379
}
383380
.font-bold {
384381
font-weight: 700;

‎integrations/webpack-4/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ describe('watcher', () => {
225225
.font-bold {
226226
font-weight: 700;
227227
}
228-
@media (min-width: 768px) {
228+
@media (width >= 768px) {
229229
.md\:font-medium {
230230
font-weight: 500;
231231
}
@@ -263,7 +263,7 @@ describe('watcher', () => {
263263
.font-bold {
264264
font-weight: bold;
265265
}
266-
@media (min-width: 800px) {
266+
@media (width >= 800px) {
267267
.md\:font-medium {
268268
font-weight: 500;
269269
}

0 commit comments

Comments
 (0)