GoogleChromeLabs / critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
https://npm.im/critters-webpack-plugin
Apache License 2.0
3.42k stars 108 forks source link

Add the option of a prefix path #146

Closed TheElegantCoding closed 1 month ago

TheElegantCoding commented 10 months ago

in my vite project, the html compiles whit a default url, this url is generated depending on some environment variables in the project so is a dynamic url

http://localhost:4000/assets/index-awd12431.css

so this CSS file exists in my dist folder but critters can't find the file because it is unable to search for a path with localhost.

so it will be nice to have a prefixPath option, this way it is possible to ignore the prefix and only search for the files in the current path

  const critters = new Critters({
    pruneSource: true,
    path: './dist',
    prefixPath: 'http://localhost:4000'
  });

this will omit the http://localhost:4000 part of the import and get this result

/assets/index-awd12431.css

TheElegantCoding commented 1 month ago

didn't notice that publicPath option make this, please add more examples in the readme, it works like this

      const critters = new Critters({
        inlineFonts: true,
        path: distributionPath,
        pruneSource: true,
        publicPath: 'http://localhost:4321'
      });