From e4e6787b30cfbcfd11d72071425f8e6dd176bb01 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 4 Jun 2026 21:39:22 -0700 Subject: [PATCH 1/2] 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 --- .browserslistrc | 10 +++++++--- build/css-minify.mjs | 8 ++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/.browserslistrc b/.browserslistrc index 7acddfb1beab..07fbca7dd86d 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -2,9 +2,13 @@ last 2 major versions not dead -Chrome >= 120 +# Floors set to the first versions with native CSS `light-dark()` (and nesting), +# so Lightning CSS no longer lowers them to the brittle custom-property polyfill +# that broke `data-bs-theme` dark mode. See https://caniuse.com/css-light-dark +Chrome >= 123 +Edge >= 123 Firefox >= 121 -iOS >= 15.6 -Safari >= 15.6 +iOS >= 17.5 +Safari >= 17.5 not Explorer <= 11 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 6f1d112aa326..19082d61fc62 100644 --- 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 From c85746d279d00a47140db0931536a8793def1cbc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 5 Jun 2026 08:14:52 -0700 Subject: [PATCH 2/2] Update .browserslistrc for browser support and comments Removed comment about CSS light-dark polyfill and updated browser support. --- .browserslistrc | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.browserslistrc b/.browserslistrc index 07fbca7dd86d..a48650abf804 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -4,11 +4,10 @@ last 2 major versions not dead # Floors set to the first versions with native CSS `light-dark()` (and nesting), # so Lightning CSS no longer lowers them to the brittle custom-property polyfill -# that broke `data-bs-theme` dark mode. See https://caniuse.com/css-light-dark +# that broke `data-bs-theme` dark mode. Chrome >= 123 Edge >= 123 Firefox >= 121 iOS >= 17.5 Safari >= 17.5 -not Explorer <= 11 not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)