Merge pull request #5545 from apostrophecms/a3-incident-postcss-bom

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

Author: myovchev

.github/workflows/main.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [22]
         mongodb-version: [4.4, 5.0, 6.0, 7.0]
 
     # Steps represent a sequence of tasks that will be executed as part of the job

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## UNRELEASED
+
+### Changes
+
+* Dropped support for Node.js 18 and Node.js 20.
+
+### Fixes
+
+* Fixed incorrect sizing and spacing across the admin UI. A byte order mark preserved by PostCSS 8.5.24 invalidated the stylesheet rule setting `line-height` and `box-sizing` for `.apos-` elements. Sass is now compiled with `charset: false`, so the marker is never emitted.
+
 ## 3.67.3 (2025-03-31)
 
 ### Fixes

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

@@ -45,6 +45,11 @@ module.exports = (options, apos) => {
             {
               loader: 'sass-loader',
               options: {
+                sassOptions: {
+                  // 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
                 additionalData: `

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

@@ -30,7 +30,16 @@ module.exports = (options, apos, srcBuildNames) => {
               }
             },
             // Parses SASS imports
-            'sass-loader'
+            {
+              loader: 'sass-loader',
+              options: {
+                sassOptions: {
+                  // 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
+                }
+              }
+            }
           ],
           // https://stackoverflow.com/a/60482491/389684
           sideEffects: true

package.json

@@ -17,7 +17,7 @@
     "url": "git@github.com:apostrophecms/apostrophe.git"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=22.0.0"
   },
   "keywords": [
     "apostrophe",
@@ -154,7 +154,7 @@
     "nyc": "^15.1.0",
     "replace-in-file": "^6.1.0",
     "stylelint": "^14.6.1",
-    "stylelint-declaration-strict-value": "^1.8.0",
+    "stylelint-declaration-strict-value": "~1.10.11",
     "stylelint-order": "^5.0.0",
     "vue-eslint-parser": "^7.1.1"
   },

test/workspaces-project/app.js

@@ -1,16 +1,13 @@
 module.exports = {
   root: module,
   shortName: 'workspaces-project',
+  baseUrl: 'http://localhost:3000',
   modules: {
     '@apostrophecms/express': {
       options: {
         address: '127.0.0.1'
       }
     },
-    '@apostrophecms/sitemap': {
-      options: {
-        baseUrl: 'http://localhost:3000'
-      }
-    }
+    '@apostrophecms/sitemap': {}
   }
 };