feat: add dppx when the browser does not support the x unit in resolution media queries

[yisibl]

css-values-4 adds x as an alias for dppx unit, but not every browser in media queries supports x unit. So I think it would be better to add a fallback for x unit.

x unit support in: Chrome 68+, Edge 79+, Opera 55+, Safari 16+, Firefox 62+

See also:

• https://chromestatus.com/feature/5150549246738432
• https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#browser_compatibility
• Caniuse PR: feat: resolution media queries add the x unit as an alias for dppx Fyrd/caniuse#6381

[ai]

Can you also add @media (min-resolution: 2x) {} use case?

[yisibl]

I tried to add it, but it fails in the removes unnecessary prefixes test.

I don't know how to handle it better?

[ai]

Can you add test, so I will see an error on CI?

[yisibl]

Yeah, https://github.com/postcss/autoprefixer/runs/7377361678?check_suite_focus=true

[ai]

Hm. Do we need to add 2dppx? Seems like all browsers which need 2dppx also works with prefixed values.

[yisibl]

So output dppx units at the same time as this PR to prevent browsers from not supporting it.

[ai]

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 2x support to Autoprefixer but do not insert 2dppx. Instead, we can ask users to add polyfill manually (or print a warning after checking result.processor.plugins).

[yisibl]

Well, I think it's okay to print a warning.

[ai]

We can use this logic:

If:

1. There is 2x syntax
2. And no 2dppi
3. 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).

[romainmenke]

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?

[yisibl]

I have added a PR of x unit for caniuse as well. Fyrd/caniuse#6381

[Danyalkasiri]