Define `.browserslistrc` as the single source of truth and embed it in npm package...

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 305ddefb56155a0ded8e552c627b42725eac58e2..112e6092100b5e48cefb5349ce0e4d62c2e2559d 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.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",

diff --git a/build/css-minify.mjs b/build/css-minify.mjs
index 317f9f1425d1c2cb41ea68820b025247717ef2c0..6f1d112aa32693e9bd079d91de6f8174d358bc80 100644 (file)
--- a/build/css-minify.mjs
+++ b/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)

diff --git a/package.json b/package.json
index ef21e20c0d2089a0f7f36fb91173b564675d0b43..a77bafd54d13a08ae7b6fc4cf3c893d7ad1eb448 100644 (file)
--- a/package.json
+++ b/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"

diff --git a/site/src/content/docs/customize/optimize.mdx b/site/src/content/docs/customize/optimize.mdx
index b473bc8c21c4deca1caf4dc77d4dedab11a90a36..677aeaeaaed6b357c8fe365569e669403cbb43be 100644 (file)
--- a/site/src/content/docs/customize/optimize.mdx
+++ b/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
 

diff --git a/site/src/content/docs/getting-started/approach.mdx b/site/src/content/docs/getting-started/approach.mdx
index 98c33fa0e2cd6d009f3c35aa122b41d71ea41c82..bd37ad442056e99428b8013fe28e6b58ba819620 100644 (file)
--- a/site/src/content/docs/getting-started/approach.mdx
+++ b/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

diff --git a/site/src/content/docs/getting-started/install.mdx b/site/src/content/docs/getting-started/install.mdx
index 5dbe3c5169efd72b446d24ebd163cb75ad45bd56..5f64637e81b234e8cbafddb45dbc45c28392bd78 100644 (file)
--- a/site/src/content/docs/getting-started/install.mdx
+++ b/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