Open
Description
Describe the issue
When using a stylex defineVars token as the backgroundColor or borderColor value, we get lint logs complaining about it not being valid.
Guessing its because of this:
Line 152: const color = makeUnionRule(isString, isNamedColor, isHexColor);
https://github.com/facebook/stylex/blob/main/packages/%40stylexjs/eslint-plugin/src/stylex-valid-styles.js#L152
I guess that line should also incule isStylexDefineVarsToken.
...
@app/ui-strict-tokens:lint: sienna
@app/ui-strict-tokens:lint: silver
@app/ui-strict-tokens:lint: skyblue
@app/ui-strict-tokens:lint: slateblue
@app/ui-strict-tokens:lint: slategray
@app/ui-strict-tokens:lint: slategrey
@app/ui-strict-tokens:lint: snow
@app/ui-strict-tokens:lint: springgreen
@app/ui-strict-tokens:lint: steelblue
@app/ui-strict-tokens:lint: tan
@app/ui-strict-tokens:lint: teal
@app/ui-strict-tokens:lint: thistle
@app/ui-strict-tokens:lint: tomato
@app/ui-strict-tokens:lint: turquoise
@app/ui-strict-tokens:lint: violet
@app/ui-strict-tokens:lint: wheat
@app/ui-strict-tokens:lint: white
@app/ui-strict-tokens:lint: whitesmoke
@app/ui-strict-tokens:lint: yellow
@app/ui-strict-tokens:lint: yellowgreen
@app/ui-strict-tokens:lint: rebeccapurple
@app/ui-strict-tokens:lint: a valid hex color (#FFAADD or #FFAADDFF)
@app/ui-strict-tokens:lint: null
@app/ui-strict-tokens:lint: initial
@app/ui-strict-tokens:lint: inherit
@app/ui-strict-tokens:lint: unset
@app/ui-strict-tokens:lint: revert stylexjs/valid-styles
Expected behavior
Do not give error when using stylex defineVars token.
Steps to reproduce
// tokens.stylex.ts
const colors = stylex.defineVars({
one: rgba(0,0,0,1)
} as const)
//Comp.tsx
const styles = stylex.create({
comp: {
backgroundColor: colors.one
}
})
const Comp = () => {
return <div {...stylex.props(styles.comp)}>Hello</div>
Test case
No response
Additional comments
Our colors in the defineVars tokens are rgba() and not hex but have tried with switching them out to temp hex values and it didnt solve the issue.