Description
What version of Tailwind CSS are you using?
v3.3.3
What build tool (or framework if it abstracts the build tool) are you using?
"@angular/cli": "~16.2.3",
"autoprefixer": "10.4.16",
"postcss": "8.4.30",
"tailwindcss": "3.3.3",
What version of Node.js are you using?
For example: v18.18.0
What browser are you using?
N/A
What operating system are you using?
Windows 10, 22H2
Reproduction URL
https://github.com/akehir/tailwindowsbugger
Describe your issue
After upgrading to tailwind 3.3.3 (from 3.3.2) we faced an issue with npm start (or ng serve), with the error EMFILE: too many open files`. From my analysis, the bug is introduced in the PR when postcss was made async ( https://github.com/tailwindlabs/tailwindcss/pull/11548/files#diff-2f0997968f6094158825cb36c24f8b489c2d3f5aa72279d721077e5901280a30L169 ).
Upon reverting the changed lines in the node_modules of the project, I can execute the build successfully (see example of reverted file below).
After parsing ~8k files Windows has the error ``EMFILE: too many open files` which leads to the build failing. Our project has around 10k files to parse, triggering the error.
The reproduction is basically just creating a blank angular repository, adding tailwindcss, and creating 10'000 blank typescript files.
You can get a Windows VM from https://developer.microsoft.com/en-us/windows/downloads/virtual-machines/
In the VM, the reproduction is as follows: 1) install nodejs and clone (download) the project 2) npm i 3) npm start
With that you can trigger the error.
I think, the async code has either to be disabled on windows (keeping the old sync code), or the async code should work in batches of ~1k files. I could create a PR to disable the async part on Windows, if you'd like.
Example error in console:
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: EMFILE: too many open files, open 'C:\git\tailwindowsbugger\src\files\file-919.ts'
expandTailwindAtRules.js in node modules (adapted to fix the bug).
} else {
console.log('Reverting the changes...');
// console.log(_fs.default);
let count = 0;
for (let { file, content, extension } of context.changedContent) {
let transformer = getTransformer(context.tailwindConfig, extension)
let extractor = getExtractor(context, extension)
console.log(`File #${count}`, file);
count++;
content = file ? _fs.default.readFileSync(file, 'utf8') : content
getClassCandidates(transformer(content), extractor, candidates, seen)
}
await new Promise((resolve, reject) => {
resolve("foo");
});
// await Promise.all(context.changedContent.map(async ({ file , content , extension })=>{
// let transformer = getTransformer(context.tailwindConfig, extension);
// let extractor = getExtractor(context, extension);
// content = file ? await _fs.default.promises.readFile(file, "utf8") : content;
// console.log(`File #${count}`, file);
// count++;
// getClassCandidates(transformer(content), extractor, candidates, seen);
// }));
}