Issue with missing styles when using copyStyles with @emotion

[karibertils]

When using emotion css lib the copyStyles={true} does not work correctly.

Emotion injects css styles into DOM head at the time the components are mounted. When a new popup using copyStyles={true} has opened, it copies all the existing styles but misses the styles that will be injected.

This is further complicated when there is delay until a component inside the popup are mounted. For example when components need to wait for data, or won't show until state changes happen.

One solution might be to have an interval every 50-100ms monitoring when new styles get added to the parent, and then adding them to the popups

[rmariuzzo]

That's an interesting case.

On Sun, Mar 21, 2021, 06:18 Kári Bertilsson @.***> wrote:

When using emotion css lib the copyStyles={true} does not work correctly.

Emotion seems to inject css styles into DOM head at the exact time the components are mounted. When a new popup using copyStyles={true} has opened, it has copied all the old styles but misses the styles that were just injected.

After closing the popup and opening it again the styles work correctly since they are already in the DOM.

One solution might be to delay injecting the styles until the component inside has rendered or maybe by a configurable amount of time. I guess the delay would need to be only in the 10's ms range

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/rmariuzzo/react-new-window/issues/78, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADLMH43K2PLOHYGIBXNCRTTEXBV5ANCNFSM4ZRM3UBA .

[Wassap124]

@karibertils Any chance you have an example of how to add styles to the pop-up after X ms? I tried delaying the mount of the component but it won't work.

@rmariuzzo I would very much appreciate it if you'd be able to handle some of the issues / PRs that had piled up, the relatively low activity on this repo is stopping the package from being a lot more popular

[rmariuzzo]

I'm sorry for not being more active. Currently, I'm fighting a Nodular Sclerosis Hodgkin's Lymphoma that came back this year... and I started a more aggressive chemo treatment.

On gio 29 apr 2021, 03:43 Wassap124 @.***> wrote:

@karibertils https://github.com/karibertils Any chance you have an example of how to add styles to the pop-up after X ms? I tried delaying the mount of the component but it won't work.

@rmariuzzo https://github.com/rmariuzzo I would very much appreciate it if you'd be able to handle some of the issues / PRs that has been piled up, the relatively low activity on this repo is stopping it from being a lot more popular

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rmariuzzo/react-new-window/issues/78#issuecomment-829012467, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADLMH5W6OIJILFITYVEQQLTLEE2HANCNFSM4ZRM3UBA .

[epeterson320]

I had this need too, since I was using MUI. I was able to get it to work using the below wrapper. @rmariuzzo I'd be happy to open a PR if you think it's appropriate. Best wishes fighting the cancer. I prayed for strength and healing for you.

MuiCompatNewWindow.tsx

import { FC, useCallback, useRef } from "react";
import NewWindow, { INewWindowProps } from "react-new-window";

/**
 * Wrapper for react-new-window that works with MUI (and Emotion).
 *
 * Same interface as react-new-window.
 */
const MUICompatNewWindow: FC<INewWindowProps> = ({
  onOpen,
  onUnload,
  ...props
}) => {
  const mutationObserverRef = useRef<MutationObserver | null>(null);

  const compatOnOpen = useCallback(
    (childWindow: Window) => {
      const childHead = childWindow.document.head;
      const mutationObserver = new MutationObserver((mutationList) => {
        mutationList
          .flatMap((mutation) => Array.from(mutation.addedNodes))
          .filter((node) => node instanceof HTMLStyleElement)
          .forEach((styleEl) => {
            childHead.appendChild(styleEl.cloneNode(true));
          });
      });
      mutationObserver.observe(document.head, { childList: true });
      mutationObserverRef.current = mutationObserver;
      onOpen?.(childWindow);
    },
    [onOpen]
  );

  const compatOnUnload = useCallback(() => {
    mutationObserverRef.current?.disconnect();
    onUnload?.();
  }, [onUnload]);

  return (
    <NewWindow onOpen={compatOnOpen} onUnload={compatOnUnload} {...props} />
  );
};

export default MUICompatNewWindow;