File hashes for cache-busting using the CLI

[NoelDeMartin]

I recently started a new project that requires very little JS, so I'm not using any bundler like webpack or vite. So I thought this would be the perfect time to start using the standalone CLI. It worked great, but after a while I realized... what about cache busting?

I didn't find it mentioned anywhere in the docs o searching around, so I wonder if I'm missing something here. But how would you go about distributing assets generated by the CLI? All examples I see use a static name like main.css, but as soon as the contents change, that could result in some bad UX for returning visitors.

I was thinking that maybe it would be nice to support a syntax such as this (similar to how it is done in webpack):

npx tailwindcss -i ./src/input.css -o ./dist/output.[hash].css

Even if that works, it's still necessary to manually change the name in the html file. Maybe it would make sense to generate a file similar to the mix-manifest from laravel mix, or copying an index.html from a template (similar to what bundlers do).

But maybe I'm just overthinking this and there is an easier way, maybe using some existing tools. Any thoughts?

[boynet]

did you find a solution for it?

[NoelDeMartin]

Unfortunately, no :(. I ended up using Vite with the Laravel plugin 🤷.

[boynet]

I did a little hack for it if anyone in the future looking for it, I am not sure if it good idea
in php I get the time the output file changed, and append it to the query

function getFileUpdateDate($filePath)
{
    $fullPath = public_path($filePath);
    if (file_exists($fullPath)) {
        return filemtime($fullPath);
    }
    return time(); // Fallback to current time if file does not exist should return error
}

and in the html using blade:
<link href="/css/styles.css?php{{getFileUpdateDate('css/styles.css')}}" rel="stylesheet">

[NoelDeMartin]

@boynet I think that's a good idea :D. Though instead of looking at the date, it would be better to do an md5 of the file contents. That way, this would only change when the file contents are different, rather than each time you rebuild the file.

If you do that, make sure to cache the results instead of performing an md5 on each request, etc.

[Stephan-MC]

I dont no much about css caching but I don’t think that’ll be necessary cause tailwind will always have to go through your code base to have new utility classes to add to the bundled styles.css file. So I think caching may be unnecessary here.

caching is a good feature but I don’t thing it will be needed in this scenario

[NoelDeMartin]

"Cache Busting" refers to HTTP caching, meaning that it's the browser who caches the CSS file.

When you generate CSS files with Vite (or Webpack, Laravel Mix, etc.), they have a name such as main.194b8edd.css. The hash part, 194b8edd in this case, changes depending on the contents of the file. This works out such that whenever you publish a new version of your app, the browser will download the CSS file again because it has a different file name. At the same time, though, if the file contents don't change, the file name can remain the same. That way, when a user visits your site again, the browser won't download the CSS file again. This can happen for example if you've changed some PHP code in your app, but the frontend is the same and you haven't added or removed any CSS classes.

This is not limited to CSS, it works the same way for JS files, images, etc.