fix: firefox content script styling bug

Author: sinanbekar

package.json

@@ -24,14 +24,15 @@
   "dependencies": {
     "@eduardoac-skimlinks/webext-redux": "3.0.1-release-candidate",
     "@reduxjs/toolkit": "^1.9.5",
+    "@twind/core": "^1.1.3",
+    "@twind/preset-autoprefix": "^1.0.7",
+    "@twind/preset-tailwind": "^1.1.4",
+    "lodash-es": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-redux": "^8.1.0",
     "redux-persist-webextension-storage": "^1.0.2",
     "reduxjs-toolkit-persist": "^7.2.1",
-    "@twind/core": "^1.1.3",
-    "@twind/preset-autoprefix": "^1.0.7",
-    "@twind/preset-tailwind": "^1.1.4",
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
@@ -61,7 +62,6 @@
     "jest": "^29.5.0",
     "jest-chrome": "^0.8.0",
     "jest-environment-jsdom": "^29.5.0",
-    "lodash-es": "^4.17.21",
     "nano-staged": "^0.8.0",
     "npm-run-all2": "^6.0.5",
     "postcss": "^8.4.24",

src/content/index.tsx

@@ -3,7 +3,8 @@ import 'construct-style-sheets-polyfill';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { twind, config, cssom, observe } from './twind';
+import { debounce } from 'lodash-es';
+import { twind, config, cssom, observe, stringify } from './twind';
 import { proxyStore } from '../app/proxyStore';
 import Content from './Content';
 
@@ -14,16 +15,34 @@ proxyStore.ready().then(() => {
   document.body.append(contentRoot);
 
   const shadowRoot = contentRoot.attachShadow({ mode: 'open' });
+  const sheet = cssom(new CSSStyleSheet());
+
+  // shadowRoot.adoptedStyleSheet bug in firefox
+  // see: https://bugzilla.mozilla.org/show_bug.cgi?id=1827104
+  if (navigator?.userAgent.includes('Firefox')) {
+    const style = document.createElement('style');
+    const debouncedSyncCss = debounce(() => {
+      style.textContent += stringify(sheet.target);
+    }, 100);
+
+    const originalSheetInsert = sheet.insert;
+    (sheet.insert as typeof originalSheetInsert) = (...params) => {
+      originalSheetInsert(...params);
+      debouncedSyncCss();
+    };
+    shadowRoot.appendChild(style);
+  } else {
+    shadowRoot.adoptedStyleSheets = [sheet.target];
+  }
+
+  const tw = twind(config, sheet);
+  observe(tw, shadowRoot);
+
   const shadowWrapper = document.createElement('div');
   shadowWrapper.id = 'root';
   shadowWrapper.style.display = 'contents';
   shadowRoot.appendChild(shadowWrapper);
 
-  const sheet = cssom(new CSSStyleSheet());
-  const tw = twind(config, sheet);
-  shadowRoot.adoptedStyleSheets = [sheet.target];
-  observe(tw, shadowRoot);
-
   createRoot(shadowWrapper).render(
     <React.StrictMode>
       <Provider store={proxyStore}>

src/popup/Popup.tsx

@@ -1,7 +1,7 @@
 import { Counter } from '../app/features/counter';
 
 const Popup = () => {
-  document.body.className = 'w-[30rem] h-[10rem]';
+  document.body.className = 'w-[30rem] h-[15rem]';
 
   return (
     <>