Don’t cache .css files in Tailwind projects

[drwpow]

Resolves #3041, #3246

Changes

2021-05-19.18-55-25.2021-05-19.18_55_59.mp4

Our dev server aggressively caches builds, which is good for HMR but is really hard for making Tailwind usable.

Problem

In the server, we can see that an .html or .js file changed, and send the necessary HMR response, either to reload the page, or clear the cache, or both. But with Tailwind, index.html is the file that changes, but global.css is the file that needs the HMR response / cache bust.

There’s currently no link between these files, at least as far as the dev server is aware. To fix this, we’d have to a) scan index.html contents and see, or b) build some dependency graph, or c) conditionally change caching behavior based on whether Tailwind is present or not.

This PR

In Tailwind projects only, .css files are not cached in the dev server. This lets Tailwind handle when they are rebuilt, and not Snowpack.

This PR adds a devOptions.tailwindConfig option to enable / disable Tailwind. This saves us from having to scan for Tailwind presence/absense and instead lets the user tell us.

Testing

Manually tested; not easy to write a test for this

Docs

Added devOptions.tailwindConfig as a config option, added docs.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pikapkg/snowpack/AyRuZ8fJpxwaG8q14mgvPALrcFXQ
✅ Preview: https://snowpack-git-tailwind-pikapkg.vercel.app

[matthewp]

I'm fine with this, will defer to @FredKSchott . It would be nice if we knew the project used Tailwind (check the package.json?) and conditionally apply this optimization. Not sure how practical that is.

[drwpow]

@matthewp good suggestion! Added a config option. Tested and still seems to be working. Now we only don’t cache if devOptions.tailwindConfig is set.