Correction for root font-sizes

[quintenvk]

This normalizes cases where the html-tag has a different font-size set. The font would "jump" going from the max-mq to calc otherwise.

[madeleineostoja]

All tests failing - any reason in particular you hardcoded em into the calc statement? Also I'm a bit fuzzy on what this fixes, could you give an example? rootSize isn't read from the document, it's just used for rem conversions (see #1 for the reasoning behind sizing logic). Thanks!

[quintenvk]

The use-case is where you have a website with smaller rem-sizes, like so:

html {
   font-size: 14px;
}

In this case, the font-size "jumped" and actually became larger than the maximum set size when we went from the largest breakpoint to the breakpoint where the calc was used - until you resized a tad further and the font shrinked below the offsets.

The result was that the mediaqueries, which use 16px-based em's, were OK, but the calc values (which had 14px as 1rem) weren't. That's why I added the correction factor.

EDIT:
Also, rootSize is read from the html-tag as far as i can see. It would be more correct to make the unit variable though; maybe extract it from rootSize and only apply the corrections if the current minWidth & range are in (r)ems?

[madeleineostoja]

The use case of smaller rems is covered by this test https://github.com/seaneking/postcss-responsive-type/blob/master/test/test.js#L47, which works as expected in real usage (ie: is 1.6rem/4.8rem outside the breakpoints, moves from 1.6rem -> 4.8rem between the range).

It sounds like it's an issue with using em mqs (since they're always 16px base) + smaller rem sizing. If that's the case then this isn't the solution - for example, it breaks that test above quite severely.

I'm not sure how you'd solve the use-case of using em media queries with non-16px rem units. You'd probably have to check the value of html then convert the em units to rem for sizing, but I'm not sure if that would work.

[quintenvk]

The rems are smaller because of the smaller value on the HTML tag, but this isn't a good fix indeed. I'll check further on what to do.