fix: backdrop filter use correct CSS propeprty

tw-in-js · May 11, 2021 · 34a5d1e · 34a5d1e
1 parent 0e1bdc9
commit 34a5d1e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/__tests__/api.json b/src/__tests__/api.json
@@ -1046,8 +1046,8 @@
   "saturate-200": ".saturate-200{--tw-saturate:saturate(2)}",
   "sepia-0": ".sepia-0{--tw-sepia:sepia(0)}",
   "sepia": ".sepia{--tw-sepia:sepia(100%)}",
-  "backdrop-filter": ".backdrop-filter{filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);--tw-backdrop-blur:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-invert:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-opacity:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-sepia:var(--tw-empty,/*!*/ /*!*/)}",
-  "backdrop-filter-none": ".backdrop-filter-none{filter:none}",
+  "backdrop-filter": ".backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);--tw-backdrop-blur:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-invert:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-opacity:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-backdrop-sepia:var(--tw-empty,/*!*/ /*!*/)}",
+  "backdrop-filter-none": ".backdrop-filter-none{backdrop-filter:none}",
   "backdrop-blur-0": ".backdrop-blur-0{--tw-backdrop-blur:blur(0)}",
   "backdrop-blur-sm": ".backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}",
   "backdrop-blur": ".backdrop-blur{--tw-backdrop-blur:blur(8px)}",

diff --git a/src/twind/plugins.ts b/src/twind/plugins.ts
@@ -290,14 +290,14 @@ const filter: Plugin = (params, { theme }, id) => {
     ].filter(Boolean)
 
     return params[1] == 'none'
-      ? { filter: 'none' }
+      ? { [prefix + 'filter']: 'none' }
       : filters.reduce(
           (css, key) => {
             css['--tw-' + prefix + key] = 'var(--tw-empty,/*!*/ /*!*/)'
             return css
           },
           {
-            filter: filters.map((key) => `var(--tw-${prefix}${key})`).join(' '),
+            [prefix + 'filter']: filters.map((key) => `var(--tw-${prefix}${key})`).join(' '),
           } as CSSRules,
         )
   }