Skip to content

Commit

Permalink
feat: add dppx when the browser does not support the x unit in re…
Browse files Browse the repository at this point in the history
…solution media queries
  • Loading branch information
yisibl committed Jul 16, 2022
1 parent 616c442 commit 480df38
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 7 deletions.
27 changes: 22 additions & 5 deletions lib/resolution.js
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
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
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
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
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) { }

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

Expand Down
2 changes: 1 addition & 1 deletion test/cases/resolution.out.css
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

0 comments on commit 480df38

Please sign in to comment.