Nested pseudo classes with overlapping conditions behavior: Is this expected?

[javascripter]

When you write nested pseudo classes like this (stackblitz link):

function Home() {
  return (<button {...stylex.props(styles.button)}>Button</button>)
}

const styles = stylex.create({
  button: {
    backgroundColor: {
      default: 'yellow',
      ':hover': {
        default: 'green',
        ':active': 'red',
      },
      ':active': 'cyan',
    },
  },
});

The current behavior seems to be:

1. by default it's yellow
2. when you hover over the button, it turns green
3. when you press on the button (while the cursor is within the button), it turns red.

Considering :active: 'cyan' is written after the :hover, I expected it to override previous ':active': 'red' style inside :hover and the button to turn cyan in step 3, because of the last style applied always wins philosophy.
Is the current behavior expected? If so, what are the exact rules for nested conditions like this?

Context:

I've been working on a runtime-only StyleX alternative library that produces native inline styles and works without bundler setup with the same last style wins guarantee and have noticed a difference in behaviors so I'm trying to understand how nested conditions like this should apply:

[necolas]

The behavior isn't currently well defined. Probably we shouldn't allow nesting of similar pseudos, MQs, etc. So no active in hover, no @media in @media, etc.

You probably don't need to write your own library because the dev time StyleX should do what you're trying to accomplish but faster. Currently the style sheet generation probably needs reworking to something more like what React Native for Web does

[javascripter]

Thanks. I agree disallowing it makes the most sense since the behavior is too confusing otherwise!

Also, interesting point about dev runtime being faster. I wrote my library mainly to investigate if a better Turbopack integration is possible & as an experiment to compare performance of StyleX vs embedded inline styles because I came across this article that claims inline styles can be as fast.
Anyway, StyleX CLI will probably solve Turbopack integration issues so I guess that solves my main concern about StyleX.

[necolas]

I recently migrated my website from CSS-in-JS to inline styles and discovered that inline styles improved the load performance of my website

Yeah the initial load will improve because there is no CSS asset to download. However, the render performance is significantly worse than any approach that renders down to CSS. You can see the difference in these benchmarks