Prevent HTML-escape of raw strings in JSX script/style tags

[bluwy]

Changes

Fixes #6404
Fixes #6327

This PR allows writing

<script>
{`console.log('raw script')`}
</script>

<style>
{`
h1[id="script-style-raw"] {
  color: red;
}
`}
</style>

Without the inner string contents to be HTML-escaped incorrectly. Previously you'd get something like:

<script>
console.log(&quot;raw script&quot;)
</script>

This also unblocks remark/rehype plugins that injects AST that would theoretically represent something like the above.

Testing

Added tests in MDX integration

Docs

Technically this allows the syntax of the above, but I'm not sure this is a pattern we want to show in the docs yet.

[changeset-bot]

🦋 Changeset detected

Latest commit: 95ee558

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ematipico]

nit nit nit: the description and/or the function's name don't do justice to the actual implementation. Saying "pre-render" is a bit reductive, considering what the function actually does. Maybe escapeContentTags or something like that?

[bluwy]

I chose prerenderElementChildren since it's being called by the renderElement function, so kinda like a pre-pass phase. So ideally in the future this function could do more than handling this specific case, similar to the other render functions in this file. So I'm not sure if we need to rename it to something specific 🤔