How to combine pseudo-selectors with media queries?

[aspizu]

import sx from "@stylexjs/stylex"
import {color} from "~/tokens.stylex"

const styles = sx.create({
	secondary: {
		background: {
			default: {
				default: color.secondary90,
				"@media (prefers-color-scheme: dark)": color.secondary10,
			},
			":hover": {
				default: color.secondary85,
				"@media (prefers-color-scheme: dark)": color.secondary15,
			},
			":active": {
				default: color.secondary80,
				"@media (prefers-color-scheme: dark)": color.secondary20,
			},
		},
	},
})

But stylex says

The same pseudo selector or at-rule cannot be used more than once.

I tried switching the pseudo-selector and media query around, but then stylex complains about the pseudo-selector being duplicated, instead of the media query.

[nucleartux]

Here is an example:

stylex/apps/nextjs-example/app/Counter.tsx

Line 69 in b14a6ee

backgroundColor: {

[nmn]

The same pseudo selector or at-rule cannot be used more than once.

This error should not fire. Is this an ESLint issue?

[aspizu]

error from vite plugin