feat: ::backdrop using @mdn/browser-compat-data (#1498)

Before that, we added the `-wekbit-` prefix to Safari, which is not really needed.

Author: yisibl

data/prefixes.js

@@ -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'
@@ -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
   })
 )

test/autoprefixer.test.js

@@ -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']
 })
@@ -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' ||
@@ -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')
 })

test/cases/backdrop.css

@@ -0,0 +1,3 @@
+::backdrop {
+  color: green;
+}

test/cases/backdrop.out.css

@@ -0,0 +1,6 @@
+::-ms-backdrop {
+  color: green;
+}
+::backdrop {
+  color: green;
+}