Styles not being exported with Rollup

Question

I'm building an ui-library with React, Typescript and Css modules. Rollup is not exporting my styles

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 postcss from 'rollup-plugin-postcss';

import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const packageJson = require('./package.json');

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      postcss({
        modules: true,
        extensions: ['.css', '.scss'],
        use: ['sass'], // This enables SCSS preprocessing
        extract: true,
      }),

      typescript(),
      peerDepsExternal(),

      resolve(),
      commonjs(),

      terser(),
    ],
  },
  {
    input: 'dist/cjs/types/src/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts.default()],
    external: [/\.css$/],
  },
];

Everything works fine with Storybook but after deployment to npm, i'm loosing the styles.

Answer 1

You just need to add extract: 'styles.css', in postcss, which will add all your styles in styles.css file:

postcss({
        modules: true,
        extract: 'styles.css',
        minimize: true,
        inject: false,
        sourceMap: true,
        extensions: ['.scss', '.css'],
        use: ['sass'],
      }),

Keep in mind that anyone who installs your package has to import the styles file as follows:

import "your-package/styles.css";