Skip to content

Commit

Permalink
feat: ::backdrop using @mdn/browser-compat-data (#1498)
Browse files Browse the repository at this point in the history
Before that, we added the `-wekbit-` prefix to Safari, which is not really needed.
  • Loading branch information
yisibl authored Aug 13, 2023
1 parent 66d23f6 commit f8d8dab
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 4 deletions.
12 changes: 8 additions & 4 deletions data/prefixes.js
Original file line number Diff line number Diff line change
Expand Up @@ -256,9 +256,9 @@ f(prefixFilterFunction, browsers =>
)

// Backdrop-filter
let prefixBackdrop = require('caniuse-lite/data/features/css-backdrop-filter')
let prefixBackdropFilter = require('caniuse-lite/data/features/css-backdrop-filter')

f(prefixBackdrop, { match: /y\sx|y\s#2/ }, browsers =>
f(prefixBackdropFilter, { match: /y\sx|y\s#2/ }, browsers =>
prefix(['backdrop-filter'], {
browsers,
feature: 'css-backdrop-filter'
Expand Down Expand Up @@ -513,10 +513,14 @@ f(prefixFullscreen, browsers =>
})
)

f(prefixFullscreen, { match: /x(\s#2|$)/ }, browsers =>
// ::backdrop pseudo-element
// https://caniuse.com/mdn-css_selectors_backdrop
let prefixBackdrop = require('caniuse-lite/data/features/mdn-css-backdrop-pseudo-element')

f(prefixBackdrop, browsers =>
prefix(['::backdrop'], {
browsers,
feature: 'fullscreen',
feature: 'backdrop',
selector: true
})
)
Expand Down
9 changes: 9 additions & 0 deletions test/autoprefixer.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ let selectorer = autoprefixer({
let fileSelectorButtoner = autoprefixer({
overrideBrowserslist: ['Chrome > 25', 'Firefox >= 82']
})
let backdroper = autoprefixer({
overrideBrowserslist: ['IE >= 11', 'Chrome < 32', 'Safari >= 15.4']
})
let placeholderShowner = autoprefixer({
overrideBrowserslist: ['IE >= 10']
})
Expand Down Expand Up @@ -146,6 +149,8 @@ function prefixer(name) {
return selectorer
} else if (name === 'selectors' || name === 'file-selector-button') {
return fileSelectorButtoner
} else if (name === 'selectors' || name === 'backdrop') {
return backdroper
} else if (
name === 'selectors' ||
name === 'autofill' ||
Expand Down Expand Up @@ -760,6 +765,10 @@ test('supports file-selector-button', () => {
check('file-selector-button')
})

test('supports ::backdrop', () => {
check('backdrop')
})

test('supports custom prefixes', () => {
check('custom-prefix')
})
Expand Down
3 changes: 3 additions & 0 deletions test/cases/backdrop.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
::backdrop {
color: green;
}
6 changes: 6 additions & 0 deletions test/cases/backdrop.out.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
::-ms-backdrop {
color: green;
}
::backdrop {
color: green;
}

0 comments on commit f8d8dab

Please sign in to comment.