CSS Injection into Server Side render (SSR)

[siamahnaf]

Hi there, I am facing one problem using this plugin. I already create a react component library for personal use. It works perfectly, but problem is css not loading with ssr. I mean css not injecting server side. When I used my created react package in nextjs I can see that, my componet load from server side, css load after some time that's mean it load from client side. That’s why I am facing flicker problem in this project. I need solution for injecting css into server side. But I am not finding any docs, blogs, video nothings about this. That's why I create this issue. Please any one help me about my concern.

Here is my rollup.config.mjs-

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import styles from "rollup-plugin-styles";
import peerDepsExternal from "rollup-plugin-peer-deps-external";

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: "dist/cjs/index.js",
                format: "cjs",
                sourcemap: true,
            },
            {
                file: "dist/esm/index.js",
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            peerDepsExternal(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            styles()
        ],
        external: ["react", "react-dom"]
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        plugins: [dts()],
        external: [/\.css$/]
    }
];

[andro-bosnjak]

I had the same issue, i solved it by extracting css and than import it in _app.tsx

example:

plugins: [ peerDepsExternal(), resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" }), styles({ mode: ['extract', 'components.css'], minimize: true, sourceMap: true, }) ],

then in next _app.tsx:

import 'your-lib/dist/assets/components.css'

Hope it helps :D

[siamahnaf]

But it need to import css file. If there is an way to do it automatically without manual import from package directory? Here I use rollup for creating react package.

[adarsh-drishya]

the component itself is unstyled i dont understand why @siamahnaf @andro-bosnjak i think the bundles do contain the style, but there is something related to server side rendering