feat: add dppx when the browser does not support the x unit in resolution media queries
#1468
Conversation
…solution media queries
yisibl
force-pushed
the
add-dppx-fallback
branch
from
739d9c1
to
480df38
Compare
| @@ -5,7 +5,7 @@ | |||
|
|
|||
| @media (min-resolution: 144dpi) { } | |||
|
|
|||
| @media (min-resolution: 2x) { } | |||
| @media (min-resolution: 2dppx), (min-resolution: 2x) { } | |||
There was a problem hiding this comment.
Can you also add @media (min-resolution: 2x) {} use case?
There was a problem hiding this comment.
I tried to add it, but it fails in the removes unnecessary prefixes test.
I don't know how to handle it better?
There was a problem hiding this comment.
Can you add test, so I will see an error on CI?
There was a problem hiding this comment.
There was a problem hiding this comment.
Hm. Do we need to add 2dppx? Seems like all browsers which need 2dppx also works with prefixed values.
There was a problem hiding this comment.
So output dppx units at the same time as this PR to prevent browsers from not supporting it.
There was a problem hiding this comment.
Seems like these problems are coming because we are mixing prefixes and polyfills here. As a prefixer, Autoprefixer should remove all code which it added.
* What do you think of adding 2x support to postcss-present-env instead?
- Another option is to add
2xsupport to Autoprefixer but do not insert2dppx. Instead, we can ask users to add polyfill manually (or print a warning after checkingresult.processor.plugins).
There was a problem hiding this comment.
Well, I think it's okay to print a warning.
There was a problem hiding this comment.
We can use this logic:
If:
- There is
2xsyntax - And no
2dppi - And there is specific Chrome versions (we can hardcore versions until Can I Use will merge PR)
We will ask to add postcss-preset-env and put it before Autoprefixer
But we may need to create an issue or a plugin for postcss-preset-env (you can create this plugin as you did for minmax and ask them to add it to preset).
There was a problem hiding this comment.
This would be easy to implement with our new media query parser : https://www.npmjs.com/package/@csstools/media-query-list-parser
Happy to create a plugin for this if work hasn't started yet @yisibl?
|
I have added a PR of |
css-values-4 adds
xas an alias fordppxunit, but not every browser in media queries supportsxunit. So I think it would be better to add a fallback forxunit.xunit support in:Chrome 68+, Edge 79+, Opera 55+, Safari 16+, Firefox 62+See also:
xunit as an alias fordppxFyrd/caniuse#6381