From 184a3d48da165bededecf99828c1d66b65faa186 Mon Sep 17 00:00:00 2001
From: Jonathan Beaumont <beaumont.a.jonathan@gmail.com>
Date: Mon, 6 Jan 2025 07:38:01 +0000
Subject: [PATCH] fix(@stylexjs/eslint-plugin): Remove false positive in
 valid-styles when import contains extension (#840)

Check all valid code extensions when verifying vars file
---
 .../__tests__/stylex-valid-styles-test.js     | 26 +++++++++++++++++--
 .../eslint-plugin/src/stylex-valid-styles.js  | 13 +++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js b/packages/eslint-plugin/__tests__/stylex-valid-styles-test.js
index 78ef1011..299ea2e2 100644
--- 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
index 584a5ddb..aa6b8a97 100644
--- 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;
         }