feat: add allowedIgnoreCase option to no-html (#500)

* feat: add allowedIgnoreCase option to no-html

* indent options

Author: TKDev7

docs/rules/no-html.md

@@ -26,25 +26,49 @@ The following options are available on this rule:
 
 * `allowed: Array<string>` - when specified, HTML tags are allowed only if they match one of the tags in this array. (default: `[]`)
 
-Examples of **incorrect** code when configured as `"no-html": ["error", { allowed: ["b"] }]`:
+    Examples of **incorrect** code when configured as `"no-html": ["error", { allowed: ["b"] }]`:
 
-```markdown
-<!-- eslint markdown/no-html: ["error", { allowed: ["b"] }] -->
+    ```markdown
+    <!-- eslint markdown/no-html: ["error", { allowed: ["b"] }] -->
 
-# Heading 1
+    # Heading 1
 
-Hello <em>world!</em>
-```
+    Hello <em>world!</em>
+    ```
 
-Examples of **correct** code when configured as `"no-html": ["error", { allowed: ["b"] }]`:
+    Examples of **correct** code when configured as `"no-html": ["error", { allowed: ["b"] }]`:
 
-```markdown
-<!-- eslint markdown/no-html: ["error", { allowed: ["b"] }] -->
+    ```markdown
+    <!-- eslint markdown/no-html: ["error", { allowed: ["b"] }] -->
 
-# Heading 1
+    # Heading 1
 
-Hello <b>world!</b>
-```
+    Hello <b>world!</b>
+    ```
+
+* `allowedIgnoreCase: boolean` - when `true`, enables case-insensitive matching of HTML tag names against the `allowed` array described above. (default: `false`)
+
+    Examples of **incorrect** code when configured as `"no-html": ["error", { allowed: ["DIV"], allowedIgnoreCase: false }]`:
+
+    ```markdown
+    <!-- eslint markdown/no-html: ["error", { allowed: ["DIV"], allowedIgnoreCase: false }] -->
+
+    # Heading 1
+
+    <div>Hello world!</div>
+    ```
+
+    Examples of **correct** code when configured as `"no-html": ["error", { allowed: ["DIV"], allowedIgnoreCase: true }]`:
+
+    ```markdown
+    <!-- eslint markdown/no-html: ["error", { allowed: ["DIV"], allowedIgnoreCase: true }] -->
+
+    # Heading 1
+
+    <div>Hello world!</div>
+    <DIV>Hello world!</DIV>
+    <DiV>Hello world!</DiV>
+    ```
 
 ## When Not to Use It
 

src/rules/no-html.js

@@ -16,7 +16,7 @@ import { findOffsets } from "../util.js";
 /**
  * @import { MarkdownRuleDefinition } from "../types.js";
  * @typedef {"disallowedElement"} NoHtmlMessageIds
- * @typedef {[{ allowed?: string[] }]} NoHtmlOptions
+ * @typedef {[{ allowed?: string[], allowedIgnoreCase?: boolean }]} NoHtmlOptions
  * @typedef {MarkdownRuleDefinition<{ RuleOptions: NoHtmlOptions, MessageIds: NoHtmlMessageIds }>} NoHtmlRuleDefinition
  */
 
@@ -55,6 +55,9 @@ export default {
 						},
 						uniqueItems: true,
 					},
+					allowedIgnoreCase: {
+						type: "boolean",
+					},
 				},
 				additionalProperties: false,
 			},
@@ -63,12 +66,16 @@ export default {
 		defaultOptions: [
 			{
 				allowed: [],
+				allowedIgnoreCase: false,
 			},
 		],
 	},
 
 	create(context) {
-		const allowed = new Set(context.options[0]?.allowed);
+		const [{ allowed, allowedIgnoreCase }] = context.options;
+		const allowedElements = new Set(
+			allowedIgnoreCase ? allowed.map(tag => tag.toLowerCase()) : allowed,
+		);
 
 		return {
 			html(node) {
@@ -89,7 +96,13 @@ export default {
 						column: start.column + match[0].length + 1,
 					};
 
-					if (allowed.size === 0 || !allowed.has(tagName)) {
+					const tagToCheck = allowedIgnoreCase
+						? tagName.toLowerCase()
+						: tagName;
+					if (
+						allowedElements.size === 0 ||
+						!allowedElements.has(tagToCheck)
+					) {
 						context.report({
 							loc: { start, end },
 							messageId: "disallowedElement",

tests/rules/no-html.test.js

@@ -39,6 +39,34 @@ ruleTester.run("no-html", rule, {
 			code: "<custom-element>Hello world!</custom-element>",
 			options: [{ allowed: ["custom-element"] }],
 		},
+		{
+			code: "<div>Hello world!</div>",
+			options: [{ allowed: ["div"] }],
+		},
+		{
+			code: "<DIV>Hello world!</DIV>",
+			options: [{ allowed: ["DIV"] }],
+		},
+		{
+			code: "<div>Hello world!</div>",
+			options: [{ allowed: ["DIV"], allowedIgnoreCase: true }],
+		},
+		{
+			code: "<DIV>Hello world!</DIV>",
+			options: [{ allowed: ["div"], allowedIgnoreCase: true }],
+		},
+		{
+			code: "<DiV>Hello world!</DiV>",
+			options: [{ allowed: ["div"], allowedIgnoreCase: true }],
+		},
+		{
+			code: "<custom-element>Hello world!</custom-element>",
+			options: [{ allowed: ["CUSTOM-ELEMENT"], allowedIgnoreCase: true }],
+		},
+		{
+			code: "<CUSTOM-ELEMENT>Hello world!</CUSTOM-ELEMENT>",
+			options: [{ allowed: ["custom-element"], allowedIgnoreCase: true }],
+		},
 	],
 	invalid: [
 		{
@@ -130,5 +158,69 @@ ruleTester.run("no-html", rule, {
 				},
 			],
 		},
+		{
+			code: "<div>Hello world!</div>",
+			options: [{ allowed: ["DIV"] }],
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 6,
+					data: {
+						name: "div",
+					},
+				},
+			],
+		},
+		{
+			code: "<DIV>Hello world!</DIV>",
+			options: [{ allowed: ["div"] }],
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 6,
+					data: {
+						name: "DIV",
+					},
+				},
+			],
+		},
+		{
+			code: "<div>Hello world!</div>",
+			options: [{ allowed: ["span"], allowedIgnoreCase: true }],
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 6,
+					data: {
+						name: "div",
+					},
+				},
+			],
+		},
+		{
+			code: "<DIV>Hello world!</DIV>",
+			options: [{ allowed: ["span"], allowedIgnoreCase: true }],
+			errors: [
+				{
+					messageId: "disallowedElement",
+					line: 1,
+					column: 1,
+					endLine: 1,
+					endColumn: 6,
+					data: {
+						name: "DIV",
+					},
+				},
+			],
+		},
 	],
 });