Rolldown has officially dropped the builtin support for CSS bundling (see #8399). This plugin seeks to add support for CSS transformation and bundling.

• rollup-plugin-lightningcss: Simple plugin for producing assets on the side, doesn't support imports or the inputs option.
• tsdown: Features a similar plugin, but lacks URL imports and source mapping. Consider for simple use cases.
• vite: Features advanced CSS integration, but relies on the existing ecosystem. Take it or leave it.

Add the CSS file to .inputs to produce the bundled CSS as an asset.

import { lightningcss } from "rolldown-plugin-lightningcss";

export default defineConfig({
  inputs: ["./styles.css"],
  plugin: [lightningcss()],
});

/* styles.css */
@import "./a.css";
@import "./b.css";

/* a.css */
.a {
  color: red;
}

/* b.css */
.b {
  color: green;
}

/* output.css */
.a {
  color: red;
}

.b {
  color: green;
}

Import the CSS file as a module to get the bundled styles as text.

import { lightningcss } from "rolldown-plugin-lightningcss";

export default defineConfig({
  inputs: ["./main.js"],
  plugin: [lightningcss()],
});

/* main.js */
import styles from "./styles.css";

const styleElement = document.createElement("style");
styleElement.innerHTML = styles;

document.head.append(styleElement);

/* styles.css */
@import "./a.css";
@import "./b.css";

const styles = `.a {
  color: red;
}

.b {
  color: green;
}`;
const styleElement = document.createElement("style");
styleElement.innerHTML = styles;
document.head.append(styleElement);

• Does not support CSS modules yet.

• You cannot make imports produce an asset. Instead, mark css imports as external and add them to inputs.
• Lightningcss handles the bundling. Importing the same styles from different entries will result in duplicate output.

Semver

MIT