Merge pull request #8124 from QwikDev/v2-fix-adding-script-before-style

wmertens · web-flow · commit d433c680c814 · 2025-11-04T20:35:52.000+01:00
fix: don't emit script before qwik style element
diff --git a/.changeset/large-turtles-write.md b/.changeset/large-turtles-write.md
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: don't emit script before qwik style element
diff --git a/packages/qwik/src/server/ssr-container.spec.ts b/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'));
+  });
+});
diff --git a/packages/qwik/src/server/ssr-container.ts b/packages/qwik/src/server/ssr-container.ts
@@ -350,8 +350,6 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
   openContainer() {
     if (this.tag == 'html') {
       this.write('<!DOCTYPE html>');
-      // -1 so we only emit inside body
-      this.$noScriptHere$ = -1;
     }
 
     const containerAttributes = this.renderOptions.containerAttributes || {};
@@ -383,7 +381,6 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     return this.closeElement();
   }
 
-  // -1 so we only emit inside body
   private $noScriptHere$: number = 0;
 
   /** Renders opening tag for DOM element */
@@ -393,21 +390,27 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     constAttrs?: SsrAttrs | null,
     currentFile?: string | null
   ): string | undefined {
-    if (this.qlInclude === QwikLoaderInclude.Inline) {
-      if (this.$noScriptHere$ === 0 && this.size > 30 * 1024) {
+    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 && elementName !== 'body') {
         // We waited long enough, on slow connections the page is already partially visible
         this.emitQwikLoaderInline();
       }
       // keep track of noscript and template, and for html we only emit inside body
-      else if (elementName === 'noscript' || elementName === 'template' || elementName === 'body') {
+      else if (elementName === 'noscript' || elementName === 'template') {
         this.$noScriptHere$++;
       }
     }
 
     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);
     }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@qwik.dev/core': patch
 +---
++
 +fix: don't emit script before qwik style element