Skip to content

feat(docs): add prettier-plugin-bootstrap for automatic class sorting#42383

Open
pierluigilenoci wants to merge 1 commit into
twbs:mainfrom
pierluigilenoci:feat/prettier-plugin-bootstrap
Open

feat(docs): add prettier-plugin-bootstrap for automatic class sorting#42383
pierluigilenoci wants to merge 1 commit into
twbs:mainfrom
pierluigilenoci:feat/prettier-plugin-bootstrap

Conversation

@pierluigilenoci
Copy link
Copy Markdown
Contributor

@pierluigilenoci pierluigilenoci commented May 1, 2026

Summary

Adds prettier-plugin-bootstrap as a standalone npm package to automatically sort Bootstrap CSS classes following the framework's recommended order — similar to what prettier-plugin-tailwindcss provides for Tailwind CSS.

This addresses the feedback from #42359 where @coliff and @julien-deramond suggested extracting the plugin into a separate package.

Closes #38397

What changed

  1. package.json — adds prettier-plugin-bootstrap@^0.2.1 as a dev dependency
  2. site/.prettierrc.json — extends the existing plugins array with "prettier-plugin-bootstrap" (consolidated on the existing line per @coliff's review)
  3. 28 .astro files — class attributes reordered by prettier --write (no functional changes)

Plugin features (v0.2.x)

  • Sorts classes following Bootstrap's architecture (layout → components → helpers → utilities)
  • Responsive variants (d-md-flex) sort immediately after their base class
  • Unknown/custom classes preserved in their original relative order at the end
  • bootstrapFunctions option for sorting inside clsx(), cn(), classNames() calls
  • Supports HTML, JSX/TSX, Vue, Angular, Svelte, and Astro parsers
  • 88 tests, 100% code coverage
  • Zero runtime dependencies

Sorting order

  1. Layout — containers, grid, columns
  2. Components — btn, card, modal, navbar, etc. (following bootstrap.scss import order)
  3. Helpers — clearfix, visually-hidden, stretched-link
  4. Utilities — following the key order of scss/_utilities.scss

Plugin repository

https://github.com/pierluigilenoci/prettier-plugin-bootstrap

CI codecov npm

Test plan

  • npx prettier --config site/.prettierrc.json -c site passes
  • Plugin tested with HTML, JSX/TSX, Vue, Angular, Svelte, and Astro parsers
  • 88 unit + integration + snapshot tests in the plugin repository
  • 100% code coverage (statements, branches, functions, lines)
  • CI green on Node 20/22
  • Zero security vulnerabilities (Snyk verified)

@pierluigilenoci
Copy link
Copy Markdown
Contributor Author

cc @julien-deramond @mdo @coliff — this adds automatic Bootstrap class sorting to the docs site via a Prettier plugin (similar to prettier-plugin-tailwindcss). Happy to adjust anything if needed.

@pierluigilenoci pierluigilenoci force-pushed the feat/prettier-plugin-bootstrap branch 4 times, most recently from 7d7841b to 4cb6504 Compare May 3, 2026 20:55
Comment thread site/.prettierrc.json Outdated
@pierluigilenoci pierluigilenoci force-pushed the feat/prettier-plugin-bootstrap branch from 26a9da8 to fb31ab8 Compare May 15, 2026 14:59
Adds `prettier-plugin-bootstrap` (v0.3.0) to automatically sort Bootstrap
CSS classes following the framework's architecture order.

- Adds `prettier-plugin-bootstrap@^0.3.0` as a dev dependency
- Configures `.prettierrc.json` with the plugin (after prettier-plugin-astro)
- Reformats 28 `.astro` files with sorted class attributes (no functional changes)

Plugin features:
- Sorts classes: layout → components → helpers → utilities
- Responsive variants sort after their base class
- Supports HTML, JSX/TSX, Vue, Angular, Svelte, and Astro
- Public sorting API via `prettier-plugin-bootstrap/sorter`
- 121 tests, 100% coverage, zero runtime dependencies

Signed-off-by: Pierluigi Lenoci <pierluigilenoci@gmail.com>
@pierluigilenoci pierluigilenoci force-pushed the feat/prettier-plugin-bootstrap branch from fb31ab8 to 1c07845 Compare May 21, 2026 19:35
@pierluigilenoci pierluigilenoci requested a review from coliff May 21, 2026 19:42
@pierluigilenoci
Copy link
Copy Markdown
Contributor Author

Update: addressed @coliff's review — consolidated the plugins array on a single line in site/.prettierrc.json (the previous version had a duplicate plugins key, which is now removed). Also refreshed the PR description: the dependency on #42389 is no longer relevant since #42390 (which enabled prettier-plugin-astro upstream) was merged. All CI green ✅, branch is up-to-date with main. Ready for another look whenever convenient — thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create a Bootstrap class ordering prettier

3 participants