Repository: microsoft/griffel (ts)

Issue:
bug(core): missing vendor prefix (webkit) for background-clip: text
Webkit-based browsers may still need vendor prefix for `background-clip: text` to work properly.

#379 marked the prefix is good to be removed. However, both [caniuse](https://caniuse.com/background-clip-text) and [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#browser_compatibility) show that the style still needs a vendor prefix for webkit. The style is broken since `@griffel/core` 1.13.0 (including the latest version).

`@griffel/core` 1.14.3:
![image](https://github.com/microsoft/griffel/assets/5110161/d9014036-7eb9-406a-957e-80f5df5fc525)


`@griffel/core` 1.12.2:
![image](https://github.com/microsoft/griffel/assets/5110161/65e6421c-aea4-4acf-9302-af5ccad2a412)

Repro link:
codesandbox: https://codesandbox.io/s/unruffled-edison-8lv8rz

You can switch the dependency version in the left pane. You may want to refresh the preview after changing the version :)

Pull request:
fix(core): restore prefixing for "background-clip: text"
Fixes #457.

The PR restores prefixing for `background-clip: text` case.

Patch:
diff --git a/change/@griffel-core-05e2f791-537a-45f8-82e7-5145a7745834.json b/change/@griffel-core-05e2f791-537a-45f8-82e7-5145a7745834.json
new file mode 100644
index 0000000..c4249ea
--- /dev/null
+++ b/change/@griffel-core-05e2f791-537a-45f8-82e7-5145a7745834.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: restore prefixing for \"background-clip: text\"",
+  "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 2846ca3..2413c1b 100644
--- a/packages/core/src/runtime/stylis/prefixerPlugin.ts
+++ b/packages/core/src/runtime/stylis/prefixerPlugin.ts
@@ -26,7 +26,7 @@ export function prefix(value: string, length: number, children?: Element[]): str
     case 3191:
     case 6645:
     case 3005:
-    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite
     case 6391:
     case 5879:
     case 5623:
@@ -34,6 +34,13 @@ export function prefix(value: string, length: number, children?: Element[]): str
     case 4599:
     case 4855:
       return WEBKIT + value + value;
+    // background-clip: text
+    case 4215:
+      switch (charat(value, length + 1)) {
+        case 116:
+          return WEBKIT + value + value;
+      }
+      break;
     // tab-size
     case 4789:
       return MOZ + value + value;
diff --git a/yarn.lock b/yarn.lock
index d5634ea..6fa0313 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9143,10 +9143,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bn.js@npm:^5.0.0, bn.js@npm:^5.1.1":
-  version: 5.2.0
-  resolution: "bn.js@npm:5.2.0"
-  checksum: 6117170393200f68b35a061ecbf55d01dd989302e7b3c798a3012354fa638d124f0b2f79e63f77be5556be80322a09c40339eda6413ba7468524c0b6d4b4cb7a
+"bn.js@npm:^5.0.0, bn.js@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "bn.js@npm:5.2.1"
+  checksum: 3dd8c8d38055fedfa95c1d5fc3c99f8dd547b36287b37768db0abab3c239711f88ff58d18d155dd8ad902b0b0cee973747b7ae20ea12a09473272b0201c9edd3
   languageName: node
   linkType: hard
 
@@ -9343,7 +9343,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserify-rsa@npm:^4.0.0, browserify-rsa@npm:^4.0.1":
+"browserify-rsa@npm:^4.0.0, browserify-rsa@npm:^4.1.0":
   version: 4.1.0
   resolution: "browserify-rsa@npm:4.1.0"
   dependencies:
@@ -9354,19 +9354,19 @@ __metadata:
   linkType: hard
 
 "browserify-sign@npm:^4.0.0":
-  version: 4.2.1
-  resolution: "browserify-sign@npm:4.2.1"
+  version: 4.2.2
+  resolution: "browserify-sign@npm:4.2.2"
   dependencies:
-    bn.js: ^5.1.1
-    browserify-rsa: ^4.0.1
+    bn.js: ^5.2.1
+    browserify-rsa: ^4.1.0
     create-hash: ^1.2.0
     create-hmac: ^1.1.7
-    elliptic: ^6.5.3
+    elliptic: ^6.5.4
     inherits: ^2.0.4
-    parse-asn1: ^5.1.5
-    readable-stream: ^3.6.0
-    safe-buffer: ^5.2.0
-  checksum: 0221f190e3f5b2d40183fa51621be7e838d9caa329fe1ba773406b7637855f37b30f5d83e52ff8f244ed12ffe6278dd9983638609ed88c841ce547e603855707
+    parse-asn1: ^5.1.6
+    readable-stream: ^3.6.2
+    safe-buffer: ^5.2.1
+  checksum: b622730c0fc183328c3a1c9fdaaaa5118821ed6822b266fa6b0375db7e20061ebec87301d61931d79b9da9a96ada1cab317fce3c68f233e5e93ed02dbb35544c
   languageName: node
   linkType: hard
 
@@ -12263,7 +12263,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"elliptic@npm:^6.5.3":
+"elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
   dependencies:
@@ -20479,7 +20479,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-asn1@npm:^5.0.0, parse-asn1@npm:^5.1.5":
+"parse-asn1@npm:^5.0.0, parse-asn1@npm:^5.1.6":
   version: 5.1.6
   resolution: "parse-asn1@npm:5.1.6"
   dependencies:
@@ -22546,14 +22546,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^3.0.6, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "readable-stream@npm:3.6.0"
+"readable-stream@npm:^3.0.6, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0, readable-stream@npm:^3.6.2":
+  version: 3.6.2
+  resolution: "readable-stream@npm:3.6.2"
   dependencies:
     inherits: ^2.0.3
     string_decoder: ^1.1.1
     util-deprecate: ^1.0.1
-  checksum: d4ea81502d3799439bb955a3a5d1d808592cf3133350ed352aeaa499647858b27b1c4013984900238b0873ec8d0d8defce72469fb7a83e61d53f5ad61cb80dc8
+  checksum: bdcbe6c22e846b6af075e32cf8f4751c2576238c5043169a1c221c92ee2878458a816a4ea33f4c67623c0b6827c8a400409bfb3cf0bf3381392d0b1dfb52ac8d
   languageName: node
   linkType: hard
 
@@ -23365,7 +23365,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:^5.2.1, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: b99c4b41fdd67a6aaf280fcd05e9ffb0813654894223afb78a31f14a19ad220bba8aba1cb14eddce1fcfb037155fe6de4e861784eb434f7d11ed58d1e70dd491


Test patch:
diff --git a/packages/core/src/runtime/__snapshots__/compileAtomicCSSRule.test.ts.snap b/packages/core/src/runtime/__snapshots__/compileAtomicCSSRule.test.ts.snap
index fe65f7f..7b30519 100644
--- a/packages/core/src/runtime/__snapshots__/compileAtomicCSSRule.test.ts.snap
+++ b/packages/core/src/runtime/__snapshots__/compileAtomicCSSRule.test.ts.snap
@@ -72,9 +72,9 @@ Array [
 ]
 `;
 
-exports[`compileAtomicCSSRule does not prefix background-clip:text 1`] = `
+exports[`compileAtomicCSSRule does not prefix background-clip:content-box 1`] = `
 Array [
-  ".foo{background-clip:text;}",
+  ".foo{background-clip:content-box;}",
 ]
 `;
 
diff --git a/packages/core/src/runtime/compileAtomicCSSRule.test.ts b/packages/core/src/runtime/compileAtomicCSSRule.test.ts
index a98b54d..5109758 100644
--- a/packages/core/src/runtime/compileAtomicCSSRule.test.ts
+++ b/packages/core/src/runtime/compileAtomicCSSRule.test.ts
@@ -39,7 +39,7 @@ describe('compileAtomicCSSRule', () => {
     ['clip-path', 'circle(40%)'],
     ['width', 'fit-content'],
     ['width', 'min-block-size'],
-    ['background-clip', 'text'],
+    ['background-clip', 'content-box'],
     ['animation', '3s linear 1s slidein;'],
     ['animation-delay', '3s'],
     ['animation-direction', 'normal'],
diff --git a/packages/core/src/runtime/stylis/prefixerPlugin.test.ts b/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
index 0819666..7a7a9ba 100644
--- a/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
+++ b/packages/core/src/runtime/stylis/prefixerPlugin.test.ts
@@ -20,6 +20,17 @@ describe('prefix', () => {
       );
     });
 
+    test('background-clip', () => {
+      expect(prefix(`background-clip:border-box;`, 15)).toMatchInlineSnapshot(`"background-clip:border-box;"`);
+      expect(prefix(`background-clip:padding-box;`, 15)).toMatchInlineSnapshot(`"background-clip:padding-box;"`);
+      expect(prefix(`background-clip:content-box;`, 15)).toMatchInlineSnapshot(`"background-clip:content-box;"`);
+
+      // Prefixes only "text" value
+      expect(prefix(`background-clip:text;`, 15)).toMatchInlineSnapshot(
+        `"-webkit-background-clip:text;background-clip:text;"`,
+      );
+    });
+
     test('text', () => {
       expect(prefix(`text-align:left;`, 10)).toEqual([`text-align:left;`].join(''));
       expect(prefix(`text-transform:none;`, 14)).toEqual([`text-transform:none;`].join(''));
@@ -261,10 +272,6 @@ describe('prefix', () => {
       expect(prefix(`max-height:min(150px, 200px);`, 10)).toMatchInlineSnapshot(`"max-height:min(150px, 200px);"`);
     });
 
-    test('background-clip', () => {
-      expect(prefix(`background-clip:text;`, 15)).toMatchInlineSnapshot(`"background-clip:text;"`);
-    });
-
     test('animation', () => {
       expect(prefix(`animation:inherit;`, 9)).toMatchInlineSnapshot(`"animation:inherit;"`);
       expect(prefix(`animation-duration:0.6s;`, 18)).toMatchInlineSnapshot(`"animation-duration:0.6s;"`);