web: add Bootstrap breakpoints mixins entry-point for CSS modules

Created by: valerybugakov

Issue

It's impossible to use the global SCSS helpers provided by Bootstrap in CSS modules without importing them explicitly. It's not safe to import all global Bootstrap helpers and variables into the CSS module because we redefine many Bootstrap variables before those imports. This slows down the adoption of CSS modules because we rely on some of the helpers. e.g. @include media-breakpoint-x.

Solution

1. [Explored] Use sass-resources-loader to import our redefined variables and Bootstrap globals to each CSS module implicitly. This approach has issues:

   • We have a mix of SCSS modules and CSS variables declarations. It's hard to separate one from another. That means that CSS variable declarations will be included in every CSS module.
   • It's implicit, and it's hard to track which helpers we are actually using in our CSS modules.
   • We don't want to expose all Bootstrap SCSS variables ('bootstrap/scss/variables') to our CSS modules. CSS variables should be used instead. Apparently, Stylelint doesn't have any rules to limit SCSS variables usage 🤷‍♂️.

2. [Adoped] Use explicit imports in CSS modules and create modular entry points for mixins if needed. It might require some duplication. For example, for breakpoints mixins, the $grid-breakpoints variable should be available. It's impossible to import it from Bootstrap without dragging everything else with it, so it's now copy-pasted to our stylesheet. This approach:

   • Exposes some Bootstrap helpers to smooth the migration to CSS modules.
   • Limits Bootstrap features usage in new components and CSS modules.
   • Explicitly defines dependencies. Later it will allow us to implement this functionality internally to have full control over it if we need more flexibility than Bootstrap offers.

// In CSS module
@import 'branded/src/global-styles/breakpoints';

.list {
  @include media-breakpoint-down(xs) {
    magin: 0;
  }
}

Changes

• Created entry point for Bootstrap breakpoints mixins.
• Added /<rootPath>/client to SASS loader option includePaths to allow absolute imports from our packages.
• Removed $media-x SCSS variables in favor of $grid-breakpoints used by Bootstrap mixins. Thanks, @vovakulikov, for noticing it.
• Updated web/styling.md to include guidelines on using Bootstrap helpers.

Closes #20137 (closed).