Enable svg for the req-webp-in-picture rule

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 1.0.21
+Fixes `req-webp-in-picture` to not check `<picture>` if all `<source>` have attribute `type="image/svg+xml"`.
+
 ## 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.

rules/req-webp-in-picture/README.md

@@ -1,6 +1,6 @@
 # htmlacademy/req-webp-in-picture
 
-Правило проверяет наличие webp изображений в теге `<picture>`.
+Правило проверяет наличие webp изображений в теге `<picture>`. Не проверяет `<picture>` если все `<source>` имеют атрибут `type="image/svg+xml"`.
 
 ## true
 
@@ -38,3 +38,11 @@
   <img width="400" height="200" src="image.png" alt="Example image">
 </picture>
 ```
+
+```html
+<picture>
+  <source type="image/svg+xml" media="(width >= 1280px)" srcset="images/logo-1280.svg" width="33" height="38">
+  <source type="image/svg+xml" media="(width >= 768px)" srcset="images/logo-768.svg" width="33" height="38">
+  <img src="images/logo.svg" srcset="images/logo.svg" width="33" height="38" alt="">
+</picture>
+```

rules/req-webp-in-picture/index.js

@@ -7,6 +7,12 @@ module.exports = {
   lint(node, rule_config, { report }) {
     if (is_tag_node(node) && node.tagName === 'picture') {
       const sourceElements = node.children.filter((child) => child.tagName === 'source');
+      const allSourcesAreSvg = sourceElements.every((source) => attribute_has_value(source, 'type', 'image/svg+xml'));
+
+      if (allSourcesAreSvg) {
+        return;
+      }
+
       const hasWebpSource = sourceElements.some((source) => attribute_has_value(source, 'type', 'image/webp'));
 
       if (!hasWebpSource) {