add a prefix to every class build-time

Author: ytkimirti

bun.lockb

@@ -51,6 +51,7 @@
     "zustand": "5.0.0"
   },
   "devDependencies": {
+    "postcss-prefix-selector": "^2.1.0",
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

package.json

@@ -2,5 +2,8 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    "postcss-prefix-selector": {
+      prefix: ".ups-db",
+    },
   },
 }

postcss.config.js

@@ -25,7 +25,8 @@ export const RedisBrowser = ({ token, url }: RedisCredentials) => {
             <PanelGroup
               autoSaveId="persistence"
               direction="horizontal"
-              className="h-full w-full gap-0.5 text-sm antialiased"
+              // ups-db is the custom class used to prefix every style in the css bundle
+              className="ups-db h-full w-full gap-0.5 text-sm antialiased"
             >
               <Panel defaultSize={30} minSize={30}>
                 <Sidebar />