Add Bootstrap 6 support (v6.0.0.alpha1, tracking v6-dev)

.github/workflows/ci.yml

@@ -16,31 +16,30 @@ jobs:
         gemfile:
           - test/gemfiles/rails_6_0.gemfile
           - test/gemfiles/rails_6_1.gemfile
-          - test/gemfiles/rails_7_0_sassc.gemfile
           - test/gemfiles/rails_7_0_dartsass.gemfile
+          - test/gemfiles/rails_7_1.gemfile
+          - test/gemfiles/rails_7_2.gemfile
+          - test/gemfiles/rails_8_0.gemfile
+          - test/gemfiles/rails_8_1.gemfile
+          # Propshaft + dartsass-rails + importmap-rails, the default stack of `rails new`.
+          - test/gemfiles/rails_8_1_propshaft.gemfile
+        exclude:
+          # Rails 7.2 requires Ruby 3.1+.
+          - { ruby_version: '2.7', gemfile: test/gemfiles/rails_7_2.gemfile }
+          - { ruby_version: '3.0', gemfile: test/gemfiles/rails_7_2.gemfile }
+          # Rails 8 requires Ruby 3.2+.
+          - { ruby_version: '2.7', gemfile: test/gemfiles/rails_8_0.gemfile }
+          - { ruby_version: '3.0', gemfile: test/gemfiles/rails_8_0.gemfile }
+          - { ruby_version: '3.1', gemfile: test/gemfiles/rails_8_0.gemfile }
+          - { ruby_version: '2.7', gemfile: test/gemfiles/rails_8_1.gemfile }
+          - { ruby_version: '3.0', gemfile: test/gemfiles/rails_8_1.gemfile }
+          - { ruby_version: '3.1', gemfile: test/gemfiles/rails_8_1.gemfile }
+          - { ruby_version: '2.7', gemfile: test/gemfiles/rails_8_1_propshaft.gemfile }
+          - { ruby_version: '3.0', gemfile: test/gemfiles/rails_8_1_propshaft.gemfile }
+          - { ruby_version: '3.1', gemfile: test/gemfiles/rails_8_1_propshaft.gemfile }
         include:
-          - ruby_version: '2.5'
-            gemfile: test/gemfiles/rails_4_2.gemfile
           - ruby_version: '2.6'
-            gemfile: test/gemfiles/rails_4_2.gemfile
-          - ruby_version: '2.5'
-            gemfile: test/gemfiles/rails_5_0.gemfile
-          - ruby_version: '2.6'
-            gemfile: test/gemfiles/rails_5_0.gemfile
-          - ruby_version: '2.7'
-            gemfile: test/gemfiles/rails_5_0.gemfile
-          - ruby_version: '2.5'
-            gemfile: test/gemfiles/rails_5_1.gemfile
-          - ruby_version: '2.6'
-            gemfile: test/gemfiles/rails_5_1.gemfile
-          - ruby_version: '2.7'
-            gemfile: test/gemfiles/rails_5_1.gemfile
-          - ruby_version: '2.5'
-            gemfile: test/gemfiles/rails_5_2.gemfile
-          - ruby_version: '2.6'
-            gemfile: test/gemfiles/rails_5_2.gemfile
-          - ruby_version: '2.7'
-            gemfile: test/gemfiles/rails_5_2.gemfile
+            gemfile: test/gemfiles/rails_6_0.gemfile
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6

.github/workflows/update-bootstrap.yml

@@ -0,0 +1,65 @@
+name: Update Bootstrap
+
+# Re-import the dist files from an upstream twbs/bootstrap release tag (or
+# branch/commit). The gem tracks a fixed pre-release tag, so this no longer
+# runs on a schedule: when a new Bootstrap 6 tag is published, dispatch it
+# with that tag and bump the `default` below. If the tracked ref differs from
+# what is checked in, the assets are re-imported, the version synced, the
+# stylesheets verified to still compile, and the result committed.
+
+on:
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: Upstream twbs/bootstrap tag (or branch/commit) to import
+        required: false
+        default: v6.0.0-alpha.1
+
+permissions:
+  contents: write
+
+concurrency:
+  group: update-bootstrap
+  cancel-in-progress: false
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    env:
+      BUNDLE_GEMFILE: ${{ github.workspace }}/test/gemfiles/rails_7_0_dartsass.gemfile
+      UPSTREAM_REF: ${{ github.event.inputs.ref || 'v6.0.0-alpha.1' }}
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.4'
+          bundler-cache: true
+
+      - name: Import Bootstrap and sync version
+        id: update
+        run: |
+          bundle exec rake update"[$UPSTREAM_REF]"
+          bundle exec rake sync_version"[$UPSTREAM_REF]"
+          # Only consider the update's own outputs, never stray CI artifacts.
+          if [ -n "$(git status --porcelain -- assets lib/bootstrap/version.rb)" ]; then
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "changed=false" >> "$GITHUB_OUTPUT"
+            echo "Already up to date with twbs/bootstrap@${UPSTREAM_REF}."
+          fi
+
+      - name: Verify the stylesheets still compile
+        if: steps.update.outputs.changed == 'true'
+        run: bundle exec rake debug
+
+      - name: Commit and push
+        if: steps.update.outputs.changed == 'true'
+        run: |
+          sha=$(grep -oE "[0-9a-f]{40}" lib/bootstrap/version.rb | head -1)
+          git config user.name  'github-actions[bot]'
+          git config user.email '41898282+github-actions[bot]@users.noreply.github.com'
+          git add -A -- assets lib/bootstrap/version.rb
+          git commit -m "Update Bootstrap to twbs/bootstrap@${UPSTREAM_REF} (${sha})"
+          git push

