Gulp-webp-css ignores background:none, background-size, how to make friends?

Question

css

I'm building a template in VS Code with Gulp, I need to remove the icon when the screen is reduced using background:none

&__schedule {
    color: #999999;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    padding: 0px 0px 0px 38px;
    background: url("../img/icons/header/calendar.png") left no-repeat;
    span {
      font-weight: 900;
    }

    @media (max-width: $md1+px) {
      background: none;
      padding: 0;
    }
  }

As a result , the background does not disappear, but only loses its positioning.
I found out that the reason lies in the work of the gulp-webp-css plugin . It forces the image to be rendered despite background:none :

It also ignores background-size changes .
When you disable the call to webpcss or if you prescribe the path to a non-existent image, everything works as it should.
So in gulpfile.js I call the webpcss plugin:

function css() {
  return src(path.src.css)
    .pipe(
      scss({
        outputStyle: "expanded"
      })
    )
    .pipe(group_media())
    .pipe(
      autoprefixer({
        overrideBrowserslist: ['last 2 versions'],
        cascade: true
      })
    )
    .pipe(webpcss())
    .pipe(dest(path.build.css))
    .pipe(clean_css())
    .pipe(
      rename({
        extname: ".min.css"
      })
    )
    .pipe(dest(path.build.css))
    .pipe(browsersync.stream())
}

Maybe in gulpfile.js you need to somehow change the order of the commands?
Thanks in advance!

UPD:
background:none worked after adding the following parameters to webpcss in gulpfile:

.pipe(webpcss({ webpClass: '', noWebpClass: '.no-webp' }))

background-size started to react, it was necessary to decompose the entry from

background: url("../img/icons/header/phone.png") left no-repeat;

in

background-image: url("../img/icons/header/phone.png");
      background-repeat: no-repeat;
      background-position: left;

PS: If there is a concise solution, I will be glad!

Answer 1

There is a concise solution - do not use gulp-webp-css, and with it gulp, switch to webpack, it's simpler, easier, and everything is more, and everything is fresh. Program your config however you want.

Answer 2

Maybe in gulpfile.js you need to somehow change the order of the commands?

Exactly!
.pipe(webpcss(
['.jpg', '.jpeg', '.png']
))
.pipe(dest(path.build.css))
.pipe(clean_css())
.pipe(
rename({
extname: ".min.css"
})
)
.pipe(group_media())
.pipe(
autoprefixer({
grid: true,
overrideBrowserslist: ["last 5 versions"],
cascade: true
})
)
And be sure to restart gulp !!!

Answer 3

The problem is in the final css file, namely in its assembly.
function css() {
return src(path.src.css)
.pipe(
scss({
outputStyle: "expanded"
})
)
.pipe(webpcss()) // put image loading before media queries in final css file
.pipe( group_media())
.pipe(
autoprefixer({
overrideBrowserslist: ['last 2 versions'],
cascade: true
})
)
.pipe(dest(path.build.css))
.pipe(clean_css())
.pipe(
rename( {
extname: ".min.css"
})
)
.pipe(dest(path.build.css))
.pipe(browsersync.stream())
}