Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

yisibl
Copy link
Member

@yisibl yisibl commented Jul 16, 2022

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:

image

@@ -5,7 +5,7 @@

@media (min-resolution: 144dpi) { }

@media (min-resolution: 2x) { }
@media (min-resolution: 2dppx), (min-resolution: 2x) { }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

I don't know how to handle it better?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member Author

yisibl commented Jul 17, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants