This gist shows how to reproduce TKTK.
Clone the gist and run the following:
npm install
npx rollup -c
Inspect build/bundle.css
to see @charset "UTF-8";
in the middle of a file.
This is invalid CSS output, because @charset
must only appear at the top of a
CSS file.
References:
- https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
- https://drafts.csswg.org/css-syntax-3/#charset-rule
The immediate cause of the problem is this rollup-plugin-css-only
bug:
thgh/rollup-plugin-css-only#54
However, because Sass may add these @charset
statements even though the user
did not write them directly, using svelte-preproce
with SCSS can introduce
this bug sneakily. (Conversely, if the user was compiling SCSS outside of the
Svelte context, they would not encounter the issue because Sass only adds the
@charset
statement once at the top of its output, rather than once per Svelte
component.) Therefore it might be useful to add some mitigation of the issue in
the svelte-preprocess
package; see further discussion in the linked issue.