feat: backdropBrightness plugin

Author: cossssmin

src/filters.js

@@ -12,6 +12,7 @@ module.exports = {
     saturate: false,
     sepia: false,
     backdropBlur: false,
+    backdropBrightness: false,
   },
   blur: plugin(function({ matchUtilities, theme }) {
     matchUtilities(
@@ -115,4 +116,14 @@ module.exports = {
       { values: theme('backdropBlur') }
     )
   }),
+  backdropBrightness: plugin(function({ matchUtilities, theme }) {
+    matchUtilities(
+      {
+        'backdrop-brightness': (value) => ({
+          backdropFilter: `brightness(${value})`
+        }),
+      },
+      { values: theme('backdropBrightness') }
+    )
+  }),
 }

src/index.test.js

@@ -326,4 +326,28 @@ describe('Filters', () => {
       `)
     })
   })
+
+  test('backdropBrightness', () => {
+    const config = {
+      content: [
+        {
+          raw: String.raw`
+            <hr class="backdrop-brightness-50">
+            <hr class="backdrop-brightness-[1.75]">
+          `
+        }
+      ],
+    }
+
+    return run(config).then(result => {
+      expect(result.css).toMatchCss(String.raw`
+        .backdrop-brightness-50 {
+          backdrop-filter: brightness(.5)
+        }
+        .backdrop-brightness-\[1\.75\] {
+          backdrop-filter: brightness(1.75)
+        }
+      `)
+    })
+  })
 })