Repository: microsoft/griffel (ts)

Issue:
feature: add prefixing for backdrop-filter
`backdrop-filter` is supported in Safari only with a `-webkit` prefix (https://caniuse.com/?search=backdrop-filter), we need to add prefixing for it.

Pull request:
feat(core): add prefixing for "backdrop-filter"
Fixes #460.

Patch:
diff --git a/change/@griffel-core-37cc7380-d4cc-4151-8ad7-c78576d587f7.json b/change/@griffel-core-37cc7380-d4cc-4151-8ad7-c78576d587f7.json
new file mode 100644
index 0000000..9022421
--- /dev/null
+++ b/change/@griffel-core-37cc7380-d4cc-4151-8ad7-c78576d587f7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove prefixing for \"ms-\"",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@griffel-core-d6920882-00d0-4a0d-abc4-b1fa96fa2195.json b/change/@griffel-core-d6920882-00d0-4a0d-abc4-b1fa96fa2195.json
new file mode 100644
index 0000000..646395d
--- /dev/null
+++ b/change/@griffel-core-d6920882-00d0-4a0d-abc4-b1fa96fa2195.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add prefixing for \"backdrop-filter\"",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/core/src/runtime/stylis/prefixerPlugin.ts b/packages/core/src/runtime/stylis/prefixerPlugin.ts
index 2413c1b..9bb14a5 100644
--- a/packages/core/src/runtime/stylis/prefixerPlugin.ts
+++ b/packages/core/src/runtime/stylis/prefixerPlugin.ts
@@ -6,7 +6,6 @@ import {
   indexof,
   replace,
   match,
-  MS,
   MOZ,
   WEBKIT,
   copy,
@@ -22,7 +21,7 @@ export function prefix(value: string, length: number, children?: Element[]): str
     // color-adjust
     case 5103:
       return WEBKIT + 'print-' + value + value;
-    //   backface-visibility, column, box-decoration-break
+    // backface-visibility, column, box-decoration-break
     case 3191:
     case 6645:
     case 3005:
@@ -34,11 +33,17 @@ export function prefix(value: string, length: number, children?: Element[]): str
     case 4599:
     case 4855:
       return WEBKIT + value + value;
-    // background-clip: text
+    // backdrop-filter, background-clip: text
     case 4215:
-      switch (charat(value, length + 1)) {
-        case 116:
-          return WEBKIT + value + value;
+      // Additional check on "backdrop-(f)ilter" to prevent conflict with "background-clip"
+      // https://github.com/thysultan/stylis/issues/292
+      if (charat(value, 9) === 102) {
+        return WEBKIT + value + value;
+      }
+
+      // background-clip: text
+      if (charat(value, length + 1) === 116) {
+        return WEBKIT + value + value;
       }
       break;
     // tab-size
@@ -48,7 +53,7 @@ export function prefix(value: string, length: number, children?: Element[]): str
     case 5349:
     case 4246:
     case 6968:
-      return WEBKIT + value + MOZ + value + MS + value + value;
+      return WEBKIT + value + MOZ + value + value;
     // cursor
     // @ts-expect-error fall through is intentional here
     case 6187:
@@ -153,9 +158,6 @@ export function prefixerPlugin(
                       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                       // @ts-ignore
                       copy(element, { props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')] }),
-                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                      // @ts-ignore
-                      copy(element, { props: [replace(value, /:(plac\w+)/, MS + 'input-$1')] }),
                     ],
                     callback,
                   );


Test patch:
diff --git a/packages/core/src/runtime/stylis/prefixerPlugin.test.ts b/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
index 7a7a9ba..3009abf 100644
--- a/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
+++ b/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
@@ -31,6 +31,15 @@ describe('prefix', () => {
       );
     });
 
+    test('backdrop-filter', () => {
+      expect(prefix(`backdrop-filter:blur(10px);`, 15)).toMatchInlineSnapshot(
+        `"-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);"`,
+      );
+      expect(prefix(`backdrop-filter:invert(80%);`, 15)).toMatchInlineSnapshot(
+        `"-webkit-backdrop-filter:invert(80%);backdrop-filter:invert(80%);"`,
+      );
+    });
+
     test('text', () => {
       expect(prefix(`text-align:left;`, 10)).toEqual([`text-align:left;`].join(''));
       expect(prefix(`text-transform:none;`, 14)).toEqual([`text-transform:none;`].join(''));
@@ -139,13 +148,13 @@ describe('prefix', () => {
 
     test('user-select', () => {
       expect(prefix(`user-select:none;`, 11)).toEqual(
-        [`-webkit-user-select:none;`, `-moz-user-select:none;`, `-ms-user-select:none;`, `user-select:none;`].join(''),
+        [`-webkit-user-select:none;`, `-moz-user-select:none;`, `user-select:none;`].join(''),
       );
     });
 
     test('appearance', () => {
       expect(prefix(`appearance:none;`, 10)).toEqual(
-        [`-webkit-appearance:none;`, `-moz-appearance:none;`, `-ms-appearance:none;`, `appearance:none;`].join(''),
+        [`-webkit-appearance:none;`, `-moz-appearance:none;`, `appearance:none;`].join(''),
       );
     });