Fix dark mode on built site by bumping browserslist#42471
Conversation
…lyfill 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
mdo
changed the title
|
Confirmed finally—this is what's been causing issues on our preview URLs vs local for viewing dark mode. https://deploy-preview-42471--twbs-bootstrap.netlify.app/docs/6.0/components/menu/ @coliff This should fix dark menus, dark navbar, etc. Need to think on the browser support a little more though, but essentially the issue is that LIghtningCSS goes into a prod mode and dumbs down our CSS inadvertently. @julien-deramond Honestly, I think I'm fine bumping to these versions. It's more aggressive, but hell, iOS 27 is going to come out in a few months—feel like it'd be silly to stay behind too long. |
| Safari >= 15.6 | ||
| iOS >= 17.5 | ||
| Safari >= 17.5 | ||
| not Explorer <= 11 |
There was a problem hiding this comment.
minor thing, but no need to specify 'not Explorer <= 11' anymore since it's excluded by 'not dead'.
|
I approve of the supported browserslist update! Interesting visualisation/details of support here. I tested on iPhone 14 with iOS 18 on BrowserStack and didn't spot any browser-related issues... there are problems with iPhone 12 on iOS 17.0 (dropdown menus are transparent), but unfortunately they don't have 17.5 available to test. I tested on a real old iPad Pro 10.5" here with iPadOS 17.7.11 and everything looked good/worked well in light and dark mode. |
Removed comment about CSS light-dark polyfill and updated browser support.
2 participants
Problem
data-bs-theme="dark"examples render in light mode on the Netlify preview while working correctly on the dev server (e.g. Dark menus).Cause
Our color system relies on native CSS
light-dark()+color-scheme. The dev server ships the un-minifiedbootstrap.css(nativelight-dark(), works), but production shipsbootstrap.min.css, minified by Lightning CSS. Because our browserslist floors predated nativelight-dark()support, Lightning CSS lowered it to a--lightningcss-light/--lightningcss-darkcustom-property toggle. That polyfill doesn't honor ourdata-bs-themecolor modes, so dark regions resolve to light.light-dark()is the binding feature — native support landed in Chrome 123, Safari/iOS 17.5, Firefox 120. Our floors were Chrome 120 and Safari/iOS 15.6, dragging in the polyfill.Fix
light-dark(): Chrome/Edge 123, Safari/iOS 17.5 (Firefox 121 already covered). Verified againstbootstrap.cssthat this eliminates all old-syntax lowering (no toggles, native nesting kept). Stopping exactly at the feature line — going higher drops users for zero additional CSS savings.exclude: Features.LightDarkincss-minify.mjsas a guard so this specific (silent, nasty) breakage can't regress if the floors ever drop again.dist/andconfig.ymlSRI hashes are intentionally not committed — Netlify regenerates both via thedist+release-sribuild steps.Testing
Check the Netlify preview once it builds — the dark-mode examples (menus, navbars, etc.) should render dark.
🤖 Generated with Claude Code