mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
72bc31867b
* replace `env.OXIDE` with global `__OXIDE__` This will allow us to replace the `__OXIDE__` at build time, and fully remove the branches from the final code so that there is not even any reference to `@tailwindcss/oxide` on the stable engine. * update changelog * use `env.ENGINE` in integration tests * drop oxide branching for the PostCSS plugin for now This is currently a redirect to the same file, so doesn't hurt. * Enable better dead-code elimination * Update CLI tests Fix indentation * Fix indentation --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me>
478 lines
11 KiB
JavaScript
478 lines
11 KiB
JavaScript
require('isomorphic-fetch')
|
|
|
|
let $ = require('../../execute')
|
|
let { css, html, javascript } = require('../../syntax')
|
|
let { env } = require('../../../lib/lib/sharedState')
|
|
|
|
let { readOutputFile, appendToInputFile, writeInputFile, removeFile } = require('../../io')({
|
|
output: 'dist',
|
|
input: '.',
|
|
})
|
|
|
|
let PORT = 1337
|
|
|
|
async function fetchCSS() {
|
|
let response = await fetch(`http://localhost:${PORT}/index.css`, {
|
|
headers: {
|
|
Accept: 'text/css',
|
|
},
|
|
})
|
|
return response.text()
|
|
}
|
|
|
|
describe('static build', () => {
|
|
it('should be possible to generate tailwind output', async () => {
|
|
await writeInputFile(
|
|
'index.html',
|
|
html`
|
|
<link rel="stylesheet" href="./index.css" />
|
|
<div class="font-bold"></div>
|
|
`
|
|
)
|
|
|
|
await $('vite build', {
|
|
env: { NODE_ENV: 'production', NO_COLOR: '1' },
|
|
})
|
|
|
|
expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
|
|
css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`
|
|
)
|
|
})
|
|
|
|
it('can use a tailwind.config.js configuration file with ESM syntax', async () => {
|
|
await writeInputFile(
|
|
'index.html',
|
|
html`
|
|
<link rel="stylesheet" href="./index.css" />
|
|
<div class="bg-primary"></div>
|
|
`
|
|
)
|
|
await removeFile('tailwind.config.js')
|
|
await writeInputFile(
|
|
'tailwind.config.js',
|
|
javascript`
|
|
export default {
|
|
content: ['index.html'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: 'black',
|
|
},
|
|
},
|
|
},
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
}
|
|
`
|
|
)
|
|
|
|
await $('vite build', {
|
|
env: { NODE_ENV: 'production', NO_COLOR: '1' },
|
|
})
|
|
|
|
if (env.ENGINE === 'stable') {
|
|
expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
|
|
css`
|
|
.bg-primary {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
}
|
|
`
|
|
)
|
|
}
|
|
|
|
if (env.ENGINE === 'oxide') {
|
|
expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
|
|
css`
|
|
.bg-primary {
|
|
background-color: black;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
})
|
|
|
|
it('can use a tailwind.config.ts configuration file', async () => {
|
|
await writeInputFile(
|
|
'index.html',
|
|
html`
|
|
<link rel="stylesheet" href="./index.css" />
|
|
<div class="bg-primary"></div>
|
|
`
|
|
)
|
|
await removeFile('tailwind.config.js')
|
|
await writeInputFile(
|
|
'tailwind.config.ts',
|
|
javascript`
|
|
import type { Config } from 'tailwindcss'
|
|
|
|
export default {
|
|
content: ['index.html'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: 'black',
|
|
},
|
|
},
|
|
},
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
} satisfies Config
|
|
`
|
|
)
|
|
|
|
await $('vite build', {
|
|
env: { NODE_ENV: 'production', NO_COLOR: '1' },
|
|
})
|
|
|
|
if (env.ENGINE === 'stable') {
|
|
expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
|
|
css`
|
|
.bg-primary {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
|
}
|
|
`
|
|
)
|
|
}
|
|
|
|
if (env.ENGINE === 'oxide') {
|
|
expect(await readOutputFile(/index.\w+\.css$/)).toIncludeCss(
|
|
css`
|
|
.bg-primary {
|
|
background-color: black;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
})
|
|
})
|
|
|
|
describe('watcher', () => {
|
|
test('classes are generated when the html file changes', async () => {
|
|
await writeInputFile(
|
|
'index.html',
|
|
html`
|
|
<link rel="stylesheet" href="./index.css" />
|
|
<div class="font-bold"></div>
|
|
`
|
|
)
|
|
|
|
let runningProcess = $(`vite --port ${PORT}`, {
|
|
env: { NO_COLOR: '1' },
|
|
})
|
|
await runningProcess.onStdout((message) => message.includes('ready in'))
|
|
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`
|
|
)
|
|
|
|
await appendToInputFile('index.html', html`<div class="font-normal"></div>`)
|
|
await runningProcess.onStdout((message) => message.includes('page reload'))
|
|
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
.font-normal {
|
|
font-weight: 400;
|
|
}
|
|
`
|
|
)
|
|
|
|
await appendToInputFile('index.html', html`<div class="bg-red-500"></div>`)
|
|
await runningProcess.onStdout((message) => message.includes('page reload'))
|
|
|
|
if (env.ENGINE === 'stable') {
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.bg-red-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
|
}
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
.font-normal {
|
|
font-weight: 400;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
|
|
if (env.ENGINE === 'oxide') {
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.bg-red-500 {
|
|
background-color: #ef4444;
|
|
}
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
.font-normal {
|
|
font-weight: 400;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
|
|
return runningProcess.stop()
|
|
})
|
|
|
|
test('classes are generated when globbed files change', async () => {
|
|
await writeInputFile('index.html', html` <link rel="stylesheet" href="./index.css" /> `)
|
|
|
|
await writeInputFile('glob/index.html', html` <div class="font-bold"></div> `)
|
|
|
|
let runningProcess = $(`vite --port ${PORT}`, {
|
|
env: { NO_COLOR: '1' },
|
|
})
|
|
await runningProcess.onStdout((message) => message.includes('ready in'))
|
|
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`
|
|
)
|
|
|
|
await appendToInputFile('glob/index.html', html`<div class="font-normal"></div>`)
|
|
await runningProcess.onStdout((message) => message.includes('page reload'))
|
|
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
.font-normal {
|
|
font-weight: 400;
|
|
}
|
|
`
|
|
)
|
|
|
|
await appendToInputFile('glob/index.html', html`<div class="bg-red-500"></div>`)
|
|
await runningProcess.onStdout((message) => message.includes('page reload'))
|
|
|
|
if (env.ENGINE === 'stable') {
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.bg-red-500 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
|
}
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
.font-normal {
|
|
font-weight: 400;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
|
|
if (env.ENGINE === 'oxide') {
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.bg-red-500 {
|
|
background-color: #ef4444;
|
|
}
|
|
.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`
|
|
<link rel="stylesheet" href="./index.css" />
|
|
<div class="font-bold md:font-medium"></div>
|
|
`
|
|
)
|
|
|
|
let runningProcess = $(`vite --port ${PORT}`, {
|
|
env: { NO_COLOR: '1' },
|
|
})
|
|
await runningProcess.onStdout((message) => message.includes('ready in'))
|
|
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.md\:font-medium {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
`
|
|
)
|
|
|
|
await writeInputFile(
|
|
'tailwind.config.js',
|
|
javascript`
|
|
module.exports = {
|
|
content: ['./index.html'],
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
md: '800px'
|
|
},
|
|
fontWeight: {
|
|
bold: 'bold'
|
|
}
|
|
},
|
|
},
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
plugins: [],
|
|
}
|
|
`
|
|
)
|
|
await runningProcess.onStdout((message) => message.includes('[vite]'))
|
|
|
|
expect(await fetchCSS()).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`
|
|
<link rel="stylesheet" href="./index.css" />
|
|
<div class="btn font-bold"></div>
|
|
`
|
|
)
|
|
|
|
let runningProcess = $(`vite --port ${PORT}`, {
|
|
env: { NO_COLOR: '1' },
|
|
})
|
|
await runningProcess.onStdout((message) => message.includes('ready in'))
|
|
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`
|
|
)
|
|
|
|
await writeInputFile(
|
|
'index.css',
|
|
css`
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply rounded px-2 py-1;
|
|
}
|
|
}
|
|
`
|
|
)
|
|
await runningProcess.onStdout((message) => message.includes('hmr update /index.css'))
|
|
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.btn {
|
|
border-radius: 0.25rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`
|
|
)
|
|
|
|
await writeInputFile(
|
|
'index.css',
|
|
css`
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply rounded bg-red-500 px-2 py-1;
|
|
}
|
|
}
|
|
`
|
|
)
|
|
await runningProcess.onStdout((message) => message.includes('hmr update /index.css'))
|
|
|
|
if (env.ENGINE === 'stable') {
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.btn {
|
|
border-radius: 0.25rem;
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(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;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
|
|
if (env.ENGINE === 'oxide') {
|
|
expect(await fetchCSS()).toIncludeCss(
|
|
css`
|
|
.btn {
|
|
border-radius: 0.25rem;
|
|
background-color: #ef4444;
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
|
|
return runningProcess.stop()
|
|
})
|
|
})
|