Problems with unset background-image

[tool13]

When i set some background image and then, on breakpoint, set background-image: none; it not applies, because body.webp .some-class is stronger, that just .some-class I mean http://joxi.ru/EA4zVpRFoknMnm

[ai]

As a quick hack you can add body.webp .some-class { background-image: none } manually.

As a proper solution, you can send pull request to this plugin with adding .webp selector for all background-image: none properties.

You need to add tests and fix this line of code https://github.com/ai/webp-in-css/blob/master/plugin.js#L27

[tool13]

As a quick hack you can add body.webp .some-class { background-image: none } manually.

Of course, also one can use !imortant or put background on pseudoelement, but I wanted add plugin to escape manual job.

As a proper solution, you can send pull request to this plugin with adding .webp selector for all background-image: none properties.

But just parsing background-image: none will add .webp selectors even if background was .svg, inline svg in css, gradient, etc., and it will be unneccessary duplicate, isn't it?

[ai]

But just parsing background-image: none will add .webp selectors even if background was .svg, inline svg in css, gradient, etc., and it will be unneccessary duplicate, isn't it?

Yeap. It will not break CSS but will make CSS file bigger.

Do you have any other ideas?

[tool13]

Maybe, when we find selector, which name will be replaced, we can start another search for background-image: none rule only inside this selector and replace it name?

[ai]

Note, that definitions could be in different browsers and PostCSS will not see the definitions from another file. So this method will have a limit.

Another problem is that user can unset background in a little different selector like .icon.is-hidden.

[tool13]

Exactly... okay, i haven't more ideas)