Map with breakpoint values that are not in ascending order leads to false negatives in JavaScript

[polarbirke]

Working as expected:

Given a Sass map like include-media's default

$breakpoints: (
  'phone': 320px,
  'tablet': 768px,
  'desktop': 1024px
);

the correct active state of each CSS breakpoint will be correctly exposed for the current viewport via the content property of the configured element's (default: body) ::after-pseudo-element.

Not working as expected:

Given a more complex Sass map that has breakpoints without a strictly ascending order of values, the active state will not always be exposed correctly to JavaScript.

$breakpoints: (
  'phone': 320px,
  'tablet': 768px,
  'desktop': 1024px,
  'wide-screen': 1440px;
  'hero-switcharound': 1200px 
);

This export plugin generates CSS by looping through the map, so in this case the last generated media query will be @media (min-width: 1200px) { … }. Due to the way the CSS cascade works, the content of the pseudo-element is always set by the last matching media query.

So for viewports bigger than 1200px, content will always contain the JSON string generated for the hero-switcharound breakpoint and the exposed breakpoint active state will always be false for wide-screen – even for viewports bigger than 1440px.