fix(extension): make monitor styles work in shadow dom again (#674)

gnosisguild · Jan 27, 2025 · 1be933b · 1be933b
1 parent 144b1e6
commit 1be933b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/deployables/extension/esbuild.mjs b/deployables/extension/esbuild.mjs
@@ -4,6 +4,7 @@ import esbuild from 'esbuild'
 import postCssPlugin from 'esbuild-style-plugin'
 import stdLibBrowser from 'node-stdlib-browser'
 import plugin from 'node-stdlib-browser/helpers/esbuild/plugin'
+import replace from 'postcss-replace'
 import { fileURLToPath } from 'url'
 
 config()
@@ -68,8 +69,14 @@ esbuild
     plugins: [
       plugin(stdLibBrowser),
       postCssPlugin({
-        postcss: { plugins: [tailwindcss] },
+        postcss: {
+          plugins: [
+            tailwindcss,
+            replace({ pattern: /:root/, data: { replaceAll: ':root, :host' } }),
+          ],
+        },
       }),
+
       // process.env.NODE_ENV !== 'development' &&
       //   sentryEsbuildPlugin({
       //     authToken: process.env.SENTRY_AUTH_TOKEN,

diff --git a/deployables/extension/package.json b/deployables/extension/package.json
@@ -58,6 +58,7 @@
     "jsdom-testing-mocks": "1.13.1",
     "madge": "8.0.0",
     "postcss": "8.5.1",
+    "postcss-replace": "^2.0.1",
     "rimraf": "6.0.1",
     "tailwindcss": "4.0.0",
     "typescript": "5.7.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml