fix: defer reading QScopedStyle until promise resolves for SSR

Author: Varixo

.changeset/all-poets-sink.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: defer setting scoped style until jsx is resolved

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -279,12 +279,22 @@ function processJSXNode(
           );
 
           const jsxOutput = applyQwikComponentBody(ssr, jsx, type);
-          const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
           enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame));
           enqueue(ssr.closeComponent);
-          enqueue(jsxOutput);
-          isPromise(jsxOutput) && enqueue(Promise);
-          enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+          if (isPromise(jsxOutput)) {
+            // Defer reading QScopedStyle until after the promise resolves
+            enqueue(async () => {
+              const resolvedOutput = await jsxOutput;
+              const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
+
+              enqueue(resolvedOutput);
+              enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+            });
+          } else {
+            enqueue(jsxOutput);
+            const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
+            enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+          }
         } else {
           const inlineComponentProps = [ELEMENT_KEY, jsx.key];
           ssr.openFragment(

packages/qwik/src/core/tests/use-styles-scoped.spec.tsx

@@ -6,13 +6,15 @@ import {
   Fragment as Projection,
   Fragment as Signal,
   Slot,
+  useAsyncComputed$,
   useSignal,
+  useStylesScoped$,
   useStylesScopedQrl,
 } from '@qwik.dev/core';
 import { renderToString } from '@qwik.dev/core/server';
 import { createDocument, domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { cleanupAttrs } from 'packages/qwik/src/testing/element-fixture';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { useStore } from '..';
 import { getPlatform, setPlatform } from '../shared/platform/platform';
 import { QStyleSelector } from '../shared/utils/markers';
@@ -21,11 +23,6 @@ import { getScopedStyles } from '../shared/utils/scoped-stylesheet';
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
-vi.hoisted(() => {
-  vi.stubGlobal('QWIK_LOADER_DEFAULT_MINIFIED', 'min');
-  vi.stubGlobal('QWIK_LOADER_DEFAULT_DEBUG', 'debug');
-});
-
 describe.each([
   { render: ssrRenderToDom }, //
   { render: domRender }, //
@@ -602,6 +599,26 @@ describe.each([
     );
   });
 
+  it('should await for async component jsx output before setting style scoped id', async () => {
+    (globalThis as any).rawStyleId = '';
+    const Cmp = component$(() => {
+      const sig = useAsyncComputed$(async () => {
+        return 'computed';
+      });
+      sig.value;
+      (globalThis as any).rawStyleId = useStylesScoped$(`.red {color: red;}`).scopeId;
+
+      return <div class="red">this should be red</div>;
+    });
+
+    const { vNode } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div class={(globalThis as any).rawStyleId + ' red'}>this should be red</div>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#1945 - should add styles to conditionally rendered slots', async () => {
       (globalThis as any).rawStyleId1 = '';

packages/qwik/src/core/tests/use-styles.spec.tsx

@@ -10,18 +10,13 @@ import {
 } from '@qwik.dev/core';
 import { renderToString } from '@qwik.dev/core/server';
 import { createDocument, domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 import { getPlatform, setPlatform } from '../shared/platform/platform';
 import { QStyleSelector } from '../shared/utils/markers';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
-vi.hoisted(() => {
-  vi.stubGlobal('QWIK_LOADER_DEFAULT_MINIFIED', 'min');
-  vi.stubGlobal('QWIK_LOADER_DEFAULT_DEBUG', 'debug');
-});
-
 describe.each([
   { render: ssrRenderToDom }, //
   { render: domRender }, //