rollup-plugin-styles Custom injector for server-side rendering (loosing treeshakeable ability)

Currently we need to use a custom injector to be able to retrieve all styles for SSR.

import originalInjector from 'rollup-plugin-styles/dist/runtime/inject-css';
const injectCss = (css) => {
    if (typeof document === 'undefined') {
        if (global.ssrStyles) global.ssrStyles.push(css);
        else global.ssrStyles = [];
    }
    originalInjector(css, {
        singleTag: true,
    });
};

export default injectCss;

Then we get the global.ssrStyles on our Next.js _document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
    static async getInitialProps(ctx: any) {
        const initialProps = await Document.getInitialProps(ctx);

        //@ts-ignore
        const globalStyle = global.ssrStyles.join(' ');

        return {
            ...initialProps,
            styles: (
                <>
                    {initialProps.styles}
                    {[
                        <style
                            dangerouslySetInnerHTML={{ __html: globalStyle }}
                            id="server-side-styles"
                        />,
                    ]}
                </>
            ),
        };
    }
    render() {
        return (
            <Html lang="fr">
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

My rollup-plugin-styles config (preserveModules enabled):

 styles({
    autoModules: true,
    minimize: true,
    mode: [
        'inject',
        (varname) => {
            const pathInjector = path.resolve('./tools/rollup/inject-css.js');
            return ` import injectCss from '${pathInjector}';injectCss(${varname})`;
        },
    ],
}),

I didn't find a better way to properly inject my css on server-side. But with this approach we completely loose the ability to use the treeshakeable option.

Do you think that there is a better way to inject our css on server-side render ?

Mar 31 '21 13:03 HeadFox

Any help on this ? The only solution I see right now for me is to fork the réponse:(

May 08 '21 08:05 HeadFox

Any update of this ?

Jun 07 '21 12:06 jpapini

Any update of this? I can help if is need it.

Oct 21 '21 23:10 AntonyF-Andreani

Bumping.

Dec 14 '21 16:12 maxarias-io

I'm also wondering how to solve this. Any updates?

Mar 14 '22 14:03 schmolie

I havent done server side rendering

However I've been playing around with using this plugin and @emotion/css for injection instead of the standard injection So I'm going to throw this here because it may spark ideas of using @emotion to do some server side rendering stuff

styles({
    mode: [
        "inject",
        (varName) => `
            const { injectGlobal } = require('@emotion/css');
            injectGlobal(${varName});
        `,
    ],
    autoModules: true,
    modules: true,
}),

You may be able to use docs from emotion to achieve what you're looking for https://emotion.sh/docs/ssr

Aug 28 '22 04:08 814k31

rollup-plugin-styles rollup-plugin-styles copied to clipboard

Custom injector for server-side rendering (loosing treeshakeable ability)

rollup-plugin-styles
rollup-plugin-styles copied to clipboard