Rollup generate single CSS file

[elilabes]

I have a library that uses vanilla extract. I am using Rollup, and I would like to have a single styles.css file that consumers can import.

Anything that can be configured can be done so via css-variables, so I don't want to ship anything other than a single css file. For our use case, consumers are internal and they can prune any css as part of application build if not being used.

Here is my very basic rollup config, it currently exports the css under assets then matches the file system. I have tried postcss and css loaders, but they seem to want an entry point.

I am used to webpack where you specify a rule for certain paths and each plugin passed its output the the next (so vanilla extract can do its thing, then the next plugin can join it all together).

Can someone please point me in the right direction? Thanks 😄

import { vanillaExtractPlugin } from "@vanilla-extract/rollup-plugin";
import esbuild from "rollup-plugin-esbuild";
import peerDepsExternal from "rollup-plugin-peer-deps-external";

export default [
  {
    input: `src/index.ts`,
    plugins: [
      peerDepsExternal(),
      esbuild({
        target: "es2015",
        minify: true,
      }),
      vanillaExtractPlugin(),
    ],
    output: [
      {
        file: `dist/index.js`,
        format: "es",
      },
    ],
  },
];