help with psudo element ::-webkit-scrollbar and ::-webkit-scrollbar-thumb

[alejandroyunes]

Can anybody help me to turn the below code into stylex:

this works in dev but I get the below error.

    "::-webkit-scrollbar": {
      width: "8px",
      height: "8px"
    },
    "::-webkit-scrollbar-thumb": {
      borderRadius: "8px",
      backgroundColor: xBorderColor
    },

Pseudo Classes, Media Queries and other At Rules should be nested as conditions within style properties. Only Pseudo Elements (::after) are allowed at the top-level  @stylexjs/valid-styles

Error: Pseudo Classes, Media Queries and other At Rules should be nested as conditions within style properties. Only Pseudo Elements (::after) are allowed at the top-level  @stylexjs/valid-styles

I've tried something like this, even though scrollbarThumb doesnt exist, I couldnt get the scrollbar-thumb: { borderRadius: 8}

    scrollbarWidth: 8,
    scrollbarHeight: 8,
    scrollbarColor: "red blue",
    //scrollbarThumb: 8

thank you

[nmn]

The ESLint rule doesn't recognise these pseudo elements. This is a bug in our ESLint plugin. Feel free to suppress the lint error and continue using it.

[Piyush-Kumar-Ghosh]

Hi, @alejandroyunes try it like this

{
  scrollbarWidth: 8,
  scrollbarHeight: 8,
  scrollbarColor: {
    thumb: "red blue",
  },
  "::-webkit-scrollbar": {
    width: 8,
    height: 8,
  },
  "::-webkit-scrollbar-thumb": {
    borderRadius: 8,
    backgroundColor: "red blue",
  },
}

[alejandroyunes]

thank you, I've just disabled both lines: eslint-disable-next-line @stylexjs/valid-styles

[nmn]

Try using v0.5.0-alpha.1 to see if it has fixed your problem. (Remember to reload VSCode after you update an ESLint plugin for it to take effect)

[dd-jonas]

@nmn I had the same issue with the plugin reporting ::-webkit-scrollbar as an invalid pseudo element. I can confirm the error went away in v0.5.0-alpha.1, thanks!

[nmn]

Fixed in 0.5.0