Allow for nested HTML raw tags

Fixes #156

(svg inside svg, script inside script, etc.)

Author: charlespwd

grammar/liquid-html.ohm

@@ -376,10 +376,11 @@ LiquidHTML <: Liquid {
     | HtmlRawTagImpl<"svg">
 
   HtmlRawTagImpl<name> =
-    #("<" name) AttrList ">" #(anyExceptStar<endTag<name>> endTag<name>)
-
-  endTag<name> =
-    "</" name space* ">"
+    TagStart<name>
+      (HtmlRawTagImpl<name> | AnyExceptPlus<(TagStart<name> | TagEnd<name>)>)*
+    TagEnd<name>
+  TagStart<name> = "<" name AttrList ">"
+  TagEnd<name> = "</" name ">"
 
   HtmlVoidElement =
     #("<" voidElementName &(space | "/" | ">")) AttrList "/"? ">"

src/parser/grammar.spec.ts

@@ -48,6 +48,13 @@ describe('Unit: liquidHtmlGrammar', () => {
         [[/ isRefined ]]
       />
     `).to.be.true;
+    expectMatchSucceeded(`
+      <svg>
+          <svg a=1><svg b=2>
+            <path d="M12"></path>
+          </svg></svg>
+      </svg>
+    `).to.be.true;
     expectMatchSucceeded(`<div data-popup-{{ section.id }}="size-{{ section.id }}">`).to.be.true;
     expectMatchSucceeded('<img {% if aboveFold %} loading="lazy"{% endif %} />').to.be.true;
     expectMatchSucceeded('<svg><use></svg>').to.be.true;

src/parser/stage-1-cst.spec.ts

@@ -101,6 +101,24 @@ describe('Unit: toLiquidHtmlCST(text)', () => {
       expectPath(cst, '1.body').to.eql('\n#id {}\n');
     });
 
+    it('should parse nested svg tags as a dump', () => {
+      const parts = ['<svg disabled a=1>', '<svg><path d=1></svg>', '</svg>'];
+      cst = toLiquidHtmlCST(parts.join(''));
+      expectPath(cst, '0.type').to.eql('HtmlRawTag');
+      expectPath(cst, '0.name').to.eql('svg');
+      expectPath(cst, '0.body').to.eql('<svg><path d=1></svg>');
+      expectPath(cst, '0.attrList.0.name.0.type').to.eql('TextNode');
+      expectPath(cst, '0.attrList.0.name.0.value').to.eql('disabled');
+      expectPath(cst, '0.locStart').to.eql(0);
+      expectPath(cst, '0.locEnd').to.eql(parts[0].length + parts[1].length + parts[2].length);
+      expectPath(cst, '0.blockStartLocStart').to.eql(0);
+      expectPath(cst, '0.blockStartLocEnd').to.eql(parts[0].length);
+      expectPath(cst, '0.blockEndLocStart').to.eql(parts[0].length + parts[1].length);
+      expectPath(cst, '0.blockEndLocEnd').to.eql(
+        parts[0].length + parts[1].length + parts[2].length,
+      );
+    });
+
     it('should properly return block{Start,End}Loc{Start,End} locations of raw tags', () => {
       const source = '<script>const a = {{ product | json }}</script>';
       cst = toLiquidHtmlCST(source);

src/parser/stage-1-cst.ts

@@ -1056,16 +1056,20 @@ export function toLiquidHtmlCST(source: string): LiquidHtmlCST {
 
     HtmlRawTagImpl: {
       type: ConcreteNodeTypes.HtmlRawTag,
-      name: 1,
-      attrList: 2,
-      body: 4,
+      name: (tokens: Node[]) => tokens[0].children[1].sourceString,
+      attrList(tokens: Node[]) {
+        const mappings = (this as any).args.mapping;
+        return tokens[0].children[2].toAST(mappings);
+      },
+      body: (tokens: Node[]) =>
+        source.slice(tokens[0].source.endIdx, tokens[2].source.startIdx),
       locStart,
       locEnd,
       source,
       blockStartLocStart: (tokens: any) => tokens[0].source.startIdx,
-      blockStartLocEnd: (tokens: any) => tokens[3].source.endIdx,
-      blockEndLocStart: (tokens: any) => tokens[5].source.startIdx,
-      blockEndLocEnd: (tokens: any) => tokens[5].source.endIdx,
+      blockStartLocEnd: (tokens: any) => tokens[0].source.endIdx,
+      blockEndLocStart: (tokens: any) => tokens[2].source.startIdx,
+      blockEndLocEnd: (tokens: any) => tokens[2].source.endIdx,
     },
 
     HtmlVoidElement: {

test/issue-156/fixed.liquid

@@ -0,0 +1,7 @@
+<svg
+  class="icon-svg icon-svg--size-24 notice__icon"
+  aria-hidden="true"
+  focusable="false"
+>
+  <svg id="error"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0-16c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.552.448-1 1-1zm-1.5 10.5c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5z"></path></svg></svg>
+</svg>

test/issue-156/index.liquid

@@ -0,0 +1,3 @@
+<svg class="icon-svg icon-svg--size-24 notice__icon" aria-hidden="true" focusable="false">
+    <svg id="error"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0-16c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.552.448-1 1-1zm-1.5 10.5c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5z"></path></svg></svg>
+</svg>

test/issue-156/index.spec.ts

@@ -0,0 +1,6 @@
+import { assertFormattedEqualsFixed } from '../test-helpers';
+import * as path from 'path';
+
+describe(`Unit: ${path.basename(__dirname)}`, () => {
+  assertFormattedEqualsFixed(__dirname);
+});