Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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);

        const globalStyle = global.ssrStyles.join(' ');

        return {
            styles: (
                            dangerouslySetInnerHTML={{ __html: globalStyle }}
    render() {
        return (
            <Html lang="fr">
                <Head />
                    <Main />
                    <NextScript />

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

    autoModules: true,
    minimize: true,
    mode: [
        (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 ?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:6
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

jpapinicommented, Jun 7, 2021

Any update of this ?

814k31commented, Aug 28, 2022

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

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

You may be able to use docs from emotion to achieve what you’re looking for

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using with server side rendering in react and webpack tree ...
The server side rendering docs ( don't seem particularly relevant to when using ...
Read more >
Hierarchical injectors - Angular
With @Injectable() providedIn , optimization tools can perform tree-shaking, which removes services that your application isn't using. This results in smaller ...
Read more >
Tree Shaking - webpack
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...
Read more >
@angular/platform-server | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >
Known Problem Report as of Dec 19 2022 4:00AM - Agilent
CE Method ChemStation. Client Report Rendering ColumnComp Driver Companion Control Panel Custom Fields Custom Reports DAD/MWD Driver Dashboard Data Analysis
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found