chore: show displayName of styled components in devtools (#7830)

opencrvs · Oct 24, 2024 · 113f9eb · 113f9eb
1 parent ad4595b
commit 113f9eb
Show file tree

Hide file tree

Showing 3 changed files with 245 additions and 5 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -159,6 +159,7 @@
     "traverse": "^0.6.6",
     "ts-node": "^7.0.1",
     "typescript": "4.9.5",
+    "vite-plugin-babel-macros": "^1.0.6",
     "vite-plugin-pwa": "^0.20.0",
     "vitest": "0.25.5",
     "vitest-fetch-mock": "^0.2.1"

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
@@ -93,7 +93,24 @@ export default defineConfig(({ mode }) => {
         crypto: 'crypto-js'
       }
     },
-    plugins: [htmlPlugin(), react(), tsconfigPaths(), VitePWAPlugin()],
+    plugins: [
+      htmlPlugin(),
+      react({
+        babel: {
+          plugins: [
+            [
+              'babel-plugin-styled-components',
+              {
+                displayName: true,
+                fileName: false
+              }
+            ]
+          ]
+        }
+      }),
+      tsconfigPaths(),
+      VitePWAPlugin()
+    ],
     test: {
       environment: 'jsdom',
       setupFiles: './src/setupTests.ts',