createGlobalStyle is reproducing wrong styling in production mode

Environment

Node v10x

Reproduction

Its a react app, and I pass some styles including css reset and body, html basic styles using createGlobalStyle which works perfectly fine when working locally. However, I noticed the same styles are being ignored or didn’t get imported when application is built using webpack production mode.

See results below. Tried many different tests, but it seems to be behaving indifferently which maybe caused by bug within css string to style tag compilation.

Steps to reproduce

Build script using webpack production mode.

Expected Behavior

Actual Behavior

[shobhitsharma]

@probablyup Nice! It has been great experience working with this library. Love to contribute next time!

[imbhargav5]

Can you try something like this and let us know? The thing is, in your example. The CGS runs on every render, which means the same styles are injected each time they are created which leaks memory. Can you try this eg and let me know?

       const GlobalCSSReset = createGlobalStyle`
            ${ResetCSS}
        `;
        const GlobalFonts = createGlobalStyle`
            ${(fontFamilies as any)[mode]}
        `;
        const GlobalDefaults = createGlobalStyle`
            *,
            *:before,
            *:after {
                box-sizing: border-box;
            }

            html, body {
                font-family: ${(props: any) => props.theme.global.fontFamily}, sans-serif;
                color: ${(props: any) => props.theme.colors.primary};
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                overflow-x: hidden;
                text-rendering: optimizeLegibility;
            }

            a {
                color: ${(props: any) => props.theme.colors.primary};
            }

            b, strong, h1, h2, h3, h4, h5 {
                font-family: ${(props: any) => props.theme.global.fontFamily600}, sans-serif;
            }
        `;

class GlobalStyle extends React.Component<{ ... }, { ... }> {
    public render(): JSX.Element {
        const { mode } = this.props;
       
        return (
            <React.Fragment>
                <GlobalFonts mode={mode} />
                <GlobalCSSReset   />
                <GlobalDefaults />
            </React.Fragment>
        );
    }
}

export default GlobalStyle;