chore(runtime): sort hydration class names (#5851)

* chore(runtime): sort hydration class names

* prettier

src/runtime/bootstrap-lazy.ts

@@ -234,7 +234,7 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
 
     // Add hydration styles
     if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
-      dataStyles.textContent += cmpTags + HYDRATED_CSS;
+      dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
     }
 
     // If we have styles, add them to the DOM

test/end-to-end/src/miscellaneous/test.e2e.ts

@@ -1,8 +1,8 @@
 import { type E2EPage, newE2EPage } from '@stencil/core/testing';
 
-describe('do not throw page already closed if page was defined in before(All) hook', () => {
-  let page: E2EPage;
+let page: E2EPage;
 
+describe('do not throw page already closed if page was defined in before(All) hook', () => {
   beforeAll(async () => {
     page = await newE2EPage();
   });
@@ -17,3 +17,29 @@ describe('do not throw page already closed if page was defined in before(All) ho
     expect(p).not.toBeNull();
   });
 });
+
+describe('sorts hydrated component styles', () => {
+  it('generates style tags in alphabetical order', async () => {
+    page = await newE2EPage();
+    expect(await page.evaluate(() => document.querySelectorAll('style').length)).toBe(0);
+    await page.setContent(`
+      <prop-cmp mode="ios"></prop-cmp>
+    `);
+    expect(await page.evaluate(() => document.querySelectorAll('style').length)).toBe(1);
+
+    const styleContent = await page.evaluate(() => document.querySelector('style').innerHTML);
+
+    /**
+     * filter out the hydration class selector for the app-root component
+     */
+    const classSelector = styleContent
+      .replace(/\}/g, '}\n')
+      .trim()
+      .split('\n')
+      .map((c) => c.slice(0, c.indexOf('{')))
+      .find((c) => c.includes('app-root'));
+    expect(classSelector).toBe(
+      'another-car-detail,another-car-list,app-root,build-data,car-detail,car-list,cmp-a,cmp-b,cmp-c,cmp-dsd,cmp-server-vs-client,dom-api,dom-interaction,dom-visible,element-cmp,empty-cmp,empty-cmp-shadow,env-data,event-cmp,import-assets,listen-cmp,method-cmp,path-alias-cmp,prerender-cmp,prop-cmp,slot-cmp,slot-cmp-container,slot-parent-cmp,state-cmp',
+    );
+  });
+});