fix: don't emit script before qwik style element

Author: Varixo

.changeset/large-turtles-write.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: don't emit script before qwik style element

packages/qwik/src/server/ssr-container.spec.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { ssrCreateContainer } from './ssr-container';
+import { QStyle } from './qwik-copy';
+
+vi.hoisted(() => {
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_MINIFIED', 'min');
+  vi.stubGlobal('QWIK_LOADER_DEFAULT_DEBUG', 'debug');
+});
+
+describe('SSR Container', () => {
+  it('should not emit Qwik loader before style elements', async () => {
+    const writer = {
+      chunks: [] as string[],
+      write(text: string) {
+        this.chunks.push(text);
+      },
+      toString() {
+        return this.chunks.join('');
+      },
+    };
+
+    const container = ssrCreateContainer({
+      tagName: 'div',
+      writer,
+      renderOptions: {
+        qwikLoader: 'inline', // Force inline loader
+      },
+    });
+
+    // Open container
+    container.openContainer();
+    // Add a large content to exceed 30KB while opening the next element
+    const largeContent = 'x'.repeat(30 * 1024);
+    container.openElement('div', null);
+    container.textNode(largeContent);
+    await container.closeElement();
+    // Add a style element with QStyle attribute
+    container.openElement('style', [QStyle, 'my-style-id']);
+    container.write('.my-class { color: red; }');
+    await container.closeElement();
+    // Add another regular elementm
+    container.openElement('div', null);
+    await container.closeElement();
+    await container.closeContainer();
+
+    const html = writer.toString();
+    expect(html.indexOf('id="qwikloader"')).toBeGreaterThan(html.indexOf('my-style-id'));
+  });
+});

packages/qwik/src/server/ssr-container.ts

@@ -393,7 +393,15 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     constAttrs?: SsrAttrs | null,
     currentFile?: string | null
   ): string | undefined {
-    if (this.qlInclude === QwikLoaderInclude.Inline) {
+    const isQwikStyle =
+      isQwikStyleElement(elementName, varAttrs) || isQwikStyleElement(elementName, constAttrs);
+
+    if (
+      // don't append qwik loader before qwik style elements
+      // it will confuse the resuming, because styles are expected to be the first nodes in subtree
+      !isQwikStyle &&
+      this.qlInclude === QwikLoaderInclude.Inline
+    ) {
       if (this.$noScriptHere$ === 0 && this.size > 30 * 1024) {
         // We waited long enough, on slow connections the page is already partially visible
         this.emitQwikLoaderInline();
@@ -406,8 +414,6 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
 
     let innerHTML: string | undefined = undefined;
     this.lastNode = null;
-    const isQwikStyle =
-      isQwikStyleElement(elementName, varAttrs) || isQwikStyleElement(elementName, constAttrs);
     if (!isQwikStyle && this.currentElementFrame) {
       vNodeData_incrementElementCount(this.currentElementFrame.vNodeData);
     }