Merge pull request #64 from htmlacademy/feature/req-meta-viewport

nikolai-shabalin · web-flow · commit fa2bcb5bf9fe · 2023-07-12T22:10:38.000+03:00
req-meta-viewport
diff --git a/rules/req-meta-viewport/README.md b/rules/req-meta-viewport/README.md
@@ -0,0 +1,21 @@
+# htmlacademy/req-meta-viewport
+
+Правило проверяет наличие `<meta name="viewport" content="width=device-width,initial-scale=1">` в `<head>`. Правило принимает значения `true` или `false`
+
+## true
+В `<head>` находится `<meta name="viewport" content="width=device-width,initial-scale=1">`.
+
+Проблемными считаются следующие шаблоны:
+```html
+<head>
+  ...
+</head>
+```
+
+Следующие шаблоны **не** считаются проблемами:
+```html
+<head>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+```
+
diff --git a/rules/req-meta-viewport/index.js b/rules/req-meta-viewport/index.js
@@ -0,0 +1,21 @@
+const { is_tag_node, attribute_has_value } = require("@linthtml/dom-utils");
+
+module.exports = {
+  name: "htmlacademy/req-meta-viewport",
+  lint(node, rule_config, { report }) {
+    if (is_tag_node(node) && node.name === "head" ) {
+      const metaViewport = node.children.filter((child) =>
+          child.name === "meta" && attribute_has_value(child, 'name', 'viewport')
+      );
+      const hasViewport = metaViewport.some((meta) => {
+        return attribute_has_value(meta, 'content', /width=device-width,.*initial-scale=1|initial-scale=1,.*width=device-width/);
+      });
+      if (hasViewport === false) {
+        report({
+          position: node.loc,
+          message: `The <head> tag should have a <meta name="viewport"> attribute.`,
+        });
+      }
+    }
+  }
+}
