Fix styles wtih BOM ignored by browsers, leading to UI behavior change

Author: myovchev

.changeset/postcss-bom-box-sizing.md

@@ -0,0 +1,5 @@
+---
+"apostrophe": patch
+---
+
+Fixed incorrect sizing and spacing across the admin UI in webpack builds. A byte order mark preserved by PostCSS 8.5.24 invalidated the stylesheet rule setting `box-sizing` for `.apos-` elements. Sass is now compiled with `charset: false` in webpack builds, so the marker is never emitted. Vite builds were unaffected.

packages/apostrophe/modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js

@@ -41,7 +41,10 @@ module.exports = (options, apos) => {
               loader: 'sass-loader',
               options: {
                 sassOptions: {
-                  silenceDeprecations: [ 'import' ]
+                  silenceDeprecations: [ 'import' ],
+                  // Without this Sass emits a BOM, which postcss 8.5.24+ keeps.
+                  // A BOM in the middle of a stylesheet kills the rule after it.
+                  charset: false
                 },
                 sourceMap: false,
                 // "use" rules must come first or sass throws an error

packages/apostrophe/modules/@apostrophecms/asset/lib/webpack/src/webpack.scss.js

@@ -45,7 +45,10 @@ module.exports = (options, apos, srcBuildNames) => {
               loader: 'sass-loader',
               options: {
                 sassOptions: {
-                  silenceDeprecations: [ 'import' ]
+                  silenceDeprecations: [ 'import' ],
+                  // Without this Sass emits a BOM, which postcss 8.5.24+ keeps.
+                  // A BOM in the middle of a stylesheet kills the rule after it.
+                  charset: false
                 }
               }
             }