Fallback background-image is overwritten when using image-set

[maxnordlund]

When using a background-image: image-set(...) the recommendation is to have a fallback background-image: url(...), however that fallback is currently removed by parcel-css.

This is broken out from #109 (comment)

Expected:

.example {
    background-image: url("background.png");
    background-image: image-set(
        url("background.avif") type("image/avif"),
        url("background.png") type("image/png")
    );
}

To become:

.example {
    background-image: url("background.png");
    background-image: -webkit-image-set(
        url("background.avif") type("image/avif"),
        url("background.png") type("image/png")
    );
    background-image: image-set(
        url("background.avif") type("image/avif"),
        url("background.png") type("image/png")
    );
}

But became:

.example {
    /* Notice the missing background-image: url here */
    background-image: -webkit-image-set(
        url("background.avif") type("image/avif"),
        url("background.png") type("image/png")
    );
    background-image: image-set(
        url("background.avif") type("image/avif"),
        url("background.png") type("image/png")
    );
}

---

If you look at https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function you can take this a step further by generating @media queries to try to emulate the switching for now supportive browsers as well.

[devongovett]

Above commit will preserve the fallback, but only if one of your targets doesn't support image-set() (or a prefixed version). If every target supports it, then the fallback is useless.