Do conditional styles for variables only work with media queries?

[grazianodev]

I have defined a variable like this:

// tokens.stylex.ts
export const colors = stylex.defineVars({
  textLink: {
    default: 'orange',
    ':hover': 'pink',
    '@media screen and (min-width: 900px)': 'purple',
  }
})

// index.tsx
const styles = stylex.create({
  color: colors.textLink
})

The media query styles are applied, the hover styles are not. Do conditional styles for variables only work with media queries?

By the way, as a workaround I'm doing this:

// tokens.stylex.ts
export const colors = stylex.defineVars({
  textLinkDefault: 'orange',
  textLinkHover: 'pink',
})

// index.tsx
const styles = stylex.create({
  color: {
    default: colors.textLinkDefault,
    ':hover': colors.textLinkHover,
  }
})

[nmn]

Yes. Variables only work with @ rules. defineVars are being defined as @property or :root CSS rules, so pseudo classes don't really make sense. There is no way in CSS to define a variable that changes value based on the element it's used on.

[grazianodev]

Got it, thanks!