impl

yeonjuan · yeonjuan · commit 172db7073873 · 2025-05-04T01:59:21.000+09:00
diff --git a/docs/rules.md b/docs/rules.md
@@ -29,6 +29,7 @@
 | [require-li-container](rules/require-li-container)           | Enforce `<li>` to be in `<ul>`, `<ol>` or `<menu>`.                                            | ⭐   |
 | [require-meta-charset](rules/require-meta-charset)           | Enforce to use `<meta charset="...">` in `<head>`                                              |      |
 | [use-baseline](rules/use-baseline)                           | Enforce the use of baseline features.                                                          | ⭐   |
+| [use-standard-html](rules/use-standard-html)                 | TBD                                                                                            | 🔧   |
 
 ## SEO
 
diff --git a/packages/eslint-plugin/lib/rules/use-standard-html/check-content-model.js b/packages/eslint-plugin/lib/rules/use-standard-html/check-content-model.js
@@ -29,6 +29,7 @@ const CONTINUE = true;
 const MESSAGE_IDS = {
   REQUIRED: "required",
   NOT_ALLOWED: "notAllowed",
+  NOT_ALLOWED_DESCENDANT: "notAllowedDescendant",
 };
 
 /**
@@ -104,6 +105,7 @@ function checkContentModel(
         break;
       }
       case "either": {
+        result = EXIT;
         break;
       }
       default: {
@@ -145,8 +147,15 @@ function required(model, context, state, node) {
     child = getChild(state);
   }
   if (!child) {
+    if (model.contents.has("#text")) {
+      return EXIT;
+    }
     context.report({
       node: node.openStart,
+      data: {
+        parent: getDisplayNodeName(node),
+        child: Array.from(model.contents.keys()).join(","),
+      },
       messageId: MESSAGE_IDS.REQUIRED,
     });
     return EXIT;
@@ -206,6 +215,29 @@ function zeroOrMore(model, state) {
  * @returns {boolean}
  */
 function oneOrMore(model, context, state, node) {
+  if (model.constraints && model.constraints.children) {
+    const childrenConstraints = Array.from(
+      model.constraints.children.entries()
+    );
+    const required = childrenConstraints.filter(
+      ([, value]) => value.required === true
+    );
+    const missings = required.filter(
+      ([name]) => !node.children.some((child) => getNodeName(child) === name)
+    );
+    if (missings.length) {
+      context.report({
+        messageId: MESSAGE_IDS.REQUIRED,
+        data: {
+          parent: getDisplayNodeName(node),
+          child: missings.map(([name]) => name).join(","),
+        },
+        node,
+      });
+      return EXIT;
+    }
+  }
+
   let child = getChild(state);
   if (!child) {
     state.childIndex++;
diff --git a/packages/eslint-plugin/lib/rules/use-standard-html/helpers.js b/packages/eslint-plugin/lib/rules/use-standard-html/helpers.js
@@ -24,7 +24,7 @@ function shouldIgnoreChild(child) {
  */
 function getNodeName(node) {
   if (isTag(node)) {
-    return node.name;
+    return node.name.toLowerCase();
   }
   if (isText(node)) {
     return "#text";
diff --git a/packages/eslint-plugin/lib/rules/use-standard-html/use-standard-html.js b/packages/eslint-plugin/lib/rules/use-standard-html/use-standard-html.js
@@ -40,7 +40,8 @@ module.exports = {
       },
     ],
     messages: {
-      [MESSAGE_IDS.REQUIRED]: "required",
+      [MESSAGE_IDS.REQUIRED]:
+        "Element '{{parent}}' is missing a required instance of child element '{{child}}'",
       [MESSAGE_IDS.NOT_ALLOWED]:
         "Element '{{child}}' not allowed as child of element '{{parent}}'",
     },
diff --git a/packages/eslint-plugin/tests/rules/use-standard-html.test.js b/packages/eslint-plugin/tests/rules/use-standard-html.test.js
@@ -21,7 +21,7 @@ ruleTester.run("use-standard-html", rule, {
       code: `<slot></slot>`,
     },
     {
-      code: `<html><head></head><body></body></html>`,
+      code: `<html><head><title></title></head><body></body></html>`,
     },
     {
       code: `<menu><li></li></menu>`,
@@ -60,7 +60,7 @@ ruleTester.run("use-standard-html", rule, {
       code: "<custom-element>content</custom-element>",
     },
     {
-      code: "<head><style> div {} </style> <script> console.log('hello'); </script></head>",
+      code: "<head><title></title><style> div {} </style> <script> console.log('hello'); </script></head>",
     },
     {
       code: `
@@ -171,5 +171,14 @@ ruleTester.run("use-standard-html", rule, {
         },
       ],
     },
+    // constraints
+    {
+      code: `<address><header></header></address>`,
+      errors: [
+        {
+          messageId: "notAllowed",
+        },
+      ],
+    },
   ],
 });
diff --git a/packages/website/src/components/header/header.html b/packages/website/src/components/header/header.html
@@ -5,19 +5,20 @@
   flex-direction: column;
 }
 
-.burger > div {
+.burger > span {
+  display: block;
   height: 2px;
   transition: 0.2s ease-out;
   z-index: 999;
 }
 
-.menuInput:checked ~ .burger > div:nth-child(1) {
+.menuInput:checked ~ .burger > span:nth-child(1) {
   transform: translateY(6.5px) rotate(45deg);
 }
-.menuInput:checked ~ .burger > div:nth-child(2) {
+.menuInput:checked ~ .burger > span:nth-child(2) {
   opacity: 0;
 }
-.menuInput:checked ~ .burger > div:nth-child(3) {
+.menuInput:checked ~ .burger > span:nth-child(3) {
   transform: translateY(-6.5px) rotate(-45deg);
 }
 </style>
@@ -44,11 +45,11 @@
   <span
     for="menu"
     aria-label="menu button"
-    class="burger flex flex-col justify-between ml-auto h-[21px] w-[21px] px-[1px] py-[3px] [&>div]:h-[2px] [&>div]:w-[18px] [&>div]:bg-black-900 md:hidden hover:cursor-pointer"
+    class="burger flex flex-col justify-between ml-auto h-[21px] w-[21px] px-[1px] py-[3px] [&>span]:h-[2px] [&>span]:w-[18px] [&>span]:bg-black-900 md:hidden hover:cursor-pointer"
   >
-    <div></div>
-    <div></div>
-    <div></div>
+    <span></span>
+    <span></span>
+    <span></span>
   </span>
   <module href="/components/header/nav.html"></module>
 </header>
diff --git a/packages/website/src/components/playground.html b/packages/website/src/components/playground.html
@@ -1,12 +1,12 @@
-<div class="w-full">
-  <style>
-      .CodeMirror {
-          font-size: 14px;
-      }
-      .editor_error {
-  text-decoration: underline dashed red;
+<style>
+  .CodeMirror {
+      font-size: 14px;
+  }
+  .editor_error {
+text-decoration: underline dashed red;
 }
-  </style>
+</style>
+<div class="w-full">
   <h1 class="sr-only">Playground</h1>
   <div class="flex flex-col mt-3 px-2 w-full ">
     <div class="flex" id="language-tabs">

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ function shouldIgnoreChild(child) {`
`24`	`24`	`*/`
`25`	`25`	`function getNodeName(node) {`
`26`	`26`	`if (isTag(node)) {`
`27`		`- return node.name;`
	`27`	`+ return node.name.toLowerCase();`
`28`	`28`	`}`
`29`	`29`	`if (isText(node)) {`
`30`	`30`	`return "#text";`