Ensure @charset is at the top of generated css

[BPScott]

WHY are these changes introduced?

Fixes #4014

Our generated css file was not handling the consolidation and hoisting of @charset declarations.

WHAT is this pull request doing?

Pulls the @charset declaration up to the top of the file. Will error if there is are multiple competing charsets though that shouldn't ever happen because prettier should force all our source files to be utf-8.

How to 🎩

• yarn run build and check dist/styles.css and note that @charset "UTF-8"; is at the top of the file and not half way down.

If you'd like to be more thorough compare output against main:

• Create a build of main: git checkout main && yarn clean && yarn build && mv dist dist-orig
• Create a build from this branch: git checkout fix-charset && yarn clean && yarn build
• Diff the old and new dist folders and note that the only change is the location of the charset in dist/styles.css: diff -ru dist-orig dist

[github-actions]

🟢 No significant changes to src/**/*.tsx were detected.

[alex-page]

Thanks @BPScott

[GoodForOneFare]

👍 Output is as described. I want to endlessly bikeshed, but this approach is more concise than anything I'd come up with.

[BPScott]

I want to endlessly bikeshed

Yeah this is a little hacky. There's probably a smart way to run the single file through postcss again to do this with a proper AST but it's going to be slower than this and I don't think we'll ever run into a case where this this will cause errors - If we end up with multiple file encodings our fix should be "write your source files in UTF8" rather than handle multiple encodings in the build.