fix: Add missing CSS pseudo classes to types and ESLint

facebook · Sep 24, 2024 · 3ddf402 · 3ddf402
1 parent 2b77aad
commit 3ddf402
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js b/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js
@@ -156,7 +156,7 @@ eslintTester.run('stylex-valid-styles', rule.default, {
           '100%': {
             opacity: 1,
           },
-        }); 
+        });
         const styles = create({
           main: {
             animationName: fadeIn,
@@ -174,7 +174,7 @@ eslintTester.run('stylex-valid-styles', rule.default, {
           '100%': {
             opacity: 1,
           },
-        }); 
+        });
         const styles = create({
           main: {
             animationName: fadeIn,
@@ -254,6 +254,28 @@ eslintTester.run('stylex-valid-styles', rule.default, {
          },
        },
      })`,
+    // test for input ranges
+    `import stylex from "stylex";
+     stylex.create({
+       default: {
+         'WebkitAppearance': 'textfield',
+         '::-webkit-slider-thumb': {
+           appearance: 'none',
+         },
+         '::-webkit-slider-runnable-track': {
+           appearance: 'none',
+         },
+         '::-moz-range-thumb': {
+           appearance: 'none',
+         },
+         '::-moz-range-track': {
+           appearance: 'none',
+         },
+         '::-moz-range-progress': {
+           appearance: 'none',
+         },
+       },
+     })`,
     // test for color
     `import stylex from "stylex";
      stylex.create({

diff --git a/packages/eslint-plugin/src/stylex-valid-styles.js b/packages/eslint-plugin/src/stylex-valid-styles.js
@@ -2245,6 +2245,13 @@ const pseudoElements = makeUnionRule(
   makeLiteralRule('::-webkit-scrollbar-track-piece'),
   makeLiteralRule('::-webkit-scrollbar-corner'),
   makeLiteralRule('::-webkit-resizer'),
+  // For input ranges in Chromium
+  makeLiteralRule('::-webkit-slider-thumb'),
+  makeLiteralRule('::-webkit-slider-runnable-track'),
+  // For input ranges in Firefox
+  makeLiteralRule('::-moz-range-thumb'),
+  makeLiteralRule('::-moz-range-track'),
+  makeLiteralRule('::-moz-range-progress'),
 );
 
 const pseudoClassesAndAtRules = makeUnionRule(

diff --git a/packages/stylex/src/StyleXTypes.d.ts b/packages/stylex/src/StyleXTypes.d.ts
@@ -67,6 +67,13 @@ type CSSPropertiesWithExtras = Partial<
       '::-webkit-search-cancel-button'?: CSSProperties;
       '::-webkit-search-results-button'?: CSSProperties;
       '::-webkit-search-results-decoration'?: CSSProperties;
+      // For input ranges in Chromium
+      '::-webkit-slider-thumb'?: CSSProperties;
+      '::-webkit-slider-runnable-track'?: CSSProperties;
+      // For input ranges in Firefox
+      '::-moz-range-thumb'?: CSSProperties;
+      '::-moz-range-track'?: CSSProperties;
+      '::-moz-range-progress'?: CSSProperties;
     }
   >
 >;