fix(@stylexjs/eslint-plugin): Remove false positive in valid-styles w…

…hen import contains extension (#840) Check all valid code extensions when verifying vars file
facebook · Jan 6, 2025 · 184a3d4 · 184a3d4
1 parent d21f534
commit 184a3d4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js b/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js
@@ -508,7 +508,7 @@ eslintTester.run('stylex-valid-styles', rule.default, {
     })`,
     // test for stylex create vars tokens
     `
-    import stylex from'stylex';
+    import stylex from 'stylex';
     import {TextTypeTokens as TextType, ColorTokens} from 'DspSharedTextTokens.stylex';
     stylex.create({
       root: {
@@ -521,7 +521,7 @@ eslintTester.run('stylex-valid-styles', rule.default, {
     `,
     // test using vars as keys
     `
-    import stylex from'stylex';
+    import stylex from 'stylex';
     import { componentVars } from './bug.stylex';
     stylex.create({
       host: {
@@ -539,6 +539,28 @@ eslintTester.run('stylex-valid-styles', rule.default, {
       })
     })
     `,
+    // test importing vars from paths including code file extension
+    `
+    import stylex from 'stylex';
+    import { vars } from './vars.stylex';
+    import { varsJs } from './vars.stylex.js';
+    import { varsTs } from './vars.stylex.ts';
+    import { varsTsx } from './vars.stylex.tsx';
+    import { varsJsx } from './vars.stylex.jsx';
+    import { varsMjs } from './vars.stylex.mjs';
+    import { varsCjs } from './vars.stylex.cjs';
+    stylex.create({
+      root: {
+        [vars.color]: 'blue',
+        [varsJs.color]: 'blue',
+        [varsTs.color]: 'blue',
+        [varsTsx.color]: 'blue',
+        [varsJsx.color]: 'blue',
+        [varsMjs.color]: 'blue',
+        [varsCjs.color]: 'blue',
+      },
+    })
+    `,
   ],
   invalid: [
     {

diff --git a/packages/eslint-plugin/src/stylex-valid-styles.js b/packages/eslint-plugin/src/stylex-valid-styles.js
@@ -2395,7 +2395,13 @@ const stylexValidStyles = {
       propLimits = {},
     }: Schema = context.options[0] || {};
 
-    const stylexDefineVarsFileExtension = '.stylex';
+    function isValidStylexDefineVarsFileExtension(filename: string) {
+      const stylexExtension = '.stylex';
+      const extensions = ['.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs'];
+      return ['', ...extensions].some((ext) =>
+        filename.endsWith(`${stylexExtension}${ext}`),
+      );
+    }
     const stylexDefineVarsTokenImports = new Set<string>();
     const styleXDefaultImports = new Set<string>();
     const styleXCreateImports = new Set<string>();
@@ -2866,9 +2872,8 @@ const stylexValidStyles = {
         }
         const sourceValue = node.source.value;
         const isStylexImport = importsToLookFor.includes(sourceValue);
-        const isStylexDefineVarsImport = sourceValue.endsWith(
-          stylexDefineVarsFileExtension,
-        );
+        const isStylexDefineVarsImport =
+          isValidStylexDefineVarsFileExtension(sourceValue);
         if (!(isStylexImport || isStylexDefineVarsImport)) {
           return;
         }