mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
4200a1ecc4
This PR fixes slow rebuilds on Windows where rebuilds go from ~2s to ~20ms. Fixes: #16911 Fixes: #17522 ## Test plan 1. Tested it on a reproduction with the following results: Before: https://github.com/user-attachments/assets/10c5e9e0-3c41-4e1d-95f6-ee8d856577ef After: https://github.com/user-attachments/assets/2c7597e9-3fff-4922-a2da-a8d06eab9047 Zooming in on the times, it looks like this: <img width="674" alt="image" src="https://github.com/user-attachments/assets/85eee69c-bbf6-4c28-8ce3-6dcdad74be9c" /> But with these changes: <img width="719" alt="image" src="https://github.com/user-attachments/assets/d89cefda-0711-4f84-bfaf-2bea11977bf7" /> We also tested this on Windows with the following results: Before: <img width="961" alt="image" src="https://github.com/user-attachments/assets/3a42f822-f103-4598-9a91-e659ae09800c" /> After: <img width="956" alt="image" src="https://github.com/user-attachments/assets/05b6b6bc-d107-40d1-a207-3638aba3fc3a" /> [ci-all] --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
import { css, html, js, json, test } from '../utils'
|
|
|
|
test(
|
|
'webpack + PostCSS (watch)',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"main": "./src/index.js",
|
|
"browser": "./src/index.js",
|
|
"dependencies": {
|
|
"css-loader": "^6",
|
|
"postcss": "^8",
|
|
"postcss-loader": "^7",
|
|
"webpack": "^5",
|
|
"webpack-cli": "^5",
|
|
"mini-css-extract-plugin": "^2",
|
|
"tailwindcss": "workspace:^",
|
|
"@tailwindcss/postcss": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'postcss.config.js': js`
|
|
/** @type {import('postcss-load-config').Config} */
|
|
module.exports = {
|
|
plugins: {
|
|
'@tailwindcss/postcss': {},
|
|
},
|
|
}
|
|
`,
|
|
'webpack.config.js': js`
|
|
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
|
|
module.exports = {
|
|
output: {
|
|
clean: true,
|
|
},
|
|
plugins: [new MiniCssExtractPlugin()],
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /.css$/i,
|
|
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
|
|
},
|
|
],
|
|
},
|
|
}
|
|
`,
|
|
'src/index.js': js`import './index.css'`,
|
|
'src/index.html': html`
|
|
<div class="flex"></div>
|
|
`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss/theme';
|
|
@import 'tailwindcss/utilities';
|
|
`,
|
|
'src/unrelated.module.css': css`
|
|
.module {
|
|
color: var(--color-blue-500);
|
|
}
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, spawn, exec, expect }) => {
|
|
// Generate the initial build so output CSS files exist on disk
|
|
await exec('pnpm webpack --mode=development')
|
|
|
|
// NOTE: We are writing to an output CSS file which is not being ignored by
|
|
// `.gitignore` nor marked with `@source not`. This should not result in an
|
|
// infinite loop.
|
|
let process = await spawn('pnpm webpack --mode=development --watch')
|
|
await process.onStdout((m) => m.includes('compiled successfully in'))
|
|
|
|
expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
|
|
"
|
|
--- ./dist/main.css ---
|
|
:root, :host {
|
|
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
"
|
|
`)
|
|
|
|
await fs.write(
|
|
'src/unrelated.module.css',
|
|
css`
|
|
.module {
|
|
color: var(--color-blue-500);
|
|
background-color: var(--color-red-500);
|
|
}
|
|
`,
|
|
)
|
|
await process.onStdout((m) => m.includes('compiled successfully in'))
|
|
|
|
expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
|
|
"
|
|
--- ./dist/main.css ---
|
|
:root, :host {
|
|
--color-red-500: oklch(63.7% 0.237 25.331);
|
|
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
"
|
|
`)
|
|
},
|
|
)
|