chore: add file and component names to styled output class names in dev (#9351)

Updates the `vite.config.mts` file to include config for emotion,
telling it to add `<file name>--<component name>` to the class names
of generated components.

The class name modification only happens in development mode.

frontend/vite.config.mts

@@ -37,8 +37,40 @@ const vitestConfig = vitestDefineConfig({
     },
 });
 
-export default mergeConfig(
+export default defineConfig(({ mode }) => {
-    defineConfig({
+    const reactPluginArgs =
+        mode === 'development'
+            ? {
+                  babel: {
+                      plugins: [
+                          [
+                              '@emotion',
+                              {
+                                  autoLabel: 'always',
+                                  labelFormat: '[filename]--[local]',
+                                  importMap: {
+                                      '@mui/material': {
+                                          styled: {
+                                              canonicalImport: [
+                                                  '@emotion/styled',
+                                                  'default',
+                                              ],
+                                              styledBaseImport: [
+                                                  '@mui/material',
+                                                  'styled',
+                                              ],
+                                          },
+                                      },
+                                  },
+                              },
+                          ],
+                      ],
+                  },
+              }
+            : undefined;
+
+    return mergeConfig(
+        {
             base: UNLEASH_BASE_PATH,
             build: {
                 outDir: 'build',
@@ -81,10 +113,16 @@ export default mergeConfig(
                     allow: ['..'],
                 },
             },
-        plugins: [react(), tsconfigPaths(), svgr(), envCompatible()],
+            plugins: [
+                react(reactPluginArgs),
+                tsconfigPaths(),
+                svgr(),
+                envCompatible(),
+            ],
             esbuild: {
                 logOverride: { 'this-is-undefined-in-esm': 'silent' },
             },
-    }),
+        },
         vitestConfig,
     );
+});