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.

Sign up for GitHub

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
Draft

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
480df38
feat: add `dppx` when the browser does not support the `x` unit in re…
yisibl Jul 16, 2022
21a6925
add more test case
yisibl Jul 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions lib/resolution.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ let Prefixer = require('./prefixer')
let utils = require('./utils')

const REGEXP = /(min|max)-resolution\s*:\s*\d*\.?\d+(dppx|dpcm|dpi|x)/gi
const SPLIT = /(min|max)-resolution(\s*:\s*)(\d*\.?\d+)(dppx|dpcm|dpi|x)/i
const SPLIT = /((min|max)-resolution)(\s*:\s*)(\d*\.?\d+)(dppx|dpcm|dpi|x)/i

class Resolution extends Prefixer {
/**
Expand Down Expand Up @@ -73,19 +73,36 @@ class Resolution extends Prefixer {
continue
}

let fallbackExpression
let addFallbackExpression = false
for (let prefix of prefixes) {
let processed = query.replace(REGEXP, str => {
let parts = str.match(SPLIT)
let fallbackName = parts[1]
let colon = parts[3]
let value = parts[4]
let units = parts[5]

// Add `ddpx` for browsers that do not support `x` unit.
// `x` unit: Chrome 68+, Edge 79+, Opera 55+, Safari 16+, Firefox 62+
// See: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#browser_compatibility
if (units === 'x') {
fallbackExpression = '(' + fallbackName + colon + value + 'dppx' + ')'
addFallbackExpression = true
}

return this.prefixQuery(
prefix,
parts[1],
parts[2],
parts[3],
parts[4]
parts[2], // min- or max-
colon,
value,
units
)
})
prefixed.push(processed)
}

if (addFallbackExpression) prefixed.push(fallbackExpression)
prefixed.push(query)
}

Expand Down
6 changes: 6 additions & 0 deletions test/autoprefixer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@ const COMMONS = [
'supports',
'viewport',
'resolution',
'resolution-dppx-fallback',
'logical',
'appearance',
'advanced-filter',
Expand Down Expand Up @@ -505,6 +506,11 @@ test('removes unnecessary prefixes', () => {
if (i === 'grid-template-areas') continue
let input = read(i + '.out')
let output = read(i)

if (i === 'resolution-dppx-fallback') {
output = '@media (min-resolution: 2dppx), (min-resolution: 2x) { }\n'
}

equal(processor.process(input).css, output)
}
})
Expand Down
1 change: 1 addition & 0 deletions test/cases/resolution-dppx-fallback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@media (min-resolution: 2x) { }
1 change: 1 addition & 0 deletions test/cases/resolution-dppx-fallback.out.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 2x) { }
2 changes: 1 addition & 1 deletion test/cases/resolution.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

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

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?


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

Expand Down
2 changes: 1 addition & 1 deletion test/cases/resolution.out.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 144dpi) { }

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2x) { }
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 2x) { }

@media (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 120dpi) { }

Expand Down