gulp-avif-css

Generates additional expressions with .webp & .avif classes and appropriate extension

Usage

Install gulp-avif-css as a development dependency:

npm install -D gulp-avif-css

Add it to your gulpfile.js

const gulp = require("gulp")
const avifcss = require("gulp-avif-css")

gulp.src("./src/css/*.css")
    .pipe(avifcss())
    .pipe(gulp.dest("./dist"))

Include special plugin adds .avif and .webp classes to body (if it supports) into your JavaScript file (add it into head tag)

import "gulp-avif-css/plugin"

Examples

Input:

.box {
    background-image: url("image.png");
}

Output:

.box {
    background-image: url("image.png");
}

.webp .box {
    background-image: url("image.webp");
}

.avif .box {
    background-image: url("image.avif");
}

Parameters

extensions

Type: Array
Default: ["png", "jpg", "jpeg", "JPG", "JPEG"]

Sets fallback extensions