[Bug]: Shopify theme dev not picking up most recent file change

[JasonHassold]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Remote theme should have latest version of local file

Actual behavior

Remote theme has an empty version of the file

I'm using Tailwind and it's in dev/watch mode where it rebuilds when changes occur. What I believe is happening is that it goes to update the local file and clears it and then immediately inserts the new file contents. The Shopify CLI seems to only be picking up when the file gets cleared, but not when the new tailwind file contents get inserted. I've checked the remote via the code editor built into shopify and see the file with no contents. If I manually add a new line to the file and save it will update it and fix it.

It only happens sometimes so it's likely to be some sort of race condition.

Verbose output

2024-10-29T05:21:41.515Z: Reading the content of file at sections/v2-tab-images.liquid...
2024-10-29T05:21:41.949Z: Reading the content of file at assets/tailwind.min.css...
2024-10-29T05:21:42.097Z: Request to https://{redacted}.myshopify.com/admin/api/unstable/themes/144575332602/assets/bulk.json completed in 571 ms
With response headers:

• content-type: application/json; charset=utf-8
• server-timing: processing;dur=408, cfRequestDuration;dur=499.000072
• x-request-id: 5f0e1e07-ddb3-460e-92d7-6eca9e739401-1730179301

• 01:21:42 Synced » update sections/v2-tab-images.liquid
2024-10-29T05:21:42.980Z: Request to https://{redacted}.myshopify.com/admin/api/unstable/themes/144575332602/assets/bulk.json completed in 1027 ms
With response headers:

• content-type: application/json; charset=utf-8
• server-timing: processing;dur=730, cfRequestDuration;dur=930.999994
• x-request-id: ac26c2ac-69af-4ba4-b20e-147b9cf0408c-1730179302

• 01:21:42 Synced » update assets/tailwind.min.css

Reproduction steps

1. Running tailwind css in dev mode using npx tailwindcss -i tailwind-input.css -o assets/tailwind.min.css --watch
2. Update a file that is being watched with a new tailwind class repeatedly and check to see if remote file is blank

Operating System

Windows 11 with Ubuntu 20.04.6 LTS through WSL 2

Shopify CLI version (check your project's package.json if you're not sure)

3.69.3

Shell

fish

Node version (run node -v if you're not sure)

v20.10.0

What language and version are you using in your application?

No response

[JasonHassold]

Seems to happen more frequently when I'm running shopify theme dev --theme-editor-sync

[frandiox]

@JasonHassold Hey 👋 can you please try with this version of the CLI?

That waits for 400ms before emitting events so that Tailwind has time to write the files.
Please let us know if this helps at all in your dev environment.

[JasonHassold]

@frandiox sorry I didn't see this until just now, I ended up switching the codebase I was working on to use a different dev process through vite to avoid this issue. I think I have another dev environment that still uses just tailwind so I'll try to test it