linearGradient siblings are moved inside linearGradient

[remcohaszing]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

hast-util-raw@9.0.2

Link to runnable example

No response

Steps to reproduce

Fun the following script:

import { raw } from 'hast-util-raw'

const reformatted = raw({
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'svg',
      properties: {},
      children: [
        {
          type: 'element',
          tagName: 'circle',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'rect',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'linearGradient',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'path',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'g',
          properties: {},
          children: []
        }
      ]
    }
  ]
})

console.dir(reformatted, { depth: Number.POSITIVE_INFINITY })

This causes remcohaszing/rehype-mermaid#17

Expected behavior

It logs:

{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'svg',
      properties: {},
      children: [
        {
          type: 'element',
          tagName: 'circle',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'rect',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'linearGradient',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'path',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'g',
          properties: {},
          children: []
        }
      ]
    }
  ],
  data: { quirksMode: false }
}

Actual behavior

It moves all siblings after linearGradient inside its children.

{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'svg',
      properties: {},
      children: [
        {
          type: 'element',
          tagName: 'circle',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'rect',
          properties: {},
          children: []
        },
        {
          type: 'element',
          tagName: 'linearGradient',
          properties: {},
          children: [
            {
              type: 'element',
              tagName: 'path',
              properties: {},
              children: []
            },
            {
              type: 'element',
              tagName: 'g',
              properties: {},
              children: []
            }
          ]
        }
      ]
    }
  ],
  data: { quirksMode: false }
}

Affected runtime and version

node@22.1.0

Affected package manager and version

npm@10.7.0

Affected OS and version

Pop!_OS 22.04

Build and bundle tools

No response

[wooorm]

Weird. It seems to be the camelcase.
If I pass any other lowercase string (even lineargradient) through, it nests adjacently fine.
And the weird thing with lineargradient: if I pass that in, I get linearGradient out!

[wooorm]

My guess for what’s going on is that the HTML parser is case-insensitive for tag names.
So, parse5 lowercases things.
When we here pass a cased string in, most things go fine, but when doing the closing tag, it doesn’t match up to the current open tag, and is thus discarded.

[wooorm]

released in 9.0.3!