diff --git a/.browserslistrc b/.browserslistrc index 7acddfb1beab..a48650abf804 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -2,9 +2,12 @@ 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. +Chrome >= 123 +Edge >= 123 Firefox >= 121 -iOS >= 15.6 -Safari >= 15.6 -not Explorer <= 11 +iOS >= 17.5 +Safari >= 17.5 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