stylex: @stylexjs/eslint-plugin: 'Computed key cannot be resolved' when overwriting var

The problem

Computed key cannot be resolved.eslint(@stylexjs/valid-styles)

How to reproduce

// bug.stylex.ts

import * as stylex from '@stylexjs/stylex';

const vars = {
  color: 'red',
};

export const componentVars = stylex.defineVars(vars);

// bug.ts

import * as stylex from '@stylexjs/stylex';

import { componentVars } from './bug.stylex';

export const styles = stylex.create({
  host: {
    [componentVars.color]: 'blue',
//   ^^^^^^^^^^^^^^^^^^^
  },
});

About this issue

Original URL
State: open
Created 6 months ago
Reactions: 1
Comments: 15 (11 by maintainers)

Most upvoted comments

Just pulled the latest main branch to double-check this. I added @oliverpascal’s exact example to the tests, and it indeed passes. Here’s a screenshot showing the test passing.

QingqiShi on Mar 16, 2024

Correct!

olivierpascal on Mar 12, 2024

Sorry to reopen this @nmn but it seems not to be resolved.

// vars.stylex.ts

import stylex from '@stylexjs/stylex';

export const vars = stylex.defineVars({
  color: 'blue',
});

// page.tsx

import stylex from '@stylexjs/stylex';
import { vars } from './vars.stylex';

const styles = stylex.create({
  host: {
    // Error here: Computed key cannot be resolved. eslint(@stylexjs/valid-styles)
    [vars.color]: 'red',
  },
});

olivierpascal on Mar 6, 2024

@rjsdnql123 Start with the theming section on the website. Then see the Card component in the NextJS example in the repo.

Usually, variables should not be used as keys. It’s an escape hatch.

nmn on Jan 18, 2024