Giters

GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

Home Page:https://npm.im/critters-webpack-plugin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

dominykas opened this issue · comments

commented

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)

commented

dominykas@55a03c2 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...

commented

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

commented

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?

commented

@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
commented

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

commented

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

(Opened #58 instead)