Fix dark mode on built site by bumping browserslist (#42471)

* Fix dark mode on built site by avoiding Lightning CSS light-dark() polyfill

Lightning CSS was lowering native light-dark() to a --lightningcss-light/dark
custom-property toggle because our browserslist floors predated native support.
That polyfill breaks data-bs-theme dark mode on the minified (production) CSS,
so dark examples rendered light on Netlify while working in dev.

- Bump browserslist floors to the first versions with native light-dark()
  (Chrome/Edge 123, Safari/iOS 17.5; Firefox 121 already covered)
- Exclude Features.LightDark in css-minify as a guard against regressions

* Update .browserslistrc for browser support and comments

Removed comment about CSS light-dark polyfill and updated browser support.

* Bump browserslist floors to Chrome/Edge 130, Firefox 132, Safari/iOS 18

Raises support floors as far as possible while keeping ~90.8% global
coverage, staying on versions with native light-dark() so Lightning CSS
does no polyfilling.

diff --git a/.browserslistrc b/.browserslistrc
index 7acddfb1beab7f2de94e538ad62ea07451017ee9..7527cf151346aa3a6d66cc0097d041459a3a44ff 100644 (file)
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -2,9 +2,13 @@
 
 last 2 major versions
 not dead
-Chrome >= 120
-Firefox >= 121
-iOS >= 15.6
-Safari >= 15.6
-not Explorer <= 11
+# Floors kept on versions with native CSS `light-dark()` (and nesting) so
+# Lightning CSS doesn't lower them to the brittle custom-property polyfill that
+# broke `data-bs-theme` dark mode. Raised as far as we can while staying above
+# 90% global coverage (~90.8%).
+Chrome >= 130
+Edge >= 130
+Firefox >= 132
+iOS >= 18.0
+Safari >= 18.0
 not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)

diff --git a/build/css-minify.mjs b/build/css-minify.mjs
index 6f1d112aa32693e9bd079d91de6f8174d358bc80..19082d61fc625ae9868fc2e37dd2b597fd7d234d 100644 (file)
--- a/build/css-minify.mjs
+++ b/build/css-minify.mjs
@@ -9,7 +9,7 @@
 
 import fs from 'node:fs'
 import path from 'node:path'
-import { transform, browserslistToTargets } from 'lightningcss'
+import { transform, browserslistToTargets, Features } from 'lightningcss'
 
 const distDir = path.join(process.cwd(), 'dist/css')
 
@@ -48,7 +48,11 @@ for (const file of cssFiles) {
       minify: true,
       sourceMap: true,
       inputSourceMap: inputMap ? JSON.stringify(inputMap) : undefined,
-      targets
+      targets,
+      // Never lower `light-dark()`: its custom-property polyfill breaks our
+      // `data-bs-theme` dark mode. We bumped browser support to versions with
+      // native support to fix this, but this guards against a regression.
+      exclude: Features.LightDark
     })
 
     // Write minified CSS with source map reference