From 0f2963f86956c6c93adc7e73eb716bdd5813bb4e Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 21 May 2024 17:26:48 +0300 Subject: [PATCH] Adds a new rule req-webp-in-picture (#110) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adds a new rule req-webp-in-picture * Добавляет описание правила * Добавляет правило в список * Update CHANGELOG.md --- CHANGELOG.md | 4 +- docs/list-of-rules.md | 67 +++++++++++++++-------------- rules/req-webp-in-picture/README.md | 40 +++++++++++++++++ rules/req-webp-in-picture/index.js | 20 +++++++++ 4 files changed, 97 insertions(+), 34 deletions(-) create mode 100644 rules/req-webp-in-picture/README.md create mode 100644 rules/req-webp-in-picture/index.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 24dd61d..4c6394c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,12 +3,14 @@ ## 1.0.20 - Adds a `req-tags-presence` rule that requires the specified tags on the page. - Adds a `req-preload-font` rule that requires the `preload` value for the font. +- Adds a `req-webp-in-picture` rule that requires `webp` in `` ```json { "htmlacademy/req-tags-presence": [ true, ["header", "nav", "main", "section", "h1", "footer"]], - "htmlacademy/req-preload-font": true + "htmlacademy/req-preload-font": true, + "htmlacademy/req-webp-in-picture": true } ``` diff --git a/docs/list-of-rules.md b/docs/list-of-rules.md index b0a4de9..00f5bb5 100644 --- a/docs/list-of-rules.md +++ b/docs/list-of-rules.md @@ -1,36 +1,37 @@ # Список правил от HTML Academy -| Имя правила | Описания | -|------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------| -| [htmlacademy/a-target-rel](../rules/a-target-rel/README.md) | Проверяет наличие `rel="noopener noreferrer"` у `` | -| [htmlacademy/aria-label-misuse](../rules/aria-label-misuse/README.md) | Требует использование `aria-label` на определённых элементах | -| [htmlacademy/attr-delimiter](../rules/attr-delimiter/README.md) | Требует удалить пробел между `=` для атрибутов | -| [htmlacademy/attr-req-value](../rules/attr-req-value/README.md) | Запрещает пустые атрибуты `""`, кроме тех что в `ignore: []` | -| [htmlacademy/attribute-allowed-values](../rules/attribute-allowed-values/README.md) | Проверяет атрибуты на наличие допустимых значений | -| [htmlacademy/ban-url-spaces](../rules/ban-url-spaces/README.md) | Проверяет наличие пробелов в адресах в атрибутах `href` и `src`. | -| [htmlacademy/charset-position](../rules/charset-position/README.md) | Требует указывать `` первым элементов в `` | -| [htmlacademy/class-first](../rules/class-first/README.md) | Требует указывать первым атрибутом у любого элемента `class` | -| [htmlacademy/form-action-attribute](../rules/form-action-attribute/README.md) | Требует указывать атрибут `action` у `
` | -| [htmlacademy/head-meta-charset](../rules/head-meta-charset/README.md) | Проверяет наличие `` в `` | -| [htmlacademy/id-no-dup](../rules/id-no-dup/README.md) | Запрешает дублирование `id` на странице | -| [htmlacademy/img-svg-req-dimensions](../rules/img-svg-req-dimensions/README.md) | Требует атрибуты `width` и `height` у `` и `` | -| [htmlacademy/input-req-label](../rules/input-req-label/README.md) | Требует наличие метки для поля ввода, и позволяет указать метку в `aria-label` | -| [htmlacademy/link-req-content](../rules/link-req-content/README.md) | Проверяет наличие текстового содержания у `` | -| [htmlacademy/no-blocking-script](../rules/no-blocking-script/README.md) | Проверяет расположение скриптов в разметке | -| [htmlacademy/no-double-br](../rules/no-double-br/README.md) | Запрещает идущие подряд двойной `
` | -| [htmlacademy/no-px-size](../rules/no-px-size/README.md) | Атрибуты `width` и `height` содержат только цифры, без единиц измерения | -| [htmlacademy/req-charset-utf](../rules/req-charset-utf/README.md) | Требует `UTF-8` для `` | -| [htmlacademy/req-head-styles](../rules/req-head-styles/README.md) | Запрещает подключение стилей вне `` | -| [htmlacademy/req-mailto](../rules/req-mailto/README.md) | Требует `mailto:` для ссылок c email-текстом | +| Имя правила | Описания | +|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| +| [htmlacademy/a-target-rel](../rules/a-target-rel/README.md) | Проверяет наличие `rel="noopener noreferrer"` у `` | +| [htmlacademy/aria-label-misuse](../rules/aria-label-misuse/README.md) | Требует использование `aria-label` на определённых элементах | +| [htmlacademy/attr-delimiter](../rules/attr-delimiter/README.md) | Требует удалить пробел между `=` для атрибутов | +| [htmlacademy/attr-req-value](../rules/attr-req-value/README.md) | Запрещает пустые атрибуты `""`, кроме тех что в `ignore: []` | +| [htmlacademy/attribute-allowed-values](../rules/attribute-allowed-values/README.md) | Проверяет атрибуты на наличие допустимых значений | +| [htmlacademy/ban-url-spaces](../rules/ban-url-spaces/README.md) | Проверяет наличие пробелов в адресах в атрибутах `href` и `src`. | +| [htmlacademy/charset-position](../rules/charset-position/README.md) | Требует указывать `` первым элементов в `` | +| [htmlacademy/class-first](../rules/class-first/README.md) | Требует указывать первым атрибутом у любого элемента `class` | +| [htmlacademy/form-action-attribute](../rules/form-action-attribute/README.md) | Требует указывать атрибут `action` у `` | +| [htmlacademy/head-meta-charset](../rules/head-meta-charset/README.md) | Проверяет наличие `` в `` | +| [htmlacademy/id-no-dup](../rules/id-no-dup/README.md) | Запрешает дублирование `id` на странице | +| [htmlacademy/img-svg-req-dimensions](../rules/img-svg-req-dimensions/README.md) | Требует атрибуты `width` и `height` у `` и `` | +| [htmlacademy/input-req-label](../rules/input-req-label/README.md) | Требует наличие метки для поля ввода, и позволяет указать метку в `aria-label` | +| [htmlacademy/link-req-content](../rules/link-req-content/README.md) | Проверяет наличие текстового содержания у `` | +| [htmlacademy/no-blocking-script](../rules/no-blocking-script/README.md) | Проверяет расположение скриптов в разметке | +| [htmlacademy/no-double-br](../rules/no-double-br/README.md) | Запрещает идущие подряд двойной `
` | +| [htmlacademy/no-px-size](../rules/no-px-size/README.md) | Атрибуты `width` и `height` содержат только цифры, без единиц измерения | +| [htmlacademy/req-charset-utf](../rules/req-charset-utf/README.md) | Требует `UTF-8` для `` | +| [htmlacademy/req-head-styles](../rules/req-head-styles/README.md) | Запрещает подключение стилей вне `` | +| [htmlacademy/req-mailto](../rules/req-mailto/README.md) | Требует `mailto:` для ссылок c email-текстом | | [htmlacademy/req-meta-viewport](../rules/req-meta-viewport/README.md) | Проверяет наличие `` в `` | -| [htmlacademy/req-preload-font](../rules/req-preload-font/README.md) | Проверяет наличие предзагрузки шрифта в `` | -| [htmlacademy/req-single-styles](../rules/req-single-styles/README.md) | Разрешает не более одного `link rel="stylesheet"` в `` | -| [htmlacademy/req-source-width-height](../rules/req-source-width-height/README.md) | Требует `width` и `height` у `` внутри `` | -| [htmlacademy/req-stylesheet-link](../rules/req-stylesheet-link/README.md) | Проверяет наличие `` с непустым `href` | -| [htmlacademy/req-tags-presence](../rules/req-tags-presence/README.md) | Требует указанные теги на странице | -| [htmlacademy/section-has-heading](../rules/section-has-heading/README.md) | Требует добавление заголовка любого уровня в `
` | -| [htmlacademy/space-between-comments](../rules/space-between-comments/README.md) | Проверят пробелы у комментария `` | -| [htmlacademy/tag-forbid-attr](../rules/tag-forbid-attr/README.md) | Указанные атрибуты должны отсутствовать в указанном теге | -| [htmlacademy/tag-name-lowercase](../rules/tag-name-lowercase/README.md) | Имена тегов должны быть строчными | -| [htmlacademy/tag-req-attr](../rules/tag-req-attr/README.md) | Указанные атрибуты должны присутствовать в указанном теге | -| [htmlacademy/tag-self-close](../rules/tag-self-close/README.md) | Одиночные элементы не должны быть закрыты, `
` вместо `
` | +| [htmlacademy/req-preload-font](../rules/req-preload-font/README.md) | Проверяет наличие предзагрузки шрифта в `` | +| [htmlacademy/req-single-styles](../rules/req-single-styles/README.md) | Разрешает не более одного `link rel="stylesheet"` в `` | +| [htmlacademy/req-source-width-height](../rules/req-source-width-height/README.md) | Требует `width` и `height` у `` внутри `` | +| [htmlacademy/req-stylesheet-link](../rules/req-stylesheet-link/README.md) | Проверяет наличие `` с непустым `href` | +| [htmlacademy/req-tags-presence](../rules/req-tags-presence/README.md) | Требует указанные теги на странице | +| [htmlacademy/req-webp-in-picture](../rules/req-webp-in-picture/README.md) | Требует `webp` в `` | +| [htmlacademy/section-has-heading](../rules/section-has-heading/README.md) | Требует добавление заголовка любого уровня в `
` | +| [htmlacademy/space-between-comments](../rules/space-between-comments/README.md) | Проверят пробелы у комментария `` | +| [htmlacademy/tag-forbid-attr](../rules/tag-forbid-attr/README.md) | Указанные атрибуты должны отсутствовать в указанном теге | +| [htmlacademy/tag-name-lowercase](../rules/tag-name-lowercase/README.md) | Имена тегов должны быть строчными | +| [htmlacademy/tag-req-attr](../rules/tag-req-attr/README.md) | Указанные атрибуты должны присутствовать в указанном теге | +| [htmlacademy/tag-self-close](../rules/tag-self-close/README.md) | Одиночные элементы не должны быть закрыты, `
` вместо `
` | diff --git a/rules/req-webp-in-picture/README.md b/rules/req-webp-in-picture/README.md new file mode 100644 index 0000000..c603992 --- /dev/null +++ b/rules/req-webp-in-picture/README.md @@ -0,0 +1,40 @@ +# htmlacademy/req-webp-in-picture + +Правило проверяет наличие webp изображений в теге ``. + +## true + +Проблемными считаются следующие шаблоны: + +```html + + + Example image + + + + + Example image + +``` + +Следующие шаблоны **не** считаются проблемами: + +```html + + + + + + Example image + +``` + +```html + + + + Example image + +``` diff --git a/rules/req-webp-in-picture/index.js b/rules/req-webp-in-picture/index.js new file mode 100644 index 0000000..83dc693 --- /dev/null +++ b/rules/req-webp-in-picture/index.js @@ -0,0 +1,20 @@ +'use strict'; +const { is_tag_node, attribute_has_value } = require('@linthtml/dom-utils'); + +module.exports = { + name: 'htmlacademy/req-webp-in-picture', + // eslint-disable-next-line camelcase + lint(node, rule_config, { report }) { + if (is_tag_node(node) && node.tagName === 'picture') { + const sourceElements = node.children.filter((child) => child.tagName === 'source'); + const hasWebpSource = sourceElements.some((source) => attribute_has_value(source, 'type', 'image/webp')); + + if (!hasWebpSource) { + report({ + position: node.loc, + message: 'Element "picture" must contain a "source" child with a "type" attribute containing "webp".' + }); + } + } + } +};