Chore: Allow additional -webkit- properties (#28)

facebook · Dec 5, 2023 · cf47293 · cf47293
1 parent bc2fc69
commit cf47293
Show file tree

Hide file tree

Showing 4 changed files with 599 additions and 577 deletions.
diff --git a/apps/docs/components/StylexAnimatedLogo.js b/apps/docs/components/StylexAnimatedLogo.js
@@ -70,12 +70,10 @@ const styles = stylex.create({
   },
   mask1: {
     maskImage: 'linear-gradient(125deg, white 30%, transparent 65%)',
-    // eslint-disable-next-line @stylexjs/valid-styles
     WebkitMaskImage: 'linear-gradient(125deg, white 30%, transparent 65%)',
   },
   mask2: {
     maskImage: 'linear-gradient(80deg, white 30%, transparent 65%)',
-    // eslint-disable-next-line @stylexjs/valid-styles
     WebkitMaskImage: 'linear-gradient(80deg, white 30%, transparent 65%)',
   },
   dotPath: {

diff --git a/apps/docs/src/pages/index.js b/apps/docs/src/pages/index.js
@@ -134,13 +134,9 @@ const styles = stylex.create({
     backgroundColor: '#d6249f',
     backgroundImage:
       'radial-gradient(circle at 30% 107%, #ddd477 0%, #ddd477 5%, #fd5949 45%,#d6249f 60%, #285AEB 90%)',
-    // eslint-disable-next-line @stylexjs/valid-styles
     WebkitBackgroundClip: 'text',
-    // eslint-disable-next-line @stylexjs/valid-styles
     WebkitTextFillColor: 'transparent',
-    // eslint-disable-next-line @stylexjs/valid-styles
     backgroundClip: 'text',
-    // eslint-disable-next-line @stylexjs/valid-styles
     textFillColor: 'transparent',
   },
   threads: {},

diff --git a/packages/eslint-plugin/src/stylex-valid-styles.js b/packages/eslint-plugin/src/stylex-valid-styles.js
@@ -504,7 +504,12 @@ const backfaceVisibility = makeUnionRule(
 // type background = string | finalBgLayer;
 const backgroundAttachment = attachment;
 const backgroundBlendMode = blendMode;
-const backgroundClip = box;
+const backgroundClip = makeUnionRule(
+  'border-box',
+  'padding-box',
+  'content-box',
+  'text',
+);
 const backgroundColor = color;
 const backgroundImage = makeUnionRule(makeLiteralRule('none'), isString);
 const backgroundOrigin = box;
@@ -1540,6 +1545,19 @@ const SupportedVendorSpecificCSSProperties = {
   WebkitAppearance: makeLiteralRule('textfield'),
   WebkitTapHighlightColor: color,
   WebkitOverflowScrolling: makeLiteralRule('touch'),
+
+  WebkitMaskImage: maskImage,
+
+  WebkitTextFillColor: color,
+  textFillColor: color,
+  WebkitTextStrokeWidth: borderWidth,
+  WebkitTextStrokeColor: color,
+  WebkitBackgroundClip: makeUnionRule(
+    'border-box',
+    'padding-box',
+    'content-box',
+    'text',
+  ),
 };
 
 /* eslint-disable object-shorthand */
@@ -1552,11 +1570,7 @@ const CSSProperties = {
   alignSelf: alignSelf,
   alignmentBaseline: alignmentBaseline,
   all: all,
-  animationComposition: makeUnionRule(
-    makeLiteralRule('replace'),
-    makeLiteralRule('add'),
-    makeLiteralRule('accumulate'),
-  ),
+  animationComposition: makeUnionRule('replace', 'add', 'accumulate'),
   animationDelay: animationDelay,
   animationDirection: animationDirection,
   animationDuration: animationDuration,