4.2 breaking change: custom $grid-breakpoints that are smaller than default ones give errors

I’m unable to compile sass with the new $grid-breakpoint changes. This worked just fine with 4.1. It now doesn’t seem possible with 4.2

In my custom variable file that’s included before everything BS4 I have the following:

$grid-breakpoints: (
        xxs: 0,
        xs: 480px,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
);

As you can see, an additional custom breakpoint exists at 480px.

Previously 4.1 _variable.sass contained:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

And my code overrode all the breakpoints and worked fine.

Now in 4.2 _variable.sass:

$grid-breakpoints: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grid-breakpoints: map-merge(
                (
                        xs: 0,
                        sm: 576px,
                        md: 768px,
                        lg: 992px,
                        xl: 1200px
                ),
                $grid-breakpoints
);

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

And it gives the following errors:

WARNING: Invalid value for $grid-breakpoints: This map must be in ascending order, but key 'xxs' has value 0 which isn't greater than 1200px, the value of the previous key 'xl' !

WARNING: First breakpoint in `$grid-breakpoints` must start at 0, but starts at 480px.

WARNING: Invalid value for $container-max-widths: This map must be in ascending order, but key 'xs' has value 500px which isn't greater than 1140px, the value of the previous key 'xl' !

[mdo]

I think we need to ditch these built-in map-merges for regular Sass maps. It now feels over-engineered, and perhaps poorly documented for how folks can customize things.

With the usage of map-merge everywhere, we have the ability to easily add key-value pairs, but not to remove them. There’s no option in Sass to do this, but you can replace a value or add new ones (with map-merge). This is an issue because if you want fewer key-value pairs in a Sass map, you’ll see errors like those of https://github.com/twbs/bootstrap/issues/27927#issuecomment-450060013.

So, what if we remove all map-merge in our variables?

---

Let’s consider an example where we look at our $grid-breakpoints.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

To replace all of the values, we redefine the keys’ values:

$grid-breakpoints: (
  xs: 0,
  sm: 400px,
  md: 800px,
  lg: 1200px,
  xl: 1600px
);

To replace individual key-value pairs, we use map-merge:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

$grid-breakpoints: map-merge($grid-breakpoints, (xl: 1600px));

To add additional values, we also use map-merge:

$grid-breakpoints: map-merge(
  $grid-breakpoints,
  (
    xxl: 1600px,
    xxxl: 1800px
  )
);

To do a bit of everything, we can use replace the default values and use multiple map-merges:

$grid-breakpoints: (
  xs: 300px,
  sm: 500px,
  md: 800px,
  lg: 1100px,
  xl: 1400px
);
$grid-breakpoints: map-merge(
  (
    xxs: 0
  ),
  $grid-breakpoints
);
$grid-breakpoints: map-merge(
  $grid-breakpoints,
  (
    xxl: 1600px,
    xxxl: 1800px
  )
);

You can see all of this in this Sassmeister gist.

[JulienCabanes]

It’s also possible to sort maps after merge, I tried with this gist and it worked without changing anything else : https://gist.github.com/Jakobud/a0ac11e80a1de453cd86f0d3fc0a1410#gistcomment-2327765