• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Question

Why does the breakpoints functions down(key) and between(start, end) iterate the key and end +1 ?

Beheviour

If I want to style something below, say md (960px) for example, it adds +1 to the index and gets lg (1280px) instead. Dosen't down(key) means <=key?

between(start, end) always adds 1 to the end index. So if you want to style something between 960px and 1280px I need to call between('md', 'md'); which adds +1 to the end index of the last argument which gives @media (min-width: 960px) (max-width: 1280px ).

Link to reproduction

Link: https://codesandbox.io/s/20w4v142lj

1. Adjust window to see box color change based on width

Context

From createBreakpoints.js in @material-ui/core/styles/:

function  down(key) {
    var  endIndex  =  keys.indexOf(key) +  1; // HERE
    var  upperbound  =  values[keys[endIndex]];
    
    if (endIndex  ===  keys.length) {
	    // xl down applies to all sizes
	    return  up('xs');
    }
    
    var  value  =  typeof  upperbound  ===  'number'  &&  endIndex  >  0  ?  upperbound  :  key;
    return  "@media (max-width:".concat(value  -  step  /  100).concat(unit, ")");
}

The same applies to the between(start, end) function

Environment