I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles are not applied immediately to the SSR'd document from NextJS (although they eventually get applied, there is a brief moment where the component appears unstyled).
This is my first time developing an npm package and using Rollup, so I am struggling to resolve this issue. Should I avoid bundling the CSS into the .js files and recommend users to import the css files themselves? Although I wanted to simplify the process for users by avoiding this additional step. Another potential solution could be using CSS-in-JS, but I prefer not to add another dependency if possible.
Any guidance or tips would be greatly appreciated!
Here is a snippet of my Rollup configuration:
const config = [
{
input: "src/lib/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
url(),
svgr(),
typescript({ tsconfig: "./tsconfig.json", rootDir: "src/lib" }),
postcss({
modules: true,
}),
terser(),
bundleSize(),
visualizer(),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [
dts(),
del({ hook: "buildEnd", targets: ["dist/cjs/types", "dist/esm/types"] }),
],
},
];
In case it's relevant, here is a portion of my tsconfig:
{
"compilerOptions": {
"target": "es5",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react",
"module": "ESNext",
"declaration": true,
"declarationDir": "types",
"sourceMap": true,
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"removeComments": true,
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src/lib/customModules.d.ts", "src/**/*"]
}