feat: support linting html in template literals in lowercase

packages/eslint-plugin/lib/rules/lowercase.js

@@ -3,11 +3,13 @@
  * @typedef { import("../types").TagNode } TagNode
  * @typedef { import("../types").StyleTagNode } StyleTagNode
  * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").RuleListener } RuleListener
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const SVG_CAMEL_CASE_ATTRIBUTES = require("../constants/svg-camel-case-attributes");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
@@ -120,23 +122,23 @@ module.exports = {
       }
     }
 
-    return {
-      Tag(node) {
-        if (node.name.toLocaleLowerCase() === "svg") {
-          enterSvg(node);
-        }
-        check(node);
-      },
-      /**
-       * @param {TagNode} node
-       */
-      "Tag:exit"(node) {
-        if (node.name.toLocaleLowerCase() === "svg") {
-          exitSvg();
-        }
+    return createVisitors(
+      {
+        Tag(node) {
+          if (node.name.toLocaleLowerCase() === "svg") {
+            enterSvg(node);
+          }
+          check(node);
+        },
+        "Tag:exit"(node) {
+          if (node.name.toLocaleLowerCase() === "svg") {
+            exitSvg();
+          }
+        },
+        StyleTag: check,
+        ScriptTag: check,
       },
-      StyleTag: check,
-      ScriptTag: check,
-    };
+      context
+    );
   },
 };

packages/eslint-plugin/lib/rules/no-inline-styles.js

@@ -5,12 +5,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
-const { parse } = require("@html-eslint/template-parser");
-const {
-  shouldCheckTaggedTemplateExpression,
-  shouldCheckTemplateLiteral,
-} = require("./utils/settings");
-const { getSourceCode } = require("./utils/source-code");
+const { createVisitors } = require("./utils/visitors");
 const MESSAGE_IDS = {
   INLINE_STYLE: "unexpectedInlineStyle",
 };
@@ -36,33 +31,19 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {RuleListener}
-     */
-    const visitors = {
-      Tag(node) {
-        const styleAttr = findAttr(node, "style");
-        if (styleAttr) {
-          context.report({
-            node: styleAttr,
-            messageId: MESSAGE_IDS.INLINE_STYLE,
-          });
-        }
+    return createVisitors(
+      {
+        Tag(node) {
+          const styleAttr = findAttr(node, "style");
+          if (styleAttr) {
+            context.report({
+              node: styleAttr,
+              messageId: MESSAGE_IDS.INLINE_STYLE,
+            });
+          }
+        },
       },
-    };
-
-    return {
-      ...visitors,
-      TaggedTemplateExpression(node) {
-        if (shouldCheckTaggedTemplateExpression(node, context)) {
-          parse(node.quasi, getSourceCode(context), visitors);
-        }
-      },
-      TemplateLiteral(node) {
-        if (shouldCheckTemplateLiteral(node, context)) {
-          parse(node, getSourceCode(context), visitors);
-        }
-      },
-    };
+      context
+    );
   },
 };

packages/eslint-plugin/lib/rules/utils/visitors.js

@@ -0,0 +1,36 @@
+/**
+ * @typedef { import("../../types").RuleListener } RuleListener
+ * @typedef { import("../../types").Context } Context
+ */
+
+const {
+  shouldCheckTaggedTemplateExpression,
+  shouldCheckTemplateLiteral,
+} = require("./settings");
+const { parse } = require("@html-eslint/template-parser");
+const { getSourceCode } = require("./source-code");
+
+/**
+ * @param {RuleListener} visitors
+ * @param {Context} context
+ * @returns {RuleListener}
+ */
+function createVisitors(visitors, context) {
+  return {
+    ...visitors,
+    TaggedTemplateExpression(node) {
+      if (shouldCheckTaggedTemplateExpression(node, context)) {
+        parse(node.quasi, getSourceCode(context), visitors);
+      }
+    },
+    TemplateLiteral(node) {
+      if (shouldCheckTemplateLiteral(node, context)) {
+        parse(node, getSourceCode(context), visitors);
+      }
+    },
+  };
+}
+
+module.exports = {
+  createVisitors,
+};

packages/eslint-plugin/lib/types.d.ts

@@ -173,7 +173,14 @@ interface LineNode extends BaseNode {
   value: string;
 }
 
