Plugin can generate invalid output CSS bundle from valid input CSS files (misplaced @charset from concatenation)

[alecglassford]

From valid CSS files (e.g. that start with @charset "utf-8";), this plugin can generate an invalid CSS output (e.g. @charset "utf-8"; appears multiple times and/or somewhere other than the start of the file).

References:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
• https://drafts.csswg.org/css-syntax-3/#charset-rule

I've created a minimal reproduction of this issue: https://gist.github.com/alecglassford/7ef56480d4aa620b0f753a20236773d4

As a point of comparison, Vite handles this scenario by hoisting the first @charset statement it encounters to the top of the CSS output and removing any additional @charset statements: vitejs/vite#7678 and vitejs/vite#7691

---

As a side note, I suspect #36 is a similar issue: concatenating CSS inputs can lead to @import appearing in the middle of the output CSS; this at-rule should also only appear at the top of a file.

[thgh]

Do you mind checking out https://www.npmjs.com/package/rollup-plugin-import-css or https://www.npmjs.com/package/rollup-plugin-styles and see if those work for you?

I'm using higher level frameworks nowadays so won't fix bugs. Happy to merge a fix though!