test: ignore rendered class order

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-and-class-modify/expected.html

@@ -1,4 +1,4 @@
-<x-cmp aria-label="haha" class="yolo woot" data-foo="bar" data-lwc-host-mutated="aria-label bar class data-foo foo">
+<x-cmp aria-label="haha" class="woot yolo" data-foo="bar" data-lwc-host-mutated="aria-label bar class data-foo foo">
   <template shadowrootmode="open">
   </template>
 </x-cmp>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-component-global-html/expected.html

@@ -1,6 +1,6 @@
 <x-attribute-component-global-html>
   <template shadowrootmode="open">
-    <x-child accesskey="A" class="foo bar" contenteditable="true" data-test="test" draggable="true" hidden id="foo" itemprop="foo" spellcheck="true" style="color: red; background: blue;" tabindex="-1">
+    <x-child accesskey="A" class="bar foo" contenteditable="true" data-test="test" draggable="true" hidden id="foo" itemprop="foo" spellcheck="true" style="color: red; background: blue;" tabindex="-1">
       <template shadowrootmode="open">
         Passthrough properties:
         <ul>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-with-scoped-css/expected.html

@@ -3,7 +3,7 @@
     <style class="lwc-47oqt8q93b2" type="text/css">
       div.lwc-47oqt8q93b2 {color: black;}div.kree.lwc-47oqt8q93b2 {color: blue;}
     </style>
-    <div class="lwc-47oqt8q93b2 kree">
+    <div class="kree lwc-47oqt8q93b2">
       In the middle of my backswing?!
     </div>
   </template>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-global-html/expected.html

@@ -1,6 +1,6 @@
 <x-attribute-global-html>
   <template shadowrootmode="open">
-    <div accesskey="A" class="foo bar" contenteditable="true" data-test="test" draggable="true" hidden id="foo" itemprop="foo" lang="fr" spellcheck="true" style="color: red; background: blue;" tabindex="-1" title="foo">
+    <div accesskey="A" class="bar foo" contenteditable="true" data-test="test" draggable="true" hidden id="foo" itemprop="foo" lang="fr" spellcheck="true" style="color: red; background: blue;" tabindex="-1" title="foo">
     </div>
   </template>
 </x-attribute-global-html>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-static/expected.html

@@ -1,6 +1,6 @@
 <x-attribute-static>
   <template shadowrootmode="open">
-    <div class="foo bar foo-bar" data-foo="foo" style="color: red; background-color: blue;">
+    <div class="bar foo foo-bar" data-foo="foo" style="color: red; background-color: blue;">
     </div>
   </template>
 </x-attribute-static>

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/expected.html

@@ -0,0 +1,11 @@
+<x-component class="lwc-6a8uqob2ku4-host">
+  <template shadowrootmode="open">
+    <style class="lwc-6a8uqob2ku4" type="text/css">
+      div.lwc-6a8uqob2ku4 {background-color: wheat;}
+    </style>
+    <div class="foo lwc-6a8uqob2ku4">
+    </div>
+    <div class="bar lwc-6a8uqob2ku4">
+    </div>
+  </template>
+</x-component>

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-component';
+export { default } from 'x/component';
+export * from 'x/component';

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/modules/x/component/component.html

@@ -0,0 +1,4 @@
+<template>
+    <div class="foo"></div>
+    <div class={clazz}></div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/modules/x/component/component.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    clazz = 'bar'
+}

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-styles-with-existing-class/modules/x/component/component.scoped.css

@@ -0,0 +1,3 @@
+div {
+    background-color: wheat;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/scoped-and-unscoped-with-class/expected.html

@@ -6,7 +6,7 @@
     <style class="lwc-1l667kdb4s5" type="text/css">
       h1.lwc-1l667kdb4s5 {color: cornsilk;}
     </style>
-    <h1 class="yolo lwc-1l667kdb4s5">
+    <h1 class="lwc-1l667kdb4s5 yolo">
       hello
     </h1>
   </template>

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/unscoped-with-scoped-template-styles-and-class/expected.html

@@ -6,7 +6,7 @@
     <style class="lwc-1l667kdb4s5" type="text/css">
       .yolo {background: royalblue;}
     </style>
-    <h1 class="yolo lwc-1l667kdb4s5">
+    <h1 class="lwc-1l667kdb4s5 yolo">
       hello
     </h1>
   </template>

packages/@lwc/engine-server/src/__tests__/fixtures/style-class-whitespace/expected.html

@@ -42,17 +42,17 @@
     </div>
     <div class="boo">
     </div>
-    <div class="foo bar">
+    <div class="bar foo">
     </div>
-    <div class="foo bar baz">
+    <div class="bar baz foo">
     </div>
-    <div class="foo bar">
+    <div class="bar foo">
     </div>
-    <div class="foo bar">
+    <div class="bar foo">
     </div>
-    <div class="foo bar">
+    <div class="bar foo">
     </div>
-    <div class="foo bar">
+    <div class="bar foo">
     </div>
   </template>
 </x-foo>

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/scoped-styles-with-existing-class/index.spec.js

@@ -0,0 +1,22 @@
+export default {
+    snapshot(target) {
+        const [div1, div2] = target.shadowRoot.querySelectorAll('div');
+        return {
+            div1,
+            div2,
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const [div1, div2] = target.shadowRoot.querySelectorAll('div');
+
+        expect(div1).toBe(snapshots.div1);
+        expect(div2).toBe(snapshots.div2);
+
+        // TODO [#4714]: Scope token classes render in an inconsistent order for static vs dynamic classes
+        expect(new Set(div1.classList)).toEqual(new Set(['foo', 'lwc-6958o7oup43']));
+        expect(new Set(div2.classList)).toEqual(new Set(['bar', 'lwc-6958o7oup43']));
+
+        expect(consoleCalls.warn).toHaveSize(0);
+        expect(consoleCalls.error).toHaveSize(0);
+    },
+};

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/scoped-styles-with-existing-class/x/main/main.html

@@ -0,0 +1,4 @@
+<template>
+    <div class="foo"></div>
+    <div class={clazz}></div>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/scoped-styles-with-existing-class/x/main/main.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    clazz = 'bar';
+}

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/scoped-styles-with-existing-class/x/main/main.scoped.css

@@ -0,0 +1,3 @@
+div {
+    background-color: wheat;
+}

packages/@lwc/integration-karma/test/rendering/scoped-styles-with-existing-class/index.spec.js

@@ -0,0 +1,37 @@
+import { createElement, setFeatureFlagForTest } from 'lwc';
+import { LOWERCASE_SCOPE_TOKENS } from 'test-utils';
+import Component from 'x/component';
+
+// TODO [#3733]: remove support for legacy scope tokens
+[false, true].forEach((enableLegacyScopeTokens) => {
+    describe(`enableLegacyScopeTokens=${enableLegacyScopeTokens}`, () => {
+        beforeEach(() => {
+            setFeatureFlagForTest('ENABLE_LEGACY_SCOPE_TOKENS', enableLegacyScopeTokens);
+        });
+
+        afterEach(() => {
+            setFeatureFlagForTest('ENABLE_LEGACY_SCOPE_TOKENS', false);
+            // We keep a cache of parsed static fragments; these need to be reset
+            // since they can vary based on whether we use the legacy scope token or not.
+            window.__lwcResetFragmentCache();
+        });
+
+        const expectedScopeTokens = [
+            LOWERCASE_SCOPE_TOKENS && 'lwc-6a8uqob2ku4',
+            (enableLegacyScopeTokens || !LOWERCASE_SCOPE_TOKENS) && 'x-component_component',
+        ].filter(Boolean);
+
+        it('consistent classes for scoped styles with class attribute #4714', async () => {
+            const elm = createElement('x-component', { is: Component });
+            document.body.appendChild(elm);
+            await Promise.resolve();
+
+            const divs = elm.shadowRoot.querySelectorAll('div');
+
+            // TODO [#4714]: Scope token classes render in an inconsistent order for static vs dynamic classes
+            expect(new Set(divs[0].classList)).toEqual(new Set(['foo', ...expectedScopeTokens]));
+
+            expect(new Set(divs[1].classList)).toEqual(new Set(['bar', ...expectedScopeTokens]));
+        });
+    });
+});

packages/@lwc/integration-karma/test/rendering/scoped-styles-with-existing-class/x/component/component.html

@@ -0,0 +1,4 @@
+<template>
+    <div class="foo"></div>
+    <div class={clazz}></div>
+</template>

packages/@lwc/integration-karma/test/rendering/scoped-styles-with-existing-class/x/component/component.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    clazz = 'bar';
+}

packages/@lwc/integration-karma/test/rendering/scoped-styles-with-existing-class/x/component/component.scoped.css

@@ -0,0 +1,3 @@
+div {
+    background-color: wheat;
+}

scripts/test-utils/format-html.ts

@@ -108,10 +108,17 @@ function reorderAttributes(attributesRaw: string) {
     const numQuotes = attributesRaw.match(/"/g)?.length || 0;
     if (numQuotes % 2 !== 0) return attributesRaw;
 
-    const matches = [...attributesRaw.matchAll(/[:\w-]+(="[^"]*")?/gi)];
+    const matches = [...attributesRaw.matchAll(/([:\w-]+)(="([^"]*)")?/gi)];
 
     const results = matches
-        .map((_) => _[0])
+        .map(([_whole, name, equalsQuotedValue, value]) => {
+            // TODO [#4714]: Scope token classes render in an inconsistent order for static vs dynamic classes
+            if (name === 'class' && value) {
+                // sort classes to ignore differences, e.g. `class="a b"` vs `class="b a"`
+                value = value.split(' ').sort().join(' ');
+            }
+            return name + (equalsQuotedValue ? `="${value}"` : '');
+        })
         .sort()
         .join(' ');