feat(styled): Implement OwnerDocument context and update document references (#1948)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

Author: gabriellsh

.changeset/dirty-feet-arrive.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/styled": minor
+---
+
+feat(styled): Implement `OwnerDocument` context and update `document` references

packages/styled/src/OwnerDocument.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export const OwnerDocument = createContext<{
+  document: Document;
+}>({ document: window.document });
+
+export const useOwnerDocument = () => {
+  return useContext(OwnerDocument);
+};

packages/styled/src/index.ts

@@ -1 +1,2 @@
 export { default } from './styled';
+export * from './OwnerDocument';

packages/styled/src/styled.ts

@@ -22,6 +22,8 @@ import {
   useInsertionEffect,
 } from 'react';
 
+import { useOwnerDocument } from './OwnerDocument';
+
 export const attachClassName = <P extends { className?: string }>(
   props: P,
   additionalClassName: string,
@@ -85,18 +87,19 @@ const styled =
 
           useDebugValue(computedClassName);
 
+          const { document } = useOwnerDocument();
           useInsertionEffect(() => {
             const escapedClassName = escapeName(computedClassName);
             const transpiledContent = transpile(
               `.${escapedClassName}`,
               content,
             );
-            const detach = attachRules(transpiledContent);
+            const detach = attachRules(transpiledContent, { document });
 
             return () => {
               setTimeout(detach, 1000);
             };
-          }, [computedClassName, content]);
+          }, [computedClassName, content, document]);
 
           const newProps = attachClassName(
             { ref, ...props },