-interface RuleListener {
+type PostFix<T, S extends string> = {
+  [K in keyof T as `${K & string}${S}`]: T[K];
+};
+
+export type RuleListener = BaseRuleListener &
+  PostFix<BaseRuleListener, ":exit">;
+
+interface BaseRuleListener {
   Program?: (node: ProgramNode) => void;
   AttributeKey?: (node: AttributeKeyNode) => void;
   Text?: (node: TextNode) => void;

packages/eslint-plugin/package.json

@@ -44,6 +44,9 @@
     "lint",
     "accessibility"
   ],
+  "dependencies": {
+    "@html-eslint/template-parser": "^0.27.0"
+  },
   "devDependencies": {
     "@html-eslint/parser": "^0.27.0",
     "@html-eslint/template-parser": "^0.27.0",

packages/eslint-plugin/tests/rules/lowercase.test.js

@@ -2,6 +2,7 @@ const createRuleTester = require("../rule-tester");
 const rule = require("../../lib/rules/lowercase");
 
 const ruleTester = createRuleTester();
+const templateRuleTester = createRuleTester("espree");
 
 ruleTester.run("lowercase", rule, {
   valid: [
@@ -101,3 +102,34 @@ ruleTester.run("lowercase", rule, {
     },
   ],
 });
+
+templateRuleTester.run("[template] lowercase", rule, {
+  valid: [
+    {
+      code: `html\`<svg xmlns="http://www.w3.org/2000/svg" style="" viewBox="0 0 200 200"></svg>\``,
+    },
+    {
+      code: `const code = /* html */\`<svg xmlns="http://www.w3.org/2000/svg" style="" viewBox="0 0 200 200"></svg>\``,
+    },
+  ],
+  invalid: [
+    {
+      code: `html\`<svg xmlns="http://www.w3.org/2000/svg" STYLE="" viewBox="0 0 200 200"></svg>\``,
+      output: `html\`<svg xmlns="http://www.w3.org/2000/svg" style="" viewBox="0 0 200 200"></svg>\``,
+      errors: [
+        {
+          message: "'STYLE' is not in lowercase.",
+        },
+      ],
+    },
+    {
+      code: `const code = /* html */\`<svg xmlns="http://www.w3.org/2000/svg" STYLE="" viewBox="0 0 200 200"></svg>\``,
+      output: `const code = /* html */\`<svg xmlns="http://www.w3.org/2000/svg" style="" viewBox="0 0 200 200"></svg>\``,
+      errors: [
+        {
+          message: "'STYLE' is not in lowercase.",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin/tests/rules/no-inline-styles.test.js

@@ -35,7 +35,7 @@ ruleTester.run("no-inline-styles", rule, {
   ],
 });
 
-templateRuleTester.run("[template]no-inline-styles", rule, {
+templateRuleTester.run("[template] no-inline-styles", rule, {
   valid: [
     {
       code: `

packages/template-parser/lib/traverser.js

@@ -58,8 +58,8 @@ const visitorKeys = {
  * @param {TemplateHTMLVisitor} visitors
  */
 function traverse(node, visitors) {
-  const visitor = visitors[node.type];
-  visitor && visitor(node);
+  const enterVisitor = visitors[node.type];
+  enterVisitor && enterVisitor(node);
   const nextKeys = visitorKeys[node.type];
 
   nextKeys.forEach((key) => {
@@ -70,6 +70,8 @@ function traverse(node, visitors) {
       traverse(next, visitors);
     }
   });
+  const exitVisitor = visitors[`${node.type}:exit`];
+  exitVisitor && exitVisitor(node);
 }
 
 module.exports = {

packages/template-parser/lib/types.d.ts

@@ -34,7 +34,14 @@ import type {
 } from "es-html-parser";
 import { Comment } from "estree";
 
-export type TemplateHTMLVisitor = Partial<{
+type PostFix<T, S extends string> = {
+  [K in keyof T as `${K & string}${S}`]: T[K];
+};
+export type TemplateHTMLVisitor = BaseVisiter & PostFix<BaseVisiter, ":exit">;
+
+declare const a: TemplateHTMLVisitor;
+
+type BaseVisiter = Partial<{
   [NodeTypes.Document]: (node: DocumentNode) => void;
   [NodeTypes.Attribute]: (node: AttributeNode) => void;
   [NodeTypes.AttributeKey]: (node: AttributeKeyNode) => void;

packages/template-parser/tests/template-parser.test.js

@@ -23,6 +23,7 @@ const createSourceCode = (code, ast) =>
 
 const visitors = {
   Tag: jest.fn(),
+  "Tag:exit": jest.fn(),
   OpenTagStart: jest.fn(),
   CloseTag: jest.fn(),
   AttributeValue: jest.fn(),
@@ -59,6 +60,16 @@ describe("parseTemplate", () => {
         },
       })
     );
+    expect(visitors["Tag:exit"]).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: NodeTypes.Tag,
+        range: [1, 12],
+        loc: {
+          start: { line: 1, column: 1 },
+          end: { line: 1, column: 12 },
+        },
+      })
+    );
   });
 
   test("multiline", () => {