diff --git a/CHANGELOG.md b/CHANGELOG.md index f1a919f7f6..0998ecb494 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Reduced the size of the global stylesheet by removing the unused utilities of `bootstrap` - Upgraded `bootstrap` from version `4.6.2` to `5.3.8` ### Fixed diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss index 9eedbb60d0..e144732e1e 100644 --- a/apps/client/src/styles/bootstrap.scss +++ b/apps/client/src/styles/bootstrap.scss @@ -4,6 +4,8 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ +@use 'sass:map'; + // Configuration @import 'bootstrap/scss/functions'; @@ -28,6 +30,13 @@ $enable-rfs: false; $enable-smooth-scroll: false; $figure-caption-font-size: 90%; $green: #28a745; +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +); $grid-gutter-width: 30px; $hr-opacity: 1; $initialism-font-size: 90%; @@ -41,6 +50,64 @@ $table-cell-padding-y: 0.75rem; @import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/utilities'; +// Remove the utility groups that the app does not use +// (keep 'pointer-events' and 'visibility') +$unused-utilities: ( + 'align-content', + 'bg-opacity', + 'border-color', + 'border-end', + 'border-opacity', + 'border-start', + 'border-width', + 'bottom', + 'column-gap', + 'end', + 'flex', + 'focus-ring', + 'font-size', + 'font-style', + 'gap', + 'gradient', + 'line-height', + 'link-offset', + 'link-opacity', + 'link-underline', + 'link-underline-opacity', + 'max-height', + 'min-viewport-height', + 'min-viewport-width', + 'object-fit', + 'opacity', + 'order', + 'overflow-y', + 'rounded-bottom', + 'rounded-end', + 'rounded-start', + 'rounded-top', + 'row-gap', + 'shadow', + 'start', + 'subtle-background-color', + 'subtle-border-color', + 'text-color', + 'text-opacity', + 'top', + 'translate-middle', + 'user-select', + 'viewport-height', + 'viewport-width', + 'z-index' +); + +@each $key in $unused-utilities { + @if not map.has-key($utilities, $key) { + @error 'The utility group "#{$key}" does not exist'; + } +} + +$utilities: map.remove($utilities, $unused-utilities...); + // Layout & components @import 'bootstrap/scss/root'; @import 'bootstrap/scss/reboot';