Nested pseudo classes within pseudo elements

[larsfoll]

Describe the issue

According to the @stylexjs/eslint-plugin valid styles rules, I cannot nest more than 1 level deep. Inside '::webkite-scrollbar-thumb', however the styles are applied and everything works.

Is this expected behavior? I would assume the code either fails to compile or the styles are not applied. Or is it possible to do this and is the eslint rule more like a suggestion to not do this.

Expected behavior

Either the nested styles are not applied or the code fails to compile.

Steps to reproduce

Install necessary dependencies and add the linter to the eslint config

    "@stylexjs/eslint-plugin": "0.6.0",
    "@stylexjs/stylex": "0.6.0",

Write nested styles inside ::-webkit-scrollbar-thumb

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

const styles = stylex.create({
  content: {
    gridArea: 'content',
    overflowX: 'hidden',
    overflowY: 'auto',
    '::-webkit-scrollbar-thumb': {
      borderRadius: '6px',
      backgroundColor: { default: 'rgba(0, 0, 0, 0.2)', ':hover': 'rgba(0, 0, 0, 0.4)' },
    },
  },
});

Test case

No response

Additional comments

No response