Define .browserslistrc as the single source of truth and embed it in npm package (#42195)

Author: julien-deramond

.bundlewatch.config.json

@@ -14,7 +14,7 @@
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
-      "maxSize": "5.0 kB"
+      "maxSize": "5.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",

build/css-minify.mjs

@@ -17,8 +17,17 @@ const distDir = path.join(process.cwd(), 'dist/css')
 const cssFiles = fs.readdirSync(distDir)
   .filter(file => file.endsWith('.css') && !file.endsWith('.min.css'))
 
-// Target browsers (matching Bootstrap's browser support)
-const targets = browserslistToTargets(['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead'])
+// Target browsers (read from .browserslistrc when available)
+let targets
+try {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  const { default: browserslist } = await import('browserslist')
+  const browsers = browserslist()
+  console.log('Target browsers from .browserslistrc:', browsers)
+  targets = browserslistToTargets(browsers)
+} catch {
+  console.error('Could not load browserslist')
+}
 
 for (const file of cssFiles) {
   const inputPath = path.join(distDir, file)

package.json

@@ -199,7 +199,8 @@
     "js/{src,dist}/**/*.{js,map}",
     "js/index.js",
     "scss/**/*.scss",
-    "!scss/tests/**"
+    "!scss/tests/**",
+    ".browserslistrc"
   ],
   "overrides": {
     "volar-service-emmet": "0.0.63"

site/src/content/docs/customize/optimize.mdx

@@ -48,7 +48,7 @@ const dialog = new Dialog(document.getElementById('myDialog'))
 
 ## Autoprefixer .browserslistrc
 
-Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `.browserslistrc` file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.
+Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `.browserslistrc` file, found in the root of the Bootstrap repo and at the root of the npm package (`node_modules/bootstrap/.browserslistrc`). Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.
 
 ## Unused CSS
 

site/src/content/docs/getting-started/approach.mdx

@@ -139,6 +139,8 @@ You can find our supported range of browsers and their versions [in our `.browse
 
 <Code lang="plaintext" filePath=".browserslistrc" />
 
+If you installed Bootstrap via npm, you can also find this file locally at `node_modules/bootstrap/.browserslistrc`.
+
 We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intended browser support via CSS prefixes, which uses [Browserslist](https://github.com/browserslist/browserslist) to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.
 
 ## Guiding principles

site/src/content/docs/getting-started/install.mdx

@@ -41,6 +41,7 @@ Bootstrap’s `package.json` contains some additional metadata under the followi
 
 - `sass` - path to Bootstrap’s main [Sass](https://sass-lang.com/) source file
 - `style` - path to Bootstrap’s non-minified CSS that’s been compiled using the default settings (no customization)
+- `.browserslistrc` - shipped at the package root for Browserslist/Autoprefixer browser targets
 
 ### Using Yarn