fix watchers never being cleaned up

[Gazler]

Previously, there was an issue, where a slow compilation could cause the watchers to build up and never be cleaned. This would result in both excessive logging and the compilation time increasing exponentially.

This fix is a naive patch, simply locking if there is a build in progress, and unlocking when it completes. I'm marking it as a draft because I believe this lock can get stuck in a locked state resulting in the project never rebuilding.

The setup for this is a little involved, as it requires slowing down tailwind compilation enough so that the callback is triggered multiple times concurrently, but using the script below I was able to reproduce it fairly reliably:

---

Requirements

We need a way to stress the CPU to slow down tailwind compilation, for example stress-ng.

stress-ng --cpu 16 --timeout 10

It can be install with apt, homebrew or similar.

Installation

There is a one-liner at the bottom to perform the required setup and run the tailwindcli.

Create a new directory:

mkdir twtest && cd twtest

Create a package.json with the correct deps.

cat << 'EOF' > package.json
{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.11",
    "daisyui": "^5.0.46",
    "tailwindcss": "^4.1.11"
  }
}
EOF

Create the input css:

mkdir src
cat << 'EOF' > src/.input.css
@import "tailwindcss" source(none);
@plugin "daisyui";
@source "../core_components.ex";
@source "../home.html.heex";
@source "./input.css";

EOF

Install tailwind, daisyui, and some HTML to make tailwind do some work:

npm install
wget https://raw.githubusercontent.com/phoenixframework/phoenix/refs/heads/main/installer/templates/phx_web/components/core_components.ex
wget https://github.com/phoenixframework/phoenix/blob/main/installer/templates/phx_web/controllers/page_html/home.html.heex

Usage

This is easiest with 3 terminal windows:

Start a tailwindcli watcher in one terminal:

npx @tailwindcss/cli -i src/input.css -o src/output.css --watch

Start a stress test in another:

stress-ng --cpu 16 --timeout 30

Force repeated compilation in another:

for i in $(seq 1 50); do touch src/input.css; sleep 0.1; done

Result

Once the stress test has completed, you can run:

touch src/input.css

You should see that there is repeated output, and the duration is in the multiple seconds.

If this setup doesn't cause the issue, you can also add the -p flag which causes the
CSS to be printed, slowing things down further:

npx @tailwindcss/cli -i src/input.css -p --watch

One-liner

mkdir twtest && cd twtest
cat << 'EOF' > package.json
{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.11",
    "daisyui": "^5.0.46",
    "tailwindcss": "^4.1.11"
  }
}
EOF

mkdir src
cat << 'EOF' > src/input.css
@import "tailwindcss" source(none);
@plugin "daisyui";
@source "../core_components.ex";
@source "../home.html.heex";
@source "./input.css";

EOF

npm install
wget https://raw.githubusercontent.com/phoenixframework/phoenix/refs/heads/main/installer/templates/phx_web/components/core_components.ex
wget https://github.com/phoenixframework/phoenix/blob/main/installer/templates/phx_web/controllers/page_html/home.html.heex
npx @tailwindcss/cli -i src/input.css -o src/output.css --watch