Intecmedia.Webpack/plugin.html-validate.img.js at master · Intecmedia/Intecmedia.Webpack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
const { Rule } = require('html-validate');
const { nodeIgnore } = require('./plugin.html-validate.utils');

/**
 * @typedef { import('html-validate').DOMReadyEvent } DOMReadyEvent
 */

/**
 * Lint `img` should be wrapped with `picture`.
 */
class ImgPictureRequired extends Rule {
    /**
     * @param {object} options - plugin options
     */
    constructor(options) {
        super({
            webp: true,
            avif: false,
            ignore: '.wysiwyg img, img.ignore-html-validate',
            ...options,
        });
        this.domReady = this.domReady.bind(this);
    }

    /**
     * Setup plugin events.
     */
    setup() {
        this.on('dom:ready', this.domReady);
    }

    /**
     * Lint html document.
     * @param {DOMReadyEvent.document} document - document object
     */
    domReady({ document }) {
        const imgs = document.querySelectorAll('img');
        const ignores = this.options.ignore ? document.querySelectorAll(this.options.ignore) : [];
        imgs.forEach((img) => {
            if (nodeIgnore(img, ignores)) {
                return;
            }
            const picture = img.parent;
            const [src] = img.getAttributeValue('src').split('?', 2);
            const sourcesWebp = picture ? picture.querySelectorAll('> source[type="image/webp"]') : [];
            const sourcesAvif = picture ? picture.querySelectorAll('> source[type="image/avif"]') : [];

            if (src.endsWith('.svg')) {
                if (sourcesWebp && sourcesWebp.length > 0) {
                    this.report(picture, `<img src="${src}">: <picture> contains useless <source type="image/webp"> element.`);
                }
                if (sourcesAvif && sourcesAvif.length > 0) {
                    this.report(picture, `<img src="${src}">: <picture> contains useless <source type="image/avif"> element.`);
                }
                return;
            }
            if (!(picture && picture.nodeName.toLowerCase() === 'picture')) {
                this.report(img, `<img src="${src}">: <img> required <picture> element.`);
                return;
            }
            if (this.options.webp) {
                if (!(sourcesWebp && sourcesWebp.length > 0)) {
                    this.report(picture, `<img src="${src}">: <picture> required <source type="image/webp"> element.`);
                }
            }
            if (this.options.avif) {
                if (!(sourcesAvif && sourcesAvif.length > 0)) {
                    this.report(picture, `<img src="${src}">: <picture> required <source type="image/avif"> element.`);
                }
            }
        });
    }
}

/**
 * Lint `img[loading]` required attribute.
 */
class ImgLoadingRequired extends Rule {
    /**
     * @param {object} options - plugin options
     */
    constructor(options) {
        super({ ignore: '.wysiwyg img', ...options });
        this.domReady = this.domReady.bind(this);
    }

    /**
     * Setup plugin events.
     */
    setup() {
        this.on('dom:ready', this.domReady);
    }

    /**
     * Lint html document.
     * @param {DOMReadyEvent.document} document - document object
     */
    domReady({ document }) {
        const imgs = document.querySelectorAll('img');
        const ignores = this.options.ignore ? document.querySelectorAll(this.options.ignore) : [];
        imgs.forEach((img) => {
            if (nodeIgnore(img, ignores)) {
                return;
            }

            const loading = img.getAttributeValue('loading');
            if (!loading) {
                this.report(img, '<img> required `loading` attribute.');
            }
        });
    }
}

module.exports = { ImgPictureRequired, ImgLoadingRequired };

module.exports.rules = {
    'pitcher/img-picture-required': ImgPictureRequired,
    'pitcher/img-loading-required': ImgLoadingRequired,
};