ai/webp-in-css

Image is not defined

talentlessguy opened this issue · 6 comments

talentlessguy commented

When I try to build my site using Poi, PostCSS and webp-in-css I get the following error:

./styles/footer.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Loading PostCSS Plugin failed: Image is not defined

(@/home/v1rtl/Desktop/Coding/v1rtl.site/.postcssrc)
    at Array.map (<anonymous>)

As I understand this is because my site uses node.js environment and not browser one and that's why Image is not available. How I can fix this?

My .postcssrc:

{
  "plugins": 
  {
    "precss": {},
    "autoprefixer": {},
    "webp-in-css": {},
    "cssnano": {
      "preset": "default"
    }
  }

One of styles that uses webp:

header {
  display: flex;
  align-items: center;
  flex-direction: column;
  user-select: none;
  height: 100vh;
  background-image: url('../assets/background.webp');
}

If you need to check all the files, repo is here

ai commented

Replace webp-in-css to webp-in-css/plugin

talentlessguy commented

Replace webp-in-css to webp-in-css/plugin

oops, sorry. I'll try it and close if it works :D

ai commented

Don't close it. It is not your fault, wet need to improve DX by warning.

talentlessguy commented

okay 👌

It works now

ai commented

I renamed index.js to polyfill.js to avoid this mistake in the future
e4f6959

  • 👍1
ai commented

The fix was released in 0.3