Workaround: Avoid byte order markers (BOM) in CSS assets

[mcsf]

Proposed changes:

See the original issue upstream:

• [@wordpress/scripts] postcss 8.5.24 can introduce a UTF-8 BOM in the middle of extracted CSS WordPress/gutenberg#81382

Until the fix is released in wp-scripts, prevent the unintended (and breaking) introduction of BOMs in CSS assets by modifiying the default webpack rules.

Verifying the build assets

Other than the change in webpack.config.js, it's impossible to verify this PR's CSS changes, since BOMs aren't represented.

I wanted to be sure that my fix was good, so I wrote this shell script:

#!/bin/bash

rev1="$1"
rev2="$2"

to-hex-bytes() {
	hexdump -e '"" /1 "%01x\n"'
}

diff-bytes() {
	diff  <(git show "$rev1:$1" | to-hex-bytes) <(git show "$rev2:$1" | to-hex-bytes)
}

analyze() {
	awk -v "f=$1" '
		{ buf[NR] = $0 }

		buf[NR - 2] == "< ef" && buf[NR - 1] == "< bb" && /^< bf$/ {
			bom_count++
			ef_count--
			bb_count--
			next
		}

		/^< ef$/ { ef_count++; next }
		/^< bb$/ { bb_count++; next }

		/^</ { print; non_bom_count++ }
		/^>/ { print; non_bom_count++ }

		END {
			printf "%s: %d BOM, %d other changes\n",
				f,
				bom_count,
				non_bom_count + ef_count + bb_count
		}
	'
}

git diff --name-only "$rev1" "$rev2" |
	grep '\.css$' |
	while read -r file; do
		diff-bytes "$file" | analyze "$file"
	done |
	column -ts:

Pass it the two revisions to compare, e.g.

./verify HEAD^ HEAD
build/app/routes/feed/style-content.css     2 BOM, 0 other changes
build/dashboard-stats/style-index-rtl.css   1 BOM, 0 other changes
build/dashboard-stats/style-index.css       1 BOM, 0 other changes
build/followers/style-index-rtl.css         1 BOM, 0 other changes
build/followers/style-index.css             1 BOM, 0 other changes
build/following/style-index-rtl.css         1 BOM, 0 other changes
build/following/style-index.css             1 BOM, 0 other changes

Verify that there are only BOM changes reported, nothing else.

[Copilot]

Pull request overview

This PR adds a temporary workaround in the project’s custom webpack configuration to prevent UTF‑8 byte order marks (BOMs) from being introduced into generated CSS assets, pending an upstream fix in @wordpress/scripts.

Changes:

• Adds a withoutSassCharset() transformation to force sassOptions.charset = false for sass-loader rules to avoid BOMs in concatenated CSS output.
• Regenerates built CSS assets to remove BOM bytes (no functional CSS changes intended).
• Updates build asset version hashes (*.asset.php) to reflect regenerated artifacts.

Reviewed changes

Copilot reviewed 5 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
webpack.config.js	Adds a webpack rule transform to disable Sass charset output as a BOM workaround.
build/following/style-index.css	Regenerated built CSS to remove BOM bytes.
build/following/style-index-rtl.css	Regenerated built CSS to remove BOM bytes.
build/following/index.asset.php	Updates build hash due to regenerated assets.
build/followers/style-index.css	Regenerated built CSS to remove BOM bytes.
build/followers/style-index-rtl.css	Regenerated built CSS to remove BOM bytes.
build/followers/index.asset.php	Updates build hash due to regenerated assets.
build/dashboard-stats/style-index.css	Regenerated built CSS to remove BOM bytes.
build/dashboard-stats/style-index-rtl.css	Regenerated built CSS to remove BOM bytes.
build/dashboard-stats/index.asset.php	Updates build hash due to regenerated assets.
build/app/routes/feed/style-content.css	Regenerated built CSS to remove BOM bytes.
build/app/routes/feed/content.asset.php	Updates build hash due to regenerated assets.

Files not reviewed (6)

• build/dashboard-stats/style-index-rtl.css: Generated file
• build/dashboard-stats/style-index.css: Generated file
• build/followers/style-index-rtl.css: Generated file
• build/followers/style-index.css: Generated file
• build/following/style-index-rtl.css: Generated file
• build/following/style-index.css: Generated file

---

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

[mcsf]

I think this recommendation is overkill, we just want a workaround targeting the setup in Gutenberg (wp-scripts) and the setup here.