CSS assets are not able to bust cache after being updated

[claytoncollie]

Describe the bug

Currently, the package.json defines JS file paths, which builds the *.assets.php file for each asset. If we only define the JS assets, a corresponding CSS file is also compiled without an *.assets.php file. And then, when we enqueue the CSS file, the version number that we are looking up with the get_asset_info function is from the JS file, not the CSS file, causing the CSS files to stay cached.

I proposed that we do the following.

1. Define all stylesheets in the package.json
2. Adjust our script and style enqueues to match the new file names

Steps to Reproduce

1. Clone the repo
2. cd into wp-content
3. Run npm run build
4. Open the file explorer
5. Look in the theme dist directory
6. See if we have *.assets.php file any of the CSS files

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[fabiankaegy]

@claytoncollie When the file doesn't get added as it's own entry point but rather the CSS gets imported through the JS I was under the impression that the version hash of the JS file would include the changes of the CSS file and therefore could be used to bust the cache for both. (I agree it isn't as efficient...)

The reason for running the CSS through the JS rather than having it defined as it's own entry point is hat it's the only way to get CSS hot reloading 🤔

[claytoncollie]

Good to know @fabiankaegy I was wondering what this import was for.

But if that is the case and we are importing all of our CSS into the JS files, we should not need to enqueue the frontend styles, correct?

[nicoladj77]

@claytoncollie @fabiankaegy if we include css in js we end up with a super big file and delay loading of js which is bad I think

[fabiankaegy]

@claytoncollie No. They are still two separate files that are getting output.

What I mean is that the version parameter in the .asset.php file of the JS entrypoint gets updated whenever the JS OR the CSS file gets updated. So you can use the same version to bust both caches.

They still need to get enqueued separately

[fabiankaegy]

@claytoncollie @fabiankaegy if we include css in js we end up with a super big file and delay loading of js which is bad I think

Yeah is is not what I meant. That is not happening :)