CSS does not get extracted when HtmlWebpackPlugin is set to use `hash: true`

[dominykas]

It seems that this doesn't find the CSS output files (E_NOENT) when HtmlWebpackPlugin is set up to append the hash in the query string.

(There are alternative ways to bust the cache, but I'm not sure what the implications would be on web server config in our setup, so a little reluctant to change this)

[dominykas]

https://github.com/dominykas/critters/commit/55a03c22ef01a5b41cfef29aa0f66c4e4ef6bfa8 would fix it for my use case, but I'm not sure if the same needs to be done (and undone?) elsewhere for other use cases.

I'd open a PR with this, but I can't get the tests to run on master...

[developit]

Ah - yes when Critters transforms URLs to filepaths it should absolutely be removing the querystring. I'd call that a bug.

[dominykas]

I would gladly open a PR with what I have, but I'm not sure what to do about the tests that are currently failing on master?

[boardend]

@dominykas I'm using the latest Critters version (1.3.5) and have no problems with CSS filenames which contain a hash, at least on a Unix-like system / WSL 2. But on Windows 10 (CMD/PowerShell/Git Bash) Critters gives me "Unable to locate stylesheet". So I wanted to ask, are you using Windows? (Otherwise I will open a new issue)

I think the problem is, that the path gets normalized in the "compilation.assets"-keys, but not in embedLinkedStylesheet. Here is the state in embedLinkedStylesheet on WSL2:

{
  outputPath: '/home/USERNAME/dev/git/PROJECT-ui/PROJECT/app/PROJECT-app-PROJECT2-dev/dist',
  normalizedPath: 'css/chunk-vendors.3a56f9b8.css',
  filename: '/home/USERNAME/dev/git/PROJECT-ui/PROJECT/app/PROJECT-app-PROJECT2-dev/dist/css/chunk-vendors.3a56f9b8.css',
  relativePath: 'css/chunk-vendors.3a56f9b8.css',
  compilationKeys: [
    'css/chunk-vendors.3a56f9b8.css',
    [...60 lines omitted...]
 ]
}

And the same commit, but with a clone on Windows in PowerShell:

{
  outputPath: 'C:\\dev\\git\\PROJECT-ui\\PROJECT\\app\\PROJECT-app-PROJECT2-dev\\dist',
  normalizedPath: 'css/chunk-vendors.3a56f9b8.css',
  filename: 'C:\\dev\\git\\PROJECT-ui\\PROJECT\\app\\PROJECT-app-PROJECT2-dev\\dist\\css\\chunk-vendors.3a56f9b8.css',
  relativePath: 'css\\chunk-vendors.3a56f9b8.css',
  compilationKeys: [
    'css/chunk-vendors.3a56f9b8.css',
    [...60 lines omitted...]
 ]
}

so compilation.assets[relativePath] won't match, which will produce the following error:

‼ ｢Critters｣: Unable to locate stylesheet: css\chunk-vendors.3a56f9b8.css

[dominykas]

@boardend this issue is specifically about hashes in the query, not in the filename and I'm building things on Mac and Linux.

[boardend]

@dominykas I'm sorry for the inconvenience! I should have read this issue better...

(Opened https://github.com/GoogleChromeLabs/critters/issues/58 instead)