Boostrap Custom Display

Trying to format a Bootstrap table for decent display on mobile screens, I wanted to hide the thead element below a certain breakpoint. I used the d-none d-md-block combo, then I realized that normally a thead should be in display: table-header-group. And there is no d-table-header-group rule in Bootstrap...

I had to add it, adapting the example provided by the Bootstrap documentation (describing a mixin generated by a map) and mixing with Sass functions for lists (used to generate the display mixins).

The resulting code:

$utilities: map-merge(
  $utilities,
  (
    "display": map-merge(
      map-get($utilities, "display"),
      (
        values: join(
          map-get(map-get($utilities, "display"), "values"),
          table-header-group,
        ),
      ),
    ),
  )
);

My first try was something like

@import "~bootstrap/scss/bootstrap";

// The code above

@import "~bootstrap/scss/utilities/api";

But this generates the display classes (which are a lot of CSS) twice: one for the native Bootstrap definition, one for my own definition.

To execute once the mixin, I had to individually import the core Bootstrap classes and put my own code in between. Here an example including all of Boostrap (can be adapted to exclude non required portions):

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/helpers";

$utilities: map-merge(
  $utilities,
  (
    "display": map-merge(
      map-get($utilities, "display"),
      (
        values: join(
          map-get(map-get($utilities, "display"), "values"),
          table-header-group,
        ),
      ),
    ),
  )
);

@import "~bootstrap/scss/utilities/api";