Linter: Allow style inside svg for html-head-only-elements (#1082)

marcoroth · web-flow · commit 25ae02417f3f · 2026-01-18T02:54:53.000+01:00
Resolves #912
diff --git a/javascript/packages/linter/src/rules/html-head-only-elements.ts b/javascript/packages/linter/src/rules/html-head-only-elements.ts
@@ -23,6 +23,7 @@ class HeadOnlyElementsVisitor extends BaseRuleVisitor {
     if (!this.insideBody) return
     if (!isHeadOnlyTag(tagName)) return
     if (tagName === "title" && this.insideSVG) return
+    if (tagName === "style" && this.insideSVG) return
     if (tagName === "meta" && this.hasItempropAttribute(node)) return
 
     this.addOffense(
diff --git a/javascript/packages/linter/test/rules/html-head-only-elements.test.ts b/javascript/packages/linter/test/rules/html-head-only-elements.test.ts
@@ -332,6 +332,26 @@ describe("html-head-only-elements", () => {
     `)
   })
 
+  test("allows style element inside SVG", () => {
+    expectNoOffenses(dedent`
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <title>Hi</title>
+        </head>
+        <body>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29">
+            <defs>
+              <style>
+                .cls-1 {fill:none;stroke:#fff}
+              </style>
+            </defs>
+          </svg>
+        </body>
+      </html>
+    `)
+  })
+
   test("still fails for other head-only elements inside SVG", () => {
     expectError("Element `<meta>` must be placed inside the `<head>` tag.")
     expectError("Element `<link>` must be placed inside the `<head>` tag.")
