I am trying to remove unused CSS from my code, but I am struggling with tree-shaking my CSS files.

I decided to use rollup instead of webpack, because it was said that tree-shaking is a core idea behind the library, but now it seems to me that rollup is not capable of tree-shaking CSS files at all.

What I am doing is the following:

1. I create a rollup config for my page:

export default [
  {
    input: "path/to/index.js",
    output: [
      {
        format: "esm",
        file: "path/to/output/index.min.js",
      },
    ],
    treeshake: true,
    plugins: [
      postcss({
        extract: true,
        plugins: [cssnano()],
        extensions: [".css"],
      }),
      resolve(),
      commonjs(),
      terser(),
    ],
  },

Then I have my index.js file where I import my CSS and my JS:

import "../path/bootstrap.css";
import "../path/css/nav.css";
import "../path/css/footer.css";
import "bootstrap/js/dist/carousel";

import "../modules/css/example.css/";

import { example_function } from "../path/to/js/example.js";
example_function();

I run the rollup bundler and it creates a minified JS and a minified CSS file. So far so good, but it still includes the complete bootstrap classes for the CSS. I would like to tree-shake the CSS and only include the classes that are actually used.

Are there some settings that I am missing? Or is this not as easyly possible as I hope to achieve it.