v9's `makeStyles` doesn’t accept valid ZIndexProperty on pseudoelements

[thure]

Environment Information

• Package version(s): 9.0.0-rc.6
• Browser and OS versions: Edge 99.0.1150.52 on macOS 12.3

Please provide a reproduction of the bug in a codepen:

Actual behavior:

In a makeStyles call like this:

const useStyles = makeStyles({
  root: {
    '&:before': {
      zIndex: -1
    }
  }
})

TypeScript errors on &:before with:

      Property 'zIndex' is incompatible with index signature.
        Type 'number' is not assignable to type 'GriffelStylesCSSValue | GriffelStylesCSSObjectCustomL3 | undefined'.

Even though Griffel identifies the type of zIndex as

export type ZIndexProperty = Globals | "auto" | number

The error is not present when applied directly to root.

Expected behavior:

An acceptable zIndex value should not cause TypeScript issues, even on pseudo-elements.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: Fluent Blocks (https://github.com/OfficeDev/fluent-blocks)

[micahgodbolt]

It appears to work with :before but not &:before.

Both produce the same result, but only the first one appears properly typed.

[layershifter]

This was fixed in Griffel itself, https://github.com/microsoft/griffel/issues/49. I will work on PR to bump Griffel in Fluent UI.