Fix CSS module name collisions in shared-components Vitest (#33116)

packages/shared-components/src/core/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap

@@ -3,22 +3,22 @@
 exports[`AvatarWithDetails > renders a textual event 1`] = `
 <div>
   <div
-    class="avatarWithDetails"
+    class="AvatarWithDetails-module_avatarWithDetails"
   >
     <div
       style="width: 40px; height: 40px; background-color: rgb(136, 136, 136); border-radius: 50%;"
     />
     <div
-      class="flex"
+      class="Flex-module_flex"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="AvatarWithDetails-module_title"
       >
         Room Name
       </span>
       <span
-        class="details"
+        class="AvatarWithDetails-module_details"
       >
         Details about the avatar go here
       </span>

packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap

@@ -3,14 +3,14 @@
 exports[`Pill > renders the pill 1`] = `
 <div>
   <div
-    class="flex pill"
+    class="Flex-module_flex Pill-module_pill"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <div
       style="width: 20px; height: 20px; border-radius: 100%; background-color: rgb(204, 204, 204);"
     />
     <span
-      class="label"
+      class="Pill-module_label"
       id="_r_0_"
     >
       Pill
@@ -48,14 +48,14 @@ exports[`Pill > renders the pill 1`] = `
 exports[`Pill > renders the pill without close button 1`] = `
 <div>
   <div
-    class="flex pill"
+    class="Flex-module_flex Pill-module_pill"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <div
       style="width: 20px; height: 20px; border-radius: 100%; background-color: rgb(204, 204, 204);"
     />
     <span
-      class="label"
+      class="Pill-module_label"
       id="_r_1_"
     >
       Pill

packages/shared-components/src/core/pill-input/PillInput/__snapshots__/PillInput.test.tsx.snap

@@ -3,13 +3,13 @@
 exports[`PillInput > renders only the input without children 1`] = `
 <div>
   <div
-    class="flex pillInput"
+    class="Flex-module_flex PillInput-module_pillInput"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <input
       aria-label="pill input"
       autocomplete="off"
-      class="input"
+      class="PillInput-module_input"
       placeholder="Type something..."
     />
   </div>
@@ -19,11 +19,11 @@ exports[`PillInput > renders only the input without children 1`] = `
 exports[`PillInput > renders the pill input 1`] = `
 <div>
   <div
-    class="flex pillInput"
+    class="Flex-module_flex PillInput-module_pillInput"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: wrap;"
     >
       <div
@@ -36,7 +36,7 @@ exports[`PillInput > renders the pill input 1`] = `
     <input
       aria-label="pill input"
       autocomplete="off"
-      class="input largerInput"
+      class="PillInput-module_input PillInput-module_largerInput"
       placeholder="Type something..."
     />
   </div>

packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap

@@ -8,12 +8,12 @@ exports[`RichItem > renders the item in default state 1`] = `
   >
     <li
       aria-label="Rich Item Title"
-      class="richItem"
+      class="RichItem-module_richItem"
       role="option"
       tabindex="-1"
     >
       <div
-        class="flex avatar"
+        class="Flex-module_flex RichItem-module_avatar"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <div
@@ -21,17 +21,17 @@ exports[`RichItem > renders the item in default state 1`] = `
         />
       </div>
       <span
-        class="title"
+        class="RichItem-module_title"
       >
         Rich Item Title
       </span>
       <span
-        class="description"
+        class="RichItem-module_description"
       >
         This is a description of the rich item.
       </span>
       <span
-        class="timestamp"
+        class="RichItem-module_timestamp"
         role="timer"
       >
         145 days ago
@@ -50,13 +50,13 @@ exports[`RichItem > renders the item in selected state 1`] = `
     <li
       aria-label="Rich Item Title"
       aria-selected="true"
-      class="richItem"
+      class="RichItem-module_richItem"
       role="option"
       tabindex="-1"
     >
       <div
         aria-hidden="true"
-        class="flex checkmark"
+        class="Flex-module_flex RichItem-module_checkmark"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <svg
@@ -73,17 +73,17 @@ exports[`RichItem > renders the item in selected state 1`] = `
         </svg>
       </div>
       <span
-        class="title"
+        class="RichItem-module_title"
       >
         Rich Item Title
       </span>
       <span
-        class="description"
+        class="RichItem-module_description"
       >
         This is a description of the rich item.
       </span>
       <span
-        class="timestamp"
+        class="RichItem-module_timestamp"
         role="timer"
       >
         145 days ago
@@ -101,12 +101,12 @@ exports[`RichItem > renders the item without timestamp 1`] = `
   >
     <li
       aria-label="Rich Item Title"
-      class="richItem"
+      class="RichItem-module_richItem"
       role="option"
       tabindex="-1"
     >
       <div
-        class="flex avatar"
+        class="Flex-module_flex RichItem-module_avatar"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <div
@@ -114,12 +114,12 @@ exports[`RichItem > renders the item without timestamp 1`] = `
         />
       </div>
       <span
-        class="title"
+        class="RichItem-module_title"
       >
         Rich Item Title
       </span>
       <span
-        class="description"
+        class="RichItem-module_description"
       >
         This is a description of the rich item.
       </span>

packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap

@@ -6,29 +6,29 @@ exports[`RichItem > renders the list 1`] = `
     style="height: 220px; overflow: hidden;"
   >
     <div
-      class="flex richList"
+      class="Flex-module_flex RichList-module_richList"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RichList-module_title"
         id="_r_0_"
       >
         Rich List Title
       </span>
       <ul
         aria-labelledby="_r_0_"
-        class="content"
+        class="RichList-module_content"
         role="listbox"
         tabindex="0"
       >
         <li
           aria-label="First Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -36,12 +36,12 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             First Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
@@ -49,13 +49,13 @@ exports[`RichItem > renders the list 1`] = `
         <li
           aria-label="Second Item"
           aria-selected="true"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
             aria-hidden="true"
-            class="flex checkmark"
+            class="Flex-module_flex RichItem-module_checkmark"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <svg
@@ -72,24 +72,24 @@ exports[`RichItem > renders the list 1`] = `
             </svg>
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Second Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
         </li>
         <li
           aria-label="Third Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -97,24 +97,24 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Third Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
         </li>
         <li
           aria-label="Fourth Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -122,24 +122,24 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Fourth Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
         </li>
         <li
           aria-label="Fifth Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -147,12 +147,12 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Fifth Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
@@ -169,17 +169,17 @@ exports[`RichItem > renders the list with isEmpty=true 1`] = `
     style="height: 220px; overflow: hidden;"
   >
     <div
-      class="flex richList"
+      class="Flex-module_flex RichList-module_richList"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RichList-module_title"
         id="_r_1_"
       >
         Rich List Title
       </span>
       <span
-        class="empty"
+        class="RichList-module_empty"
       >
         No items available
       </span>

packages/shared-components/src/core/utils/LinkedText/__snapshots__/LinkedText.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`LinkedText > renders a custom href 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love working on 
     <a
@@ -22,7 +22,7 @@ exports[`LinkedText > renders a custom href 1`] = `
 exports[`LinkedText > renders a custom target 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love working on 
     <a
@@ -41,7 +41,7 @@ exports[`LinkedText > renders a custom target 1`] = `
 exports[`LinkedText > renders a room alias 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love talking in 
     <a
@@ -60,7 +60,7 @@ exports[`LinkedText > renders a room alias 1`] = `
 exports[`LinkedText > renders a standard link 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love working on 
     <a
@@ -79,7 +79,7 @@ exports[`LinkedText > renders a standard link 1`] = `
 exports[`LinkedText > renders a user ID 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love talking to 
     <a