ESLint valid-styles rule rejects nested conditions inside stylex.when.*() computed keys

[skovhus]

Describe the issue

The stylex-valid-styles ESLint rule rejects a media query (or other condition) nested inside a stylex.when.ancestor() / stylex.when.descendant() / etc.
computed key, even though the Babel compiler handles it correctly and produces valid CSS.

Expected behavior

The ESLint rule should accept stylex.when.*() as a condition key even when its value is a nested condition object, matching the compiler behavior.

@stylexjs/eslint-plugin — all versions since stylex.when support was added (#1270).

Steps to reproduce

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

  const styles = stylex.create({
    icon: {
      transitionDuration: {
        default: vars.slow,
        [stylex.when.ancestor(":active")]: vars.fast, // OK
        [stylex.when.ancestor(":hover")]: {
          default: null,
          "@media (hover: hover)": vars.fast, // ERROR
        },
      },
    },
  });

Test case

No response

Additional comments

No response

[kaustubh2332]

Hey @skovhus can you assign it to me I would like to contribute !!

[skovhus]

Feel free to just open a PR for it.

[kaustubh2332]

Hey @skovhus I have raised the PR can you review it !