CSS Style not applied in popout window + ERROR

[a-gagnon]

Describe the bug (actual behavior)

Using the popout functionality from appui, I noticed we're now getting errors about the CSS:

NotAllowedError: Failed to set the 'adoptedStyleSheets' property on 'Document': Sharing constructed stylesheets in multiple documents is not allowed at handleError (http://localhost:3000/static/js/bundle.js:578509:58) at http://localhost:3000/static/js/bundle.js:578528:7 at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:502147:16) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:502209:31) at commitRootImpl (http://localhost:3000/static/js/bundle.js:521299:9) at unstable_runWithPriority (http://localhost:3000/static/js/bundle.js:569315:12) at runWithPriority$1 (http://localhost:3000/static/js/bundle.js:509429:10) at commitRoot (http://localhost:3000/static/js/bundle.js:521138:3) at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:520477:3) at http://localhost:3000/static/js/bundle.js:509480:26

After some digging, it is caused by the ButtonGroup component that we use. Most likely, this is a theming issue and is not tied to this specific component.

Expected behavior

CSS styles should be applied properly in popout window without any error.

Reproduction

I created a sandbox using itwinui-react ^2.11.2. CSS style in popout is not applied. By downgrading to itwinui-react 2.7.0, everything works as intended. https://codesandbox.io/s/itwinui-react-upgrade-and-popout-wxt6gm

Steps to reproduce

1. Click the "Click me!" button. Notice how the popout doesn't carry the background style.
2. Downgrade the itwinui-react version to 2.7.0 and open the popout again. The popout does carry the background style.

Additional information

[mayank99]

You need to copy the adoptedStyleSheets from the source document to the new document.

Here's a fixed sandbox: https://codesandbox.io/s/itwinui-react-upgrade-and-popout-forked-wn5lfy?file=/src/copyStyles.ts:296-331

[raplemie]

Is there a way to enable the ToggleSwitch contour to be available inside the child window as well ? https://codesandbox.io/s/itwinui-react-upgrade-and-popout-forked-5z6mpz?file=/src/App.tsx

[mayank99]

@raplemie This looks like a different problem specific to ToggleSwitch. Could you open a new issue for tracking it? I may have an idea what's going wrong.