styles: Use range context queries to eliminate *_max variables.

On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2021-02-03 17:49:05 -08:00
committed by Tim Abbott
parent d679aa015d
commit 64b78ad992
27 changed files with 119 additions and 122 deletions

View File

@@ -53,6 +53,7 @@
"postcss-calc": "^8.0.0",
"postcss-extend-rule": "^3.0.0",
"postcss-loader": "^4.0.2",
"postcss-media-minmax": "https://github.com/andersk/postcss-media-minmax.git#01239f17f4a9872ace1dd133cee526a7de4ac9f5",
"postcss-nested": "^5.0.0",
"postcss-simple-vars": "^6.0.0",
"regenerator-runtime": "^0.13.3",