Don't escape the text content in style

[wqcstrong]

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)

Problem

import rehypeDomParse from 'rehype-dom-parse';
import rehypeDomStrigify from 'rehype-dom-stringify';

const htmlString = `
<style>
  body > div {
    width: 100px;
  }
</style>
`;

console.log(
  unified()
    .use(rehypeDomParse)
    .use(rehypeDomStrigify)
    .processSync(htmlString)
    .toString(),
);

Actually output:

<style>
  body &gt; div {
    width: 100px;
  }
</style>

Solution

Expected output:

<style>
  body > div {
    width: 100px;
  }
</style>

Alternatives

/

[wooorm]

Hmm, yeah, bug.
You can try this in a browser. It a) should show the style in red text, b) shows that it’s the XMLSerializer that does this:

document.body.innerHTML = `<style>
  body > style {
    display: block; color: red;
  }
</style>`;
console.log(document.body.innerHTML)
new XMLSerializer().serializeToString(document.body)

[wooorm]

I have a PR, could you check it?

[wqcstrong]

😁 I have just reviewd the core implement

Thanks for your job, bro!