`linearGradient` siblings are moved inside `linearGradient`

[remcohaszing]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] 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 https://github.com/remcohaszing/rehype-mermaid/issues/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.

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[wooorm]

released in 9.0.3!