HiDPI breakpoints

[ncoden]

Closes Partially fix #9556.

Add hidpi-1-5, hidpi-2 and hidpi-3 breakpoints.

Usage

@include breakpoint(hidpi-2) {
  // HiDPI x2 and up.
}

@include breakpoint(hidpi-2 only) {
  // Between HiDPI x2 and  x3 (excluded).
}

@include breakpoint(hidpi-2 down) {
  // HiDPI x3 (excluded) and down.
}

Any HiDPI breakpoint can be added in the $breakpoints-hidpi map (the order does not matter):

$breakpoints-hidpi: (
  hidpi-1: 1,
  hidpi-1-5: 1.5,
  hidpi-2: 2,
  retina: 2,
  hidpi-3: 3
) !default;

Changes:

• Refactor breakpoint function.
• Add $breakpoints-hidpi map: A list of named HiDPI breakpoints with HiDPI ratios (without units).
• Add support for HiDPI breakpoints (up, only, down) in @function breakpoint.
• Add unit tests for HiDPI breakpoint with default (up), up, only and down ranges.

Other changes:

• Add @function -zf-map-next-number: Find the next number in a map.
• Add @function -zf-bp-join: Return media query string from the given min and/or
  max limits.
• Add @function zf-str-join: Return a join of the two given strings $str1 and
  $str2. If the two strings are not empty, they are separated by
  $delimiter.

No breaking changes: HiDPI breakpoints works exactly like standard breakpoints. retina is an alias for hidpi-2.

[ncoden]

So, some news: I looked at how to add HiDPI breakpoints to Interchange. It will require a refactor of Interchange and util.MediaQuery since these two files are built on the assumption there is only size breakpoint and only one breakpoint is valid at the same time.

It would also be good to pass datas from SCSS to Js properly throw JSON instead of serialised map. But I do not want to add any SCSS library (SassyJSON) before having a proper SCSS dependency management. So it will wait for #9542.

@kball @nlap Let me know it you want the Interchange support to be added in this PR or an other.

[nlap]

Hmm I see, I hadn't looked into it enough until now to notice the interchange retina query wasn't passed from the SCSS.

FWIW my use for #9556 was specifically with Interchange, but I think this PR adds value as it is.

[kball]

I concur, lets keep the interchange refactor separate. @brettsmason @andycochran as our other "sassy" yetinauts, can one of you review? ;)

[kball]

ping @andycochran can you take a look at this?

[ncoden]

Note: this PR only add support for hidpi in the breakpoint mixin. A refactor of the way breakpoints are handled across the whole framework is required to add support in visibility classes, grids & cie.

The problem mainly comes from that functions/mixins will manually get the $breakpoints map instead of relying on the breakpoint mixins. This is not hard to refactor, but it takes some time to be sure nothing has been broken.

[DanielRuf]

Note: this PR only add support for hidpi in the breakpoint mixin. A refactor of the way breakpoints are handled across the whole framework is required to add support in visibility classes, grids & cie.

The problem mainly comes from that functions/mixins will manually get the $breakpoints map instead of relying on the breakpoint mixins. This is not hard to refactor, but it takes some time to be sure nothing has been broken.

Which is still relevant also for #10979

[nlap]

Bumping this per discussion in #9556

Although my main use case was with Interchange, I think this PR is a great addition, makes more sense than the current conventions, and should be pulled in 👍

[kball]

Approved, fixing merge conflicts and merging.