vars used in stylex.create generate error with eslint(@stylexjs/valid-styles)

[Mikescops]

Describe the issue

My project is in typescript and I use the @stylexjs/eslint-plugin package.

I'm defining variables as follow:

export const tokens = stylex.defineVars({
    // Background and Foreground
    background: "#ffffff",
    foreground: "#171717",

Whenever I use my created variable as below, eslint complains about the variable not being the expected type.

const styles = stylex.create({
    primary: {
        backgroundColor: tokens.background
    }
})

warning color value must be one of: a string literal ...

Expected behavior

eslint should not complain about the variable as it is meant to be written that way

Steps to reproduce

Create a project with the eslint plugin and create variables as described in the problem statement above.
When used in stylex.create eslint should display an error (or warning depending on your eslint settings).

Test case

// tokens.stylex.ts
 export const tokens = stylex.defineVars({
    background: "#ffffff"
    });

// App.tsx
const styles = stylex.create({
    primary: {
        backgroundColor: tokens.background
    }
});

Additional comments

No response

[nmn]

stylex.defineVars must be defined in it's own file and the file must be named with a .stylex.ts extension.

When you import the variables directly from that file, you should not see this error.

It is currently not legal to define variables with defineVars in the same file as where they are used.

[Mikescops]

@nmn I may have simplified how I use it for writing this issue, but initially I indeed defined them as you mentioned and I still have the error.

[Mikescops]

So I've figure out something interesting, I removed the "allowImportingTsExtensions": false in tsconfig.

And here is the behaviour:

without .js in the import

[nmn]

Interesting! Thanks for the bug report. Will fix this problem.