Full shadow DOM support

extension-js · Dec 3, 2024 · 754e91b · 754e91b
1 parent fb1b9e1
commit 754e91b
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 52 deletions.
diff --git a/programs/develop/webpack/plugin-css/common-style-loaders.ts b/programs/develop/webpack/plugin-css/common-style-loaders.ts
@@ -10,52 +10,59 @@ export interface StyleLoaderOptions {
   mode: DevOptions['mode']
   useMiniCssExtractPlugin: boolean
   loader?: string
+  useShadowDom: boolean
 }
 
-// function whereToInsertStyleTag(element: HTMLElement) {
-//   // Function to check if the shadow root exists
-//   const insertElement = () => {
-//     // @ts-expect-error - global reference.
-//     const shadowRoot = window.__EXTENSION_SHADOW_ROOT__
+function whereToInsertStyleTag(element: HTMLElement) {
+  // Function to insert the style tag
+  const insertElement = () => {
+    // @ts-expect-error - global reference.
+    const shadowRoot = window.__EXTENSION_SHADOW_ROOT__
 
-//     if (shadowRoot) {
-//       shadowRoot.appendChild(element)
+    if (shadowRoot) {
+      shadowRoot.appendChild(element)
+      console.log('Element inserted into shadowRoot')
+    } else {
+      document.head.appendChild(element)
+      console.log('Element inserted into document.head')
+    }
+  }
+
+  // If the shadowRoot is already available, insert immediately
+  // @ts-expect-error - global reference.
+  if (window.__EXTENSION_SHADOW_ROOT__) {
+    insertElement()
+    return
+  }
 
-//       if (process.env.EXTENSION_ENV === 'development') {
-//         console.log('Element inserted into shadowRoot')
-//       }
-//     } else {
-//       document.head.appendChild(element)
-//       if (process.env.EXTENSION_ENV === 'development') {
-//         console.log('Element inserted into document.head')
-//       }
-//     }
-//   }
+  // Default behavior if MutationObserver is not required
+  if (!MutationObserver) {
+    document.head.appendChild(element)
+    return
+  }
 
-//   // If the shadowRoot is already available, insert immediately
-//   // @ts-expect-error - global reference.
-//   if (window.__EXTENSION_SHADOW_ROOT__) {
-//     insertElement()
-//     return
-//   }
+  // Use MutationObserver to wait for the shadow root to be available
+  const observer = new MutationObserver(() => {
+    // @ts-expect-error - global reference.
+    if (window.__EXTENSION_SHADOW_ROOT__) {
+      insertElement()
+      observer.disconnect() // Stop observing once the shadow root is found
+    }
+  })
 
-//   // Use MutationObserver to wait for the shadow root to be available
-//   const observer = new MutationObserver(() => {
-//     // @ts-expect-error - global reference.
-//     if (window.__EXTENSION_SHADOW_ROOT__) {
-//       insertElement()
-//       observer.disconnect() // Stop observing once the shadow root is found
-//     } else {
-//       // Disconnect the observer if the shadow root is not found after 5 seconds
-//       setTimeout(() => {
-//         observer.disconnect()
-//       }, 5000)
-//     }
-//   })
+  // Observe changes to the `document.body` or `document.head`
+  observer.observe(document.body, {childList: true, subtree: true})
 
-//   // Observe changes to the `document.body` or `document.head`
-//   observer.observe(document.body, {childList: true, subtree: true})
-// }
+  // Set a timeout to fallback to `document.head` after 5 seconds
+  setTimeout(() => {
+    observer.disconnect() // Stop observing after timeout
+    // @ts-expect-error - global reference.
+    if (!window.__EXTENSION_SHADOW_ROOT__) {
+      document.head.appendChild(element)
+      console.log('Fallback: Element inserted into document.head after timeout')
+    }
+  }, 3000)
+}
 
 export async function commonStyleLoaders(
   projectPath: string,
@@ -67,9 +74,11 @@ export async function commonStyleLoaders(
       ? miniCssLoader
       : {
           loader: require.resolve('style-loader'),
-          // options: {
-          //   insert: whereToInsertStyleTag
-          // }
+          options:
+            (opts.useShadowDom && {
+              insert: whereToInsertStyleTag
+            }) ||
+            undefined
         },
     {
       loader: require.resolve('css-loader'),

diff --git a/programs/develop/webpack/plugin-css/css-tools/less.ts b/programs/develop/webpack/plugin-css/css-tools/less.ts
@@ -63,14 +63,16 @@ export async function maybeUseLess(
           use: await commonStyleLoaders(projectPath, {
             loader: 'less-loader',
             mode,
-            useMiniCssExtractPlugin: false
+            useMiniCssExtractPlugin: false,
+            useShadowDom: true
           })
         },
         {
           use: await commonStyleLoaders(projectPath, {
             loader: 'less-loader',
             mode,
-            useMiniCssExtractPlugin: mode === 'production'
+            useMiniCssExtractPlugin: mode === 'production',
+            useShadowDom: false
           })
         }
       ]

diff --git a/programs/develop/webpack/plugin-css/css-tools/sass.ts b/programs/develop/webpack/plugin-css/css-tools/sass.ts
@@ -74,14 +74,16 @@ export async function maybeUseSass(
           use: await commonStyleLoaders(projectPath, {
             loader: 'sass-loader',
             mode,
-            useMiniCssExtractPlugin: false
+            useMiniCssExtractPlugin: false,
+            useShadowDom: true
           })
         },
         {
           use: await commonStyleLoaders(projectPath, {
             loader: 'sass-loader',
             mode,
-            useMiniCssExtractPlugin: mode === 'production'
+            useMiniCssExtractPlugin: mode === 'production',
+            useShadowDom: true
           })
         }
       ]
@@ -94,14 +96,16 @@ export async function maybeUseSass(
           use: await commonStyleLoaders(projectPath, {
             loader: 'sass-loader',
             mode,
-            useMiniCssExtractPlugin: false
+            useMiniCssExtractPlugin: false,
+            useShadowDom: true
           })
         },
         {
           use: await commonStyleLoaders(projectPath, {
             loader: 'sass-loader',
             mode,
-            useMiniCssExtractPlugin: mode === 'production'
+            useMiniCssExtractPlugin: mode === 'production',
+            useShadowDom: true
           })
         }
       ]

diff --git a/programs/develop/webpack/plugin-css/index.ts b/programs/develop/webpack/plugin-css/index.ts
@@ -40,13 +40,15 @@ export class CssPlugin {
             resourceQuery: /inline_style/,
             use: await commonStyleLoaders(projectPath, {
               mode: mode as 'development' | 'production',
-              useMiniCssExtractPlugin: false
+              useMiniCssExtractPlugin: false,
+              useShadowDom: true
             })
           },
           {
             use: await commonStyleLoaders(projectPath, {
               mode: mode as 'development' | 'production',
-              useMiniCssExtractPlugin: mode === 'production'
+              useMiniCssExtractPlugin: mode === 'production',
+              useShadowDom: false
             })
           }
         ]
@@ -58,13 +60,15 @@ export class CssPlugin {
             resourceQuery: /inline_style/,
             use: await commonStyleLoaders(projectPath, {
               mode: mode as 'development' | 'production',
-              useMiniCssExtractPlugin: false
+              useMiniCssExtractPlugin: false,
+              useShadowDom: true
             })
           },
           {
             use: await commonStyleLoaders(projectPath, {
               mode: mode as 'development' | 'production',
-              useMiniCssExtractPlugin: mode === 'production'
+              useMiniCssExtractPlugin: mode === 'production',
+              useShadowDom: false
             })
           }
         ]