Skip to content

Commit 746a126

Browse files
adamwathanRobinMalfait
adamwathan
and
RobinMalfait
authored
Improve new JIT-compatible CLI (#4558)
Co-authored-by: Robin Malfait <[email protected]>
1 parent 05d26a5 commit 746a126

19 files changed

+1935
-250
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/cli
22
/lib
33
/docs
4+
/peers
45
/tests/fixtures/cli-utils.js
56
/stubs/*

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/coverage
33
/cli
44
/lib
5+
/peers
56
/example
67
.vscode
78
tailwind.config.js

‎integrations/execute.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = function $(command, options = {}) {
1414

1515
let args = command.split(' ')
1616
command = args.shift()
17-
command = path.resolve(cwd, 'node_modules', '.bin', command)
17+
command = command === 'node' ? command : path.resolve(cwd, 'node_modules', '.bin', command)
1818

1919
let stdoutMessages = []
2020
let stderrMessages = []

‎integrations/tailwindcss-cli/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
dist/
2+
node_modules/
3+
!tailwind.config.js
4+
!index.html

‎integrations/tailwindcss-cli/package-lock.json

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎integrations/tailwindcss-cli/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "tailwindcss-cli",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"build": "NODE_ENV=production node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css",
7+
"test": "jest"
8+
},
9+
"jest": {
10+
"displayName": "Tailwind CSS CLI",
11+
"setupFilesAfterEnv": [
12+
"<rootDir>/../../jest/customMatchers.js"
13+
]
14+
}
15+
}

‎integrations/tailwindcss-cli/postcss.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
let path = require('path')
2+
3+
module.exports = {
4+
plugins: [require(path.resolve('..', '..'))],
5+
}

‎integrations/tailwindcss-cli/src/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎integrations/tailwindcss-cli/src/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
</head>
8+
<body>
9+
10+
</body>
11+
</html>

‎integrations/tailwindcss-cli/tailwind.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
purge: ['./src/index.html'],
3+
mode: 'jit',
4+
darkMode: false, // or 'media' or 'class'
5+
theme: {
6+
extend: {},
7+
},
8+
variants: {
9+
extend: {},
10+
},
11+
corePlugins: {
12+
preflight: false,
13+
},
14+
plugins: [],
15+
}

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

+232
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
let $ = require('../../execute')
2+
let { css, html, javascript } = require('../../syntax')
3+
4+
let {
5+
readOutputFile,
6+
appendToInputFile,
7+
writeInputFile,
8+
waitForOutputFileCreation,
9+
waitForOutputFileChange,
10+
} = require('../../io')({ output: 'dist', input: 'src' })
11+
12+
describe('static build', () => {
13+
it('should be possible to generate tailwind output', async () => {
14+
await writeInputFile('index.html', html`<div class="font-bold"></div>`)
15+
16+
await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
17+
env: { NODE_ENV: 'production' },
18+
})
19+
20+
expect(await readOutputFile('main.css')).toIncludeCss(
21+
css`
22+
.font-bold {
23+
font-weight: 700;
24+
}
25+
`
26+
)
27+
})
28+
})
29+
30+
describe('watcher', () => {
31+
test('classes are generated when the html file changes', async () => {
32+
await writeInputFile('index.html', html`<div class="font-bold"></div>`)
33+
34+
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
35+
36+
await waitForOutputFileCreation('main.css')
37+
38+
expect(await readOutputFile('main.css')).toIncludeCss(
39+
css`
40+
.font-bold {
41+
font-weight: 700;
42+
}
43+
`
44+
)
45+
46+
await waitForOutputFileChange('main.css', async () => {
47+
await appendToInputFile('index.html', html`<div class="font-normal"></div>`)
48+
})
49+
50+
expect(await readOutputFile('main.css')).toIncludeCss(
51+
css`
52+
.font-bold {
53+
font-weight: 700;
54+
}
55+
.font-normal {
56+
font-weight: 400;
57+
}
58+
`
59+
)
60+
61+
await waitForOutputFileChange('main.css', async () => {
62+
await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`)
63+
})
64+
65+
expect(await readOutputFile('main.css')).toIncludeCss(
66+
css`
67+
.bg-red-500 {
68+
--tw-bg-opacity: 1;
69+
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
70+
}
71+
.font-bold {
72+
font-weight: 700;
73+
}
74+
.font-normal {
75+
font-weight: 400;
76+
}
77+
`
78+
)
79+
80+
return runningProcess.stop()
81+
})
82+
83+
test('classes are generated when the tailwind.config.js file changes', async () => {
84+
await writeInputFile('index.html', html`<div class="font-bold md:font-medium"></div>`)
85+
86+
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
87+
88+
await waitForOutputFileCreation('main.css')
89+
90+
expect(await readOutputFile('main.css')).toIncludeCss(
91+
css`
92+
.font-bold {
93+
font-weight: 700;
94+
}
95+
@media (min-width: 768px) {
96+
.md\\:font-medium {
97+
font-weight: 500;
98+
}
99+
}
100+
`
101+
)
102+
103+
await waitForOutputFileChange('main.css', async () => {
104+
await writeInputFile(
105+
'../tailwind.config.js',
106+
javascript`
107+
module.exports = {
108+
purge: ['./src/index.html'],
109+
mode: 'jit',
110+
darkMode: false, // or 'media' or 'class'
111+
theme: {
112+
extend: {
113+
screens: {
114+
md: '800px'
115+
},
116+
fontWeight: {
117+
bold: 'bold'
118+
}
119+
},
120+
},
121+
variants: {
122+
extend: {},
123+
},
124+
corePlugins: {
125+
preflight: false,
126+
},
127+
plugins: [],
128+
}
129+
`
130+
)
131+
})
132+
133+
expect(await readOutputFile('main.css')).toIncludeCss(
134+
css`
135+
.font-bold {
136+
font-weight: bold;
137+
}
138+
@media (min-width: 800px) {
139+
.md\\:font-medium {
140+
font-weight: 500;
141+
}
142+
}
143+
`
144+
)
145+
146+
return runningProcess.stop()
147+
})
148+
149+
test('classes are generated when the index.css file changes', async () => {
150+
await writeInputFile('index.html', html`<div class="font-bold btn"></div>`)
151+
152+
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')
153+
154+
await waitForOutputFileCreation('main.css')
155+
156+
expect(await readOutputFile('main.css')).toIncludeCss(
157+
css`
158+
.font-bold {
159+
font-weight: 700;
160+
}
161+
`
162+
)
163+
164+
await waitForOutputFileChange('main.css', async () => {
165+
await writeInputFile(
166+
'index.css',
167+
css`
168+
@tailwind base;
169+
@tailwind components;
170+
@tailwind utilities;
171+
172+
@layer components {
173+
.btn {
174+
@apply px-2 py-1 rounded;
175+
}
176+
}
177+
`
178+
)
179+
})
180+
181+
expect(await readOutputFile('main.css')).toIncludeCss(
182+
css`
183+
.btn {
184+
border-radius: 0.25rem;
185+
padding-left: 0.5rem;
186+
padding-right: 0.5rem;
187+
padding-top: 0.25rem;
188+
padding-bottom: 0.25rem;
189+
}
190+
.font-bold {
191+
font-weight: 700;
192+
}
193+
`
194+
)
195+
196+
await waitForOutputFileChange('main.css', async () => {
197+
await writeInputFile(
198+
'index.css',
199+
css`
200+
@tailwind base;
201+
@tailwind components;
202+
@tailwind utilities;
203+
204+
@layer components {
205+
.btn {
206+
@apply px-2 py-1 rounded bg-red-500;
207+
}
208+
}
209+
`
210+
)
211+
})
212+
213+
expect(await readOutputFile('main.css')).toIncludeCss(
214+
css`
215+
.btn {
216+
border-radius: 0.25rem;
217+
--tw-bg-opacity: 1;
218+
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
219+
padding-left: 0.5rem;
220+
padding-right: 0.5rem;
221+
padding-top: 0.25rem;
222+
padding-bottom: 0.25rem;
223+
}
224+
.font-bold {
225+
font-weight: 700;
226+
}
227+
`
228+
)
229+
230+
return runningProcess.stop()
231+
})
232+
})

0 commit comments

Comments
 (0)