Add extract option for Rollup Plugin

[drwpow]

Summary

Hello! Experimenting with Vanilla Extract building a UI library, and I’m using the Rollup plugin. The generated output leaves the following JS in the output:

import "../src/components/button.css.ts.vanilla.css";

This works when running it back through a bundler in an app, but when shipping a library to npm, this becomes a footgun because it requires re-bundling JS which could break the app (not to mention it’s annoying to deal with in tests).

I’d love to add an extract option to the Rollup plugin:

  output: {
    dir: "dist",
  },
  plugins: [
    vanillaExtractPlugin({
+     extract: "styles.css", // outputs to dist/styles.css
    }),
  ],

That then doesn’t leave any CSS imports in the JS, just bundles them together into a CSS file as-named.

Advantages

• Generates code that’s 100% npm/Node.js ready
• Requires no post-build bundling from consumers
• Requires no test config where these packages have to be treated specially

Details

• Minification could be supported too if folks are interested; if that’s the case we could allow an option for extract
• Bundling order would just be simple alphabetization. If using Vanilla Extract, the cascade shouldn’t affect anything, therefore just having a predictable output would be preferable

Alternatives

• Currently, to use Vanilla Extract, we have to write and maintain a 2nd, custom Rollup plugin, to go back over everything and manually edit JS + CSS to get this effect. Adding it to the plugin would help a lot of folks packaging libraries for npm.

I’d also be interested in adding it to the Vite plugin, too, just for parity.

• I’d be willing to open a PR for this

[askoufis]

@drwpow This would be a great addition to the rollup plugin. I've tried in the past to get rollup to bundle all generated CSS into a single file but never managed to get it to work. A PR with the feature would be much appreciated.

I will mention though that CSS ordering definitely matters in some cases. For example, if you want to include a CSS reset, typically this would be need to be right at the top of your stylesheet. Additionally, @layer definition ordering can affect how your styles cascade.

Ideally styles would be ordered in the stylesheet in the order that rollup traverses the in.

[drwpow]

Yeah CSS order between files is a classically tricky problem. Rollup traversal order is async therefore you might get a different order each time. Each file’s contents will be preserved in tact, there’s just not always a guarantee between file A and B what the final order is. It’s also tricky because if you hoist out certain styles, or try to be “smart” it may backfire as the cascade is different than authored.

Agree it should be deterministic on some level though, especially since Vanilla Extract lets you import the same files into different JS files. Some Rollup styling plugins try and find a balance between dealing with an async traversal order and import graph, making a “best attempt” guess at what the user intended but without flat-out duplicating CSS each time (explanation why that’s technically correct). I’ll try and follow some of the recommended strategies as a first cut, but we could try and break it with edge cases 🙂

[askoufis]

I suppose just being able to split out entrypoints would be enough to facilitate various order-dependent patterns. E.g. your /reset.css entrypoint would be bundled from a single reset.css.ts file to ensure CSS ordering is preserved, whereas all your order-independent component CSS can live in a separate bundle/entrypoint.

[drwpow]

Came up with a pretty good result in #1604! The CSS final order is based on your import order as-authored, which I think is pretty ideal (i.e. if the order isn’t what you expected, just rearrange the imports!). Tests are all passing.

Would love feedback on any of it.

[askoufis]

Have had some busy few weeks at work, and I'm moving house currently, so I'm a bit short on time. I'm hoping to have some time to review it next week.