color value must be one of

[lalala]

Describe the issue

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

const styles = stylex.create({
  taskListExpander: (expanderSymbol: string) => ({
    color: expanderSymbol ? "#f58320" : "unset",
    cursor: expanderSymbol ? "pointer" : "default",
    padding: expanderSymbol ? "0.15rem 0.2rem 0rem 0.2rem" : "none",
    paddingLeft: expanderSymbol ? "none" : "1rem",
    fontSize: "0.6rem",
    userSelect: "none",
  }),
});

export default styles;

Expected behavior

expanderSymbol is a variable.

Steps to reproduce

"@stylexjs/stylex": "0.5.1",
"@stylexjs/eslint-plugin": "0.5.1",

Test case

No response

Additional comments

No response

[Naman Goel]

1. There is a known issue in the ESLint plugin when used with dynamic styles.
2. But what you're trying to do here is invalid anyway.

StyleX's dynamic styles are for truly dynamic values that cannot be known ahead of time. They're not to be used for conditionally applying styles. Create two separate style objects and merge them conditionally instead.

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

const styles = stylex.create({
  taskListExpander: {
    paddingLeft: "1rem",
    fontSize: "0.6rem",
    userSelect: "none",
    paddingLeft: "1rem",
  },
  taskListExpanderWithSymbol: {
    color: "#f58320",
    cursor: "pointer",
    padding: "0.15rem 0.2rem 0rem 0.2rem",
    paddingLeft: null,
  },
});

stylex.props(styles.taskListExpander, expanderSymbol && styles.taskListExpanderWithSymbol)