preact rendering <style> tag inside <noscript>, whereas react does not

I’m not sure if this matters to the library maintainers, or how much compatibility/interop with React is a goal, but I noticed a subtle difference between React and Preact that caused a fairly big blocker trying to switch a Gatsby site over to preact.

Basically, this jsx:

<noscript>
  <style dangerouslySetInnerHTML={{ __html: "body { background-color: pink }" }} />
</noscript>

Renders differently between React and preact. In react, you get an empty <noscript> tag. Preact renders out the <style> tag inside the noscript. Codepens below.

The use-case here is that I’m trying to use gatsby-background-image which adds styles to noscript like the example above. With react, nothing renders, but with preact, I get extra style tags which load in un-optimized images, destroying any performance benefit gained from switching to preact.

Reproduction

Codepen with React: https://codepen.io/jaredh159/pen/NWrGyPq?editors=1010

Codepan with Preact: https://codepen.io/jaredh159/pen/mdEeXJg?editors=1010

Note: you’ll have to use the dev tools to inspect to see the <noscript> contents, as it’s not visible, of course.

Steps to reproduce

See codepens above ^^^

Expected Behavior

I would have hoped that preact matched the behavior of react.

Actual Behavior

preact rendered the contents of the <noscript> tag, unlike React.

[developit]

Here’s a patch that makes Preact skip noscript contents on the client only:

import { options } from 'preact';
const CLIENT = typeof document !== 'undefined';
const old = options.vnode;
options.vnode = vnode => {
  if (vnode.type === 'noscript' && CLIENT) {
    vnode.props.children = null;
  }
  if (old) old(vnode);
};

[developit]

@jaredh159 yep! Just have it run before your component code.