Дело, собственно не в Gulp, а что-то не так с самим CSS. Имеется следующий код:
body {
font-family: Arial;
display: flex;
flex-direction: column;
font-size: 16px;
}
span {
font-size: 20px;
}
.no-webp .withbg {
background: url(../img/morskiye_vodorosli_mini.jpg); }
.withbg {
border: 1px solid green;
font-size: 30px;
background-size: cover;
background-position: center;
}
@media (max-width: 767px) {
span {
font-size: 14px;
}
.withbg {
font-size: 25px;
}
}
.webp .withbg { background: url(../img/morskiye_vodorosli_mini.webp); }
Js добавляет к BODY класс .webp, если последний поддерживается браузером. Проблема в том, что когда у элемента, к которому добавился класс .wepb в CSS зачеркиваются все свойства, кроме URL.
Похоже, я что-то недопонимаю в наследовании классов. Но этот код сгенерил популярный Gulp-плагин webpcss.
!important
, но буду признателен за более правильное решение.