.gitignore

@@ -7,13 +7,15 @@ Gemfile.lock
 .rvmrc
 .rbenv-version
 
-# Ignore bundler config
-/.bundle
+# Ignore bundler config (in the repo root and under test/gemfiles/*)
+.bundle/
 /vendor/cache
 /vendor/bundle
 tmp/
 test/screenshots/
 test/dummy_rails/log/*.log
 test/dummy_rails/public/assets/
+test/dummy_propshaft/log/*.log
+test/dummy_propshaft/public/assets/
 .DS_Store
 node_modules

CHANGELOG.md

@@ -6,6 +6,33 @@ The changelog only includes changes specific to the RubyGem.
 The Bootstrap framework changes can be found in [the Releases section of twbs/bootstrap](https://github.com/twbs/bootstrap/releases).
 Release announcement posts on [the official Bootstrap blog](http://blog.getbootstrap.com) contain summaries of the most noteworthy changes made in each release of Bootstrap.
 
+# 6.0.0.alpha.1
+
+First pre-release tracking Bootstrap 6 (upstream [`v6.0.0-alpha.1`](https://github.com/twbs/bootstrap/releases/tag/v6.0.0-alpha.1)). **This is an alpha; expect breaking changes.**
+
+* **Sass module system.** Bootstrap 6 replaced `@import` with `@use`/`@forward`.
+  Import Bootstrap with `@use "bootstrap"` and customize variables via
+  `@use "bootstrap" with (...)`. See the [v5→v6 migration guide](https://github.com/twbs/bootstrap/blob/v6.0.0-alpha.1/skills/bootstrap-v5-v6-migration/SKILL.md).
+* **Dart Sass is required to compile the stylesheets.** LibSass/SassC
+  (`sassc-rails`) cannot compile the module system, so `sassc-rails` is no
+  longer a supported Sass engine. Use `dartsass-sprockets` (a drop-in
+  replacement), `dartsass-rails`, or `cssbundling-rails`. The minimum Ruby
+  version is now 2.6 (compiling the stylesheets with a Ruby-side engine
+  requires a recent Dart Sass, i.e. Ruby 3.1+).
+* The standalone `bootstrap-grid`, `bootstrap-reboot`, and `bootstrap-utilities`
+  Sass entry points were removed upstream; only `bootstrap` remains.
+* **JavaScript is now ES-module only.** Bootstrap 6 removed the UMD bundle and
+  the `window.bootstrap` global, so the `bootstrap-sprockets` Sprockets manifest
+  and the `globalThis` shim are gone. Load Bootstrap via importmaps (see the
+  README).
+* **Popper replaced by [Floating UI](https://floating-ui.com/).** The `popper_js`
+  runtime dependency was removed. The self-contained `bootstrap.bundle.{js,min.js}`
+  builds inline both `@floating-ui/dom` and `vanilla-calendar-pro`, so a single
+  importmap pin works with no extra dependencies (the recommended path). For
+  lighter-weight pinning of the non-bundled `bootstrap.{js,min.js}` or individual
+  component modules, a self-contained ESM build of `@floating-ui/dom` is also
+  vendored as `floating-ui.js`.
+
 # 5.3.4
 
 * Autoprefixer is now optional.

Gemfile

@@ -3,7 +3,6 @@ source 'https://rubygems.org'
 gemspec
 
 group :development do
-  gem 'popper_js', '>= 1.12.3'
   gem 'dartsass-sprockets'
 end
 

README.md

@@ -1,9 +1,18 @@
 # Bootstrap Ruby Gem [![CI](https://github.com/twbs/bootstrap-rubygem/actions/workflows/ci.yml/badge.svg)](https://github.com/twbs/bootstrap-rubygem/actions/workflows/ci.yml) [![Gem](https://img.shields.io/gem/v/bootstrap.svg)](https://rubygems.org/gems/bootstrap)
 
-[Bootstrap 5][bootstrap-home] ruby gem for Ruby on Rails (*Sprockets*/*Importmaps*) and Hanami (formerly Lotus).
+[Bootstrap 6][bootstrap-home] ruby gem for Ruby on Rails (*Sprockets*/*Importmaps*) and Hanami (formerly Lotus).
 
 For Sass versions of Bootstrap 3 and 2 see [bootstrap-sass](https://github.com/twbs/bootstrap-sass) instead.
 
+> **Bootstrap 6 (pre-release):** This is an alpha tracking the upstream
+> [`v6.0.0-alpha.1`](https://github.com/twbs/bootstrap/releases/tag/v6.0.0-alpha.1) release.
+> Bootstrap 6 moved its Sass to the [module system](https://sass-lang.com/documentation/at-rules/use)
+> (`@use`/`@forward`), so its stylesheets require a **Dart Sass** engine to
+> compile — LibSass/SassC (`sassc-rails`) cannot compile them and is no longer
+> supported by this gem. Its JavaScript is ES-module only and is loaded via
+> importmaps. See the [CHANGELOG](CHANGELOG.md).
+> For the previous stable release, use `gem 'bootstrap', '~> 5.3.8'`.
+
 **Ruby on Rails Note**: Newer releases of Rails have added additional ways for
 assets to be processed. The `twbs/bootstrap-rubygem` is for use with Importmaps
 or Sprockets, but not Webpack.
@@ -21,14 +30,16 @@ Please see the appropriate guide for your environment of choice:
 Add `bootstrap` to your Gemfile:
 
 ```ruby
-gem 'bootstrap', '~> 5.3.8'
+gem 'bootstrap', '~> 6.0.0.alpha1'
 ```
 
-This gem requires a Sass engine, so make sure you have **one** of these gems in your Gemfile:
-- [`dartsass-sprockets`](https://github.com/tablecheck/dartsass-sprockets): Dart Sass engine, recommended but only works for Ruby 2.6+ and Rails 5+
+This gem requires a Sass engine, so make sure you have **one** of these gems in your Gemfile.
+Bootstrap 6 stylesheets use the Sass module system, so a **Dart Sass** engine is
+required to compile them — `sassc-rails` (LibSass) cannot compile Bootstrap 6 and
+is no longer supported; migrate to one of:
+- [`dartsass-sprockets`](https://github.com/tablecheck/dartsass-sprockets): Dart Sass engine, recommended (a drop-in replacement for `sassc-rails`). Compiling Bootstrap 6 requires version 3.1+ and therefore Ruby 3.1+; older versions install on Ruby 2.6+ but bundle a Dart Sass too old for Bootstrap 6.
 - [`dartsass-rails`](https://github.com/rails/dartsass-rails): Dart Sass engine, recommended for Rails projects that use Propshaft
-- [`cssbundling-rails`](https://github.com/rails/cssbundling-rails): External Sass engine
-- [`sassc-rails`](https://github.com/sass/sassc-rails): SassC engine, deprecated but compatible with Ruby 2.3+ and Rails 4
+- [`cssbundling-rails`](https://github.com/rails/cssbundling-rails): External Sass engine, runs Dart Sass in Node so it works on any supported Ruby
 
 Also ensure that `sprockets-rails` is at least v2.3.2.
 
@@ -37,14 +48,24 @@ If you are using Rails, add the `autoprefixer-rails` gem to your app and ensure
 
 `bundle install` and restart your server to make the files available through the pipeline.
 
-Import Bootstrap styles in `app/assets/stylesheets/application.scss`:
+Import Bootstrap styles in `app/assets/stylesheets/application.scss` with `@use`
+(Bootstrap 6 no longer supports `@import`):
+
+```scss
+@use "bootstrap";
+```
+
+To customize Bootstrap's variables, configure them through the `@use ... with`
+rule instead of setting globals before an `@import`:
 
 ```scss
-// Custom bootstrap variables must be set or imported *before* bootstrap.
-@import "bootstrap";
+@use "bootstrap" with (
+  $primary: #c0ffee,
+  $enable-rounded: false
+);
 ```
 
-The available variables can be found [here](assets/stylesheets/bootstrap/_variables.scss).
+The available variables can be found in [`bootstrap/_config.scss`](assets/stylesheets/bootstrap/_config.scss).
 
 Make sure the file has `.scss` extension (or `.sass` for Sass syntax). If you have just generated a new Rails app,
 it may come with a `.css` file instead. If this file exists, it will be served instead of Sass, so rename it:
@@ -53,57 +74,68 @@ it may come with a `.css` file instead. If this file exists, it will be served i
 $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
 ```
 
-Then, remove all the `*= require` and `*= require_tree` statements from the Sass file. Instead, use `@import` to import Sass files.
+Then, remove all the `*= require` and `*= require_tree` statements from the Sass file. Instead, use `@use` to import Sass files.
 
 Do not use `*= require` in Sass or your other stylesheets will not be able to access the Bootstrap mixins and variables.
 
-Bootstrap JavaScript can optionally use jQuery.
-If you're using Rails 5.1+, you can add the `jquery-rails` gem to your Gemfile:
+### JavaScript
 
-```ruby
-gem 'jquery-rails'
-```
+Bootstrap 6's JavaScript is **ES-module only** — there is no UMD bundle and no
+`window.bootstrap` global, so the old Sprockets `//= require bootstrap-sprockets`
+concatenation is gone. Load it through **importmaps** instead.
 
-Bootstrap tooltips and popovers depend on [popper.js] for positioning.
-The `bootstrap` gem already depends on the
-[popper_js](https://github.com/glebm/popper_js-rubygem) gem.
+Bootstrap 6 uses [Floating UI](https://floating-ui.com/) (`@floating-ui/dom`)
+for positioning tooltips, popovers, and menus, replacing Popper. A self-contained
+ESM build of `@floating-ui/dom` is **vendored in this gem** as `floating-ui.js`,
+so you do not need an external dependency for it.
 
 #### Importmaps
 
-You can pin either `bootstrap.js` or `bootstrap.min.js` in `config/importmap.rb`
-as well as `popper.js`:
+The simplest option is the self-contained **bundle**
+(`bootstrap.bundle.min.js`), which inlines Floating UI and `vanilla-calendar-pro`,
+so it needs no other pins. In `config/importmap.rb`:
 
 ```ruby
-pin "bootstrap", to: "bootstrap.min.js", preload: true
-pin "@popperjs/core", to: "popper.js", preload: true
+pin "bootstrap", to: "bootstrap.bundle.min.js", preload: true
 ```
 
-Whichever files you pin will need to be added to `config.assets.precompile`:
+Then import the components you need from your application's entrypoint:
 
-```ruby
-# config/initializers/assets.rb
-Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)
+```js
+// app/javascript/application.js
+import { Tooltip } from "bootstrap"
+
+for (const el of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+  new Tooltip(el)
+}
 ```
 
-#### Sprockets
+The data-attribute APIs (`data-bs-toggle`, etc.) work automatically once the
+module is loaded.
 
-Add Bootstrap dependencies and Bootstrap to your `application.js`:
+<details>
+<summary>Lighter-weight pinning (without the bundle)</summary>
 
-```js
-//= require jquery3
-//= require popper
-//= require bootstrap-sprockets
+If you want to avoid the bundled Floating UI / Datepicker code, pin the
+non-bundled `bootstrap.min.js` together with the gem's **vendored**
+`@floating-ui/dom` build:
+
+```ruby
+pin "bootstrap", to: "bootstrap.min.js", preload: true
+pin "@floating-ui/dom", to: "floating-ui.js", preload: true
 ```
 
-While `bootstrap-sprockets` provides individual Bootstrap components
-for ease of debugging, you may alternatively require
-the concatenated `bootstrap` for faster compilation:
+Individual components are also available as separate modules
+(e.g. `pin "bootstrap/tooltip", to: "bootstrap/tooltip.js"`) for finer-grained
+pinning. The [Datepicker](https://getbootstrap.com/) component additionally
+depends on [`vanilla-calendar-pro`](https://www.npmjs.com/package/vanilla-calendar-pro),
+which is **not** vendored — if you use it (or the non-bundled `bootstrap.min.js`,
+which imports it), pin it from a CDN:
 
-```js
-//= require jquery3
-//= require popper
-//= require bootstrap
+```ruby
+pin "vanilla-calendar-pro", to: "https://ga.jspm.io/npm:vanilla-calendar-pro@3.1.0/index.js"
 ```
+</details>
 
 ### b. Other Ruby frameworks
 
@@ -123,13 +155,11 @@ By default all of Bootstrap is imported.
 You can also import components explicitly. To start with a full list of modules copy
 [`_bootstrap.scss`](assets/stylesheets/_bootstrap.scss) file into your assets as `_bootstrap-custom.scss`.
 Then comment out components you do not want from `_bootstrap-custom`.
-In the application Sass file, replace `@import 'bootstrap'` with:
+In the application Sass file, replace `@use 'bootstrap'` with:
 
 ```scss
-@import 'bootstrap-custom';
+@use 'bootstrap-custom';
 ```
 
 [bootstrap-home]: https://getbootstrap.com
-[bootstrap-variables.scss]: https://github.com/twbs/bootstrap-rubygem/blob/master/templates/project/_bootstrap-variables.scss
 [autoprefixer]: https://github.com/ai/autoprefixer
-[popper.js]: https://popper.js.org