function getFrameStyles({site}) {
    const FrameStyle =
        GlobalStyles +
        FrameStyles +
        AccountHomePageStyles +
        AccountPlanPageStyles +
        InputFieldStyles +
        ProductsSectionStyles({site}) +
        SwitchStyles +
        ActionButtonStyles +
        BackButtonStyles +
        AvatarStyles +
        MagicLinkStyles +
        SignupPageStyles +
        OfferPageStyles({site}) +
        NotificationStyle +
        PopupNotificationStyles +
        MobileStyles +
        MultipleProductsGlobalStyles +
        FeedbackPageStyles +
        EmailSuppressedPage +
        EmailSuppressionFAQ +
        EmailReceivingFAQ +
        TipsAndDonationsSuccessStyle +
        TipsAndDonationsErrorStyle +
        RecommendationsPageStyles;
    return FrameStyle;
}
By default, CRAs webpack bundle combines and appends the main css at root level, so they are not applied inside iframe
This uses a hack where we append `<style> </style>` tag with all CSS inside the head of iframe dynamically, thus making it available easily
We can create separate variables to keep styles grouped logically, and export them as one appended string