Skip to content

Commit 4297655

Browse files
philipp-spiessphilipp-spiess
authored
Add integration test for Vite CSS module support (#14349)
Wanted to make sure stuff works with CSS modules for both the postcss and the lightningcss pipeline.
1 parent 8f8803d commit 4297655

File tree

4 files changed

+90
-11
lines changed

4 files changed

+90
-11
lines changed

‎integrations/cli/config.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { candidate, css, html, js, json, test } from '../utils'
1+
import { candidate, css, html, js, json, test, ts } from '../utils'
22

33
test(
44
'Config files (CJS)',
@@ -99,7 +99,7 @@ test(
9999
'index.html': html`
100100
<div class="text-primary"></div>
101101
`,
102-
'tailwind.config.ts': js`
102+
'tailwind.config.ts': ts`
103103
export default {
104104
theme: {
105105
extend: {

‎integrations/utils.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,10 @@ interface TestContext {
3737
write(filePath: string, content: string): Promise<void>
3838
read(filePath: string): Promise<string>
3939
glob(pattern: string): Promise<[string, string][]>
40-
expectFileToContain(filePath: string, contents: string | string[]): Promise<void>
40+
expectFileToContain(
41+
filePath: string,
42+
contents: string | string[] | RegExp | RegExp[],
43+
): Promise<void>
4144
expectFileNotToContain(filePath: string, contents: string | string[]): Promise<void>
4245
}
4346
}
@@ -297,8 +300,12 @@ export function test(
297300
async expectFileToContain(filePath, contents) {
298301
return retryAssertion(async () => {
299302
let fileContent = await this.read(filePath)
300-
for (let content of contents) {
301-
expect(fileContent).toContain(content)
303+
for (let content of Array.isArray(contents) ? contents : [contents]) {
304+
if (content instanceof RegExp) {
305+
expect(fileContent).toMatch(content)
306+
} else {
307+
expect(fileContent).toContain(content)
308+
}
302309
}
303310
})
304311
},
@@ -542,7 +549,6 @@ export async function fetchStyles(port: number, path = '/'): Promise<string> {
542549
let stylesheets: string[] = []
543550

544551
let paths: string[] = []
545-
let match
546552
for (let match of html.matchAll(linkRegex)) {
547553
let path: string = match[1]
548554
if (path.startsWith('./')) {

‎integrations/vite/css-modules.test.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { describe, expect } from 'vitest'
2+
import { css, html, test, ts, txt } from '../utils'
3+
4+
for (let transformer of ['postcss', 'lightningcss']) {
5+
describe(transformer, () => {
6+
test(
7+
`dev mode`,
8+
{
9+
fs: {
10+
'package.json': txt`
11+
{
12+
"type": "module",
13+
"dependencies": {
14+
"@tailwindcss/vite": "workspace:^",
15+
"tailwindcss": "workspace:^"
16+
},
17+
"devDependencies": {
18+
${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
19+
"vite": "^5.3.5"
20+
}
21+
}
22+
`,
23+
'vite.config.ts': ts`
24+
import tailwindcss from '@tailwindcss/vite'
25+
import { defineConfig } from 'vite'
26+
27+
export default defineConfig({
28+
css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
29+
build: { cssMinify: false },
30+
plugins: [tailwindcss()],
31+
})
32+
`,
33+
'index.html': html`
34+
<head>
35+
<script type="module" src="/src/component.ts"></script>
36+
</head>
37+
<body>
38+
<div id="root" />
39+
</body>
40+
`,
41+
'src/component.ts': ts`
42+
import { foo } from './component.module.css'
43+
let root = document.getElementById('root')
44+
root.className = foo
45+
root.innerText = 'Hello, world!'
46+
`,
47+
'src/component.module.css': css`
48+
@import 'tailwindcss/utilities';
49+
50+
.foo {
51+
@apply underline;
52+
}
53+
`,
54+
},
55+
},
56+
async ({ exec, fs }) => {
57+
await exec(`pnpm vite build`)
58+
59+
let files = await fs.glob('dist/**/*.css')
60+
expect(files).toHaveLength(1)
61+
let [filename] = files[0]
62+
63+
await fs.expectFileToContain(filename, [
64+
/\.[^f]*_foo[^t]*text-decoration-line: underline;/gi,
65+
])
66+
},
67+
)
68+
})
69+
}

‎integrations/vite/index.test.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ import {
1010
retryAssertion,
1111
test,
1212
ts,
13+
txt,
1314
yaml,
1415
} from '../utils'
15-
;['postcss', 'lightningcss'].forEach((transformer) => {
16+
17+
for (let transformer of ['postcss', 'lightningcss']) {
1618
describe(transformer, () => {
1719
test(
1820
`production build`,
@@ -24,7 +26,7 @@ import {
2426
packages:
2527
- project-a
2628
`,
27-
'project-a/package.json': json`
29+
'project-a/package.json': txt`
2830
{
2931
"type": "module",
3032
"dependencies": {
@@ -101,14 +103,15 @@ import {
101103
packages:
102104
- project-a
103105
`,
104-
'project-a/package.json': json`
106+
'project-a/package.json': txt`
105107
{
106108
"type": "module",
107109
"dependencies": {
108110
"@tailwindcss/vite": "workspace:^",
109111
"tailwindcss": "workspace:^"
110112
},
111113
"devDependencies": {
114+
${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
112115
"vite": "^5.3.5"
113116
}
114117
}
@@ -254,14 +257,15 @@ import {
254257
packages:
255258
- project-a
256259
`,
257-
'project-a/package.json': json`
260+
'project-a/package.json': txt`
258261
{
259262
"type": "module",
260263
"dependencies": {
261264
"@tailwindcss/vite": "workspace:^",
262265
"tailwindcss": "workspace:^"
263266
},
264267
"devDependencies": {
268+
${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
265269
"vite": "^5.3.5"
266270
}
267271
}
@@ -382,7 +386,7 @@ import {
382386
},
383387
)
384388
})
385-
})
389+
}
386390

387391
test(
388392
`demote Tailwind roots to regular CSS files and back to Tailwind roots while restoring all candidates`,

0 commit comments

Comments
 (0)