SSR empty style tags and insertion style tags in the wrong places

[ignatiqq]

Hi, when I updated "used-styles" from version "5.3.6" to the new major version "6.0.0". I have a problem with "interleaveWithNodeStream" and react 18 stream "renderToPipeableStream" related to SSR <style> tags insertion.

(caused by 5.3.0 to 6.0.0 migration, am i missed something?)

Reproduction

If we use react stream it does not guarantee us that any piped html chunk is the final one (with any close or open tags).This could be the middle of, for example, a src base64 image or something else. I checked it with transform stream where I piped html within react stream.

new Transform({
        transform(
            chunk: string,
            _: string,
            callback: Function,
        ) {
            const html = chunk.toString('utf-8');

            console.log('html start: ', html.slice(0, 50));
            console.log('html end: ', html.slice(html.length - 50, html.length));
  
            callback(undefined, chunk);
        },
 });
 
 logs:
 
 html start: <div hidden id="S:0"><div class="some_class
 html end: target="_self" href="/"><img alt="alt" src="
 
 html start: data:image/svg+xml;base64,PHgdSB4bWxucFESaHR0
 html end: JoMS4wNGhGYuhdF2LjQ1aC0u0DJaUi8+PC9GsdFLAq

And when I encountered a very long piece of HTML that is just a URL, it resulted the wrong <style> tags being inserted:

and also this tag isn't really needed because it doesn't include any styles

Expected Behavior

Can we only insert <style> tags if they contain any styles? Is there any way we can track whether we can semantically correctly insert a <style> tag into a chunk, or maybe wait and insert after it?