fix: resuming a component using styles and a text node

Author: Varixo

.changeset/bright-cows-sell.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: resuming a component using styles and a text node

packages/qwik/src/core/client/vnode.ts

@@ -1838,18 +1838,18 @@ function materializeFromVNodeData(
   processVNodeData(vData, (peek, consumeValue, consume, nextToConsumeIdx) => {
     if (isNumber(peek())) {
       // Element counts get encoded as numbers.
-      while (!isElement(child)) {
+      while (
+        !isElement(child) ||
+        // We pretend that style element's don't exist as they can get moved out.
+        // skip over style elements, as those need to be moved to the head
+        // and are not included in the counts.
+        isQStyleElement(child)
+      ) {
         child = fastNextSibling(child);
         if (!child) {
           throw qError(QError.materializeVNodeDataError, [vData, peek(), nextToConsumeIdx]);
         }
       }
-      // We pretend that style element's don't exist as they can get moved out.
-      while (isQStyleElement(child)) {
-        // skip over style elements, as those need to be moved to the head
-        // and are not included in the counts.
-        child = fastNextSibling(child);
-      }
       combinedText = null;
       previousTextNode = null;
       let value = 0;
@@ -1912,6 +1912,10 @@ function materializeFromVNodeData(
     } else if (peek() === VNodeDataChar.SLOT) {
       vnode_setAttr(null, vParent, QSlot, consumeValue());
     } else {
+      // skip over style elements in front of text nodes, where text node is the first child (except the style node)
+      while (isQStyleElement(child)) {
+        child = fastNextSibling(child);
+      }
       const textNode =
         child && fastNodeType(child) === /* Node.TEXT_NODE */ 3 ? (child as Text) : null;
       // must be alphanumeric

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

@@ -1,6 +1,7 @@
 import {
   Fragment as Component,
   component$,
+  Fragment,
   inlinedQrl,
   Fragment as Signal,
   Slot,
@@ -189,6 +190,35 @@ describe.each([
     const qStyles = container.document.querySelectorAll(QStyleSelector);
     expect(qStyles).toHaveLength(2);
   });
+  it('should skip style node in front of text node', async () => {
+    const InnerCmp = component$(() => {
+      return <div>Hello world</div>;
+    });
+
+    const STYLE = `.container{color: blue;}`;
+    const Cmp = component$(() => {
+      useStylesQrl(inlinedQrl(STYLE, 's_styles1'));
+      const groupSig = useSignal('1');
+      return (
+        <>
+          Some text:{'  '}
+          <button onClick$={() => (groupSig.value = '2')}>click</button>
+          {/* Enforce Cmp component materialization, because of dynamic content */}
+          {groupSig.value === '2' && <InnerCmp />}
+        </>
+      );
+    });
+    const { vNode } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          {'Some text:'}
+          {'  '}
+          <button>click</button>
+        </Fragment>
+      </Component>
+    );
+  });
 });
 
 describe('html wrapper', () => {