async load the Dialog.css module

Author: ryan953

packages/feedback-async/src/widget/Dialog.tsx

@@ -8,6 +8,7 @@ import { DialogContent } from './components/DialogContent';
 import type { Props as DialogContentProps } from './components/DialogContent';
 
 export { showSuccessMessage } from './Message';
+export { createDialogStyles } from './Dialog.css';
 
 function renderDialog(parent: HTMLElement, props: DialogContentProps): void {
   render(<DialogContent {...props} />, parent);

packages/feedback-async/src/widget/DialogWithScreenShots.tsx

@@ -9,6 +9,7 @@ import type { Props as DialogContentProps } from './components/DialogContent';
 import { ScreenShotArea } from './components/ScreenShotArea';
 
 export { showSuccessMessage } from './Message';
+export { createDialogStyles } from './Dialog.css';
 
 function renderDialog(parent: HTMLElement, props: DialogContentProps): void {
   render(

packages/feedback-async/src/widget/createShadowHost.ts

@@ -2,7 +2,6 @@ import { logger } from '@sentry/utils';
 
 import { WINDOW } from '../constants';
 import type { FeedbackInternalOptions } from '../types';
-import { createDialogStyles } from './Dialog.css';
 import { createMainStyles } from './Main.css';
 
 type CreateShadowHostParams = Pick<FeedbackInternalOptions, 'id' | 'colorScheme' | 'themeDark' | 'themeLight'>;
@@ -25,7 +24,6 @@ export function createShadowHost({ id, colorScheme, themeDark, themeLight }: Cre
     const shadow = host.attachShadow({ mode: 'open' });
 
     shadow.appendChild(createMainStyles(doc, colorScheme, { dark: themeDark, light: themeLight }));
-    shadow.appendChild(createDialogStyles(doc));
 
     return { shadow, host };
   } catch {

packages/feedback-async/src/widget/createWidget.ts

@@ -1,11 +1,11 @@
 import { getCurrentScope } from '@sentry/core';
 import { logger } from '@sentry/utils';
-
-import { getMissingFields } from 'src/util/validate';
+import { WINDOW } from '../constants';
 import { FEEDBACK_WIDGET_SOURCE } from '../constants';
 import { DEBUG_BUILD } from '../debug-build';
 import { sendFeedback } from '../sendFeedback';
 import type { DialogComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
+import { getMissingFields } from '../util/validate';
 import type { ActorComponent } from './Actor';
 import { Actor } from './Actor';
 import { loadDialog } from './loadDialog';
@@ -40,6 +40,8 @@ export function createWidget({
   options: { shouldCreateActor = true, ...options },
   attachTo,
 }: CreateWidgetParams): FeedbackWidget {
+  const doc = WINDOW.document;
+
   let actor: ActorComponent | undefined;
   let dialog: DialogComponent | undefined;
 
@@ -83,7 +85,7 @@ export function createWidget({
       const user = scope && scope.getUser();
 
       loadDialog({ screenshots: false })
-        .then(({ Dialog, showSuccessMessage }) => {
+        .then(({ Dialog, showSuccessMessage, createDialogStyles }) => {
           dialog = Dialog({
             colorScheme: options.colorScheme,
             showBranding: options.showBranding,
@@ -142,6 +144,7 @@ export function createWidget({
           }
 
           shadow.appendChild(dialog.el);
+          shadow.appendChild(createDialogStyles(doc));
 
           // Hides the default actor whenever dialog is opened
           hideActor();

packages/feedback-async/src/widget/loadDialog.ts

@@ -1,4 +1,5 @@
 import type { DialogComponent } from '../types';
+import type { createDialogStyles } from './Dialog.css';
 import type { Props as BaseProps } from './DialogBase';
 import type { showSuccessMessage } from './Message';
 
@@ -7,17 +8,18 @@ type DialogRenderer = (props: Omit<BaseProps, 'renderDialog'>) => DialogComponen
 type Return = {
   Dialog: DialogRenderer;
   showSuccessMessage: typeof showSuccessMessage;
+  createDialogStyles: typeof createDialogStyles;
 };
 
 /**
  * Async load the Dialog component for rendering.
  */
 export async function loadDialog({ screenshots }: { screenshots: boolean }): Promise<Return> {
   if (screenshots) {
-    const { Dialog, showSuccessMessage } = await import('./DialogWithScreenShots');
-    return { Dialog, showSuccessMessage };
+    const { Dialog, ...rest } = await import('./DialogWithScreenShots');
+    return { Dialog, ...rest };
   } else {
-    const { Dialog, showSuccessMessage } = await import('./Dialog');
-    return { Dialog, showSuccessMessage };
+    const { Dialog, ...rest } = await import('./Dialog');
+    return { Dialog, ...rest };
   }
 }