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

Compilation asset keys (path) don't mach on Windows (Unable to locate stylesheet)

boardend opened this issue · comments

On Windows 10 (CMD/PowerShell/Git Bash) the latest Critters version (1.3.5) is "Unable to locate stylesheet", but the same setup works without problems on a Unix-like system / WSL 2.

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',
  compilationAssetKeys: [
    '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',
  compilationAssetKeys: [
    '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

Ahh, good catch. We can definitely get this fixed, I'm now working part-time on a windows machine so its easier to test. It looks like most of the path manipulation in that function needs to be normalized - likely to forward slashes, since they're URLs, but right now it's a mix.