-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve new JIT-compatible CLI (#4558)
Co-authored-by: Robin Malfait <[email protected]>
- Loading branch information
1 parent
05d26a5
commit 746a126
Showing
19 changed files
with
1,935 additions
and
250 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
/cli | ||
/lib | ||
/docs | ||
/peers | ||
/tests/fixtures/cli-utils.js | ||
/stubs/* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,7 @@ | |
/coverage | ||
/cli | ||
/lib | ||
/peers | ||
/example | ||
.vscode | ||
tailwind.config.js | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
dist/ | ||
node_modules/ | ||
!tailwind.config.js | ||
!index.html |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"name": "tailwindcss-cli", | ||
"private": true, | ||
"version": "0.0.0", | ||
"scripts": { | ||
"build": "NODE_ENV=production node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css", | ||
"test": "jest" | ||
}, | ||
"jest": { | ||
"displayName": "Tailwind CSS CLI", | ||
"setupFilesAfterEnv": [ | ||
"<rootDir>/../../jest/customMatchers.js" | ||
] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
let path = require('path') | ||
|
||
module.exports = { | ||
plugins: [require(path.resolve('..', '..'))], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
</head> | ||
<body> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
module.exports = { | ||
purge: ['./src/index.html'], | ||
mode: 'jit', | ||
darkMode: false, // or 'media' or 'class' | ||
theme: { | ||
extend: {}, | ||
}, | ||
variants: { | ||
extend: {}, | ||
}, | ||
corePlugins: { | ||
preflight: false, | ||
}, | ||
plugins: [], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,232 @@ | ||
let $ = require('../../execute') | ||
let { css, html, javascript } = require('../../syntax') | ||
|
||
let { | ||
readOutputFile, | ||
appendToInputFile, | ||
writeInputFile, | ||
waitForOutputFileCreation, | ||
waitForOutputFileChange, | ||
} = require('../../io')({ output: 'dist', input: 'src' }) | ||
|
||
describe('static build', () => { | ||
it('should be possible to generate tailwind output', async () => { | ||
await writeInputFile('index.html', html`<div class="font-bold"></div>`) | ||
|
||
await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', { | ||
env: { NODE_ENV: 'production' }, | ||
}) | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
` | ||
) | ||
}) | ||
}) | ||
|
||
describe('watcher', () => { | ||
test('classes are generated when the html file changes', async () => { | ||
await writeInputFile('index.html', html`<div class="font-bold"></div>`) | ||
|
||
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') | ||
|
||
await waitForOutputFileCreation('main.css') | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
` | ||
) | ||
|
||
await waitForOutputFileChange('main.css', async () => { | ||
await appendToInputFile('index.html', html`<div class="font-normal"></div>`) | ||
}) | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
.font-normal { | ||
font-weight: 400; | ||
} | ||
` | ||
) | ||
|
||
await waitForOutputFileChange('main.css', async () => { | ||
await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`) | ||
}) | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.bg-red-500 { | ||
--tw-bg-opacity: 1; | ||
background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); | ||
} | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
.font-normal { | ||
font-weight: 400; | ||
} | ||
` | ||
) | ||
|
||
return runningProcess.stop() | ||
}) | ||
|
||
test('classes are generated when the tailwind.config.js file changes', async () => { | ||
await writeInputFile('index.html', html`<div class="font-bold md:font-medium"></div>`) | ||
|
||
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') | ||
|
||
await waitForOutputFileCreation('main.css') | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
@media (min-width: 768px) { | ||
.md\\:font-medium { | ||
font-weight: 500; | ||
} | ||
} | ||
` | ||
) | ||
|
||
await waitForOutputFileChange('main.css', async () => { | ||
await writeInputFile( | ||
'../tailwind.config.js', | ||
javascript` | ||
module.exports = { | ||
purge: ['./src/index.html'], | ||
mode: 'jit', | ||
darkMode: false, // or 'media' or 'class' | ||
theme: { | ||
extend: { | ||
screens: { | ||
md: '800px' | ||
}, | ||
fontWeight: { | ||
bold: 'bold' | ||
} | ||
}, | ||
}, | ||
variants: { | ||
extend: {}, | ||
}, | ||
corePlugins: { | ||
preflight: false, | ||
}, | ||
plugins: [], | ||
} | ||
` | ||
) | ||
}) | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.font-bold { | ||
font-weight: bold; | ||
} | ||
@media (min-width: 800px) { | ||
.md\\:font-medium { | ||
font-weight: 500; | ||
} | ||
} | ||
` | ||
) | ||
|
||
return runningProcess.stop() | ||
}) | ||
|
||
test('classes are generated when the index.css file changes', async () => { | ||
await writeInputFile('index.html', html`<div class="font-bold btn"></div>`) | ||
|
||
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') | ||
|
||
await waitForOutputFileCreation('main.css') | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
` | ||
) | ||
|
||
await waitForOutputFileChange('main.css', async () => { | ||
await writeInputFile( | ||
'index.css', | ||
css` | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
@layer components { | ||
.btn { | ||
@apply px-2 py-1 rounded; | ||
} | ||
} | ||
` | ||
) | ||
}) | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.btn { | ||
border-radius: 0.25rem; | ||
padding-left: 0.5rem; | ||
padding-right: 0.5rem; | ||
padding-top: 0.25rem; | ||
padding-bottom: 0.25rem; | ||
} | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
` | ||
) | ||
|
||
await waitForOutputFileChange('main.css', async () => { | ||
await writeInputFile( | ||
'index.css', | ||
css` | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
@layer components { | ||
.btn { | ||
@apply px-2 py-1 rounded bg-red-500; | ||
} | ||
} | ||
` | ||
) | ||
}) | ||
|
||
expect(await readOutputFile('main.css')).toIncludeCss( | ||
css` | ||
.btn { | ||
border-radius: 0.25rem; | ||
--tw-bg-opacity: 1; | ||
background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); | ||
padding-left: 0.5rem; | ||
padding-right: 0.5rem; | ||
padding-top: 0.25rem; | ||
padding-bottom: 0.25rem; | ||
} | ||
.font-bold { | ||
font-weight: 700; | ||
} | ||
` | ||
) | ||
|
||
return runningProcess.stop() | ||
}) | ||
}) |
Oops, something went wrong.