Scripts: Prevent a UTF-8 BOM in the middle of extracted CSS

[YvetteNikolov]

What?

Closes #81382

Why / How ?

See #81382 for the full cause chain and the alternatives considered.

Short version: sass-loader compiles production builds compressed, so Sass prepends U+FEFF to every module containing non-ASCII characters; since postcss 8.5.24 that BOM survives and MiniCSSExtractPlugin concatenation leaves it mid-file, where it silently kills the next rule.

Sass documents charset: false as the correct setting when output is concatenated - output stays UTF-8.

Testing Instructions

mkdir wp-scripts-bom && cd wp-scripts-bom
npm init -y && npm i -D @wordpress/scripts
mkdir src
printf "import './a.css';\nimport './b.scss';\n" > src/index.js
printf '.first { color: red; }\n' > src/a.css
printf ':root { --brand: #037d96; }\n.quote::before { content: "\xe2\x80\x9c"; }\n' > src/b.scss
npx wp-scripts build
grep -oba $'\xef\xbb\xbf' build/index.css

• trunk: prints 18: — .first{color:red}\n<BOM>:root{…}, so --brand is unreachable.
• this PR: no output, non-ASCII content value preserved.

Alternative fixes considered:

• fix: strip BOM before process via PostCSS for 8.5.24 webpack/css-loader#1679 strips the BOM before postcss. It targets css-loader 7.x while @wordpress/scripts pins css-loader@^6.2.0, so it would not reach wp-scripts users without a backport.
• Preserve the BOM when stringifying postcss/postcss#2119 (comment) postcss will not revert — the maintainer's position is that a BOM belongs only at the start of a file and that concatenating tools are responsible for removing it.
• BOM marker causes Next.js dev and build to fail vercel/next.js#96374 is the same fallout in another build tool (NextJS), fixed on their side.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @YvetteNikolov.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: YvetteNikolov.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @YvetteNikolov! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[Copilot]

Pull request overview

Prevents Sass from inserting UTF-8 BOMs into CSS modules before extraction and concatenation.

Changes:

• Disables Sass charset markers.
• Documents the bug fix.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/scripts/config/webpack.config.js	Sets sassOptions.charset to false.
packages/scripts/CHANGELOG.md	Records the CSS extraction fix.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[ramonjd]

This is testing well for me. Also non-ASCII content: "“" is preserved as raw UTF-8 as far as I can see.

I don't think there's any advantage to having the trailing BOM right, or any at all?

Would like a second opinion.

[ramonjd]

Also fixes dev output 👍🏻

[Mamaduka]

Let's ship this. Thank you, @YvetteNikolov!

[github-actions]

Congratulations on your first merged pull request, @YvetteNikolov! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!