Types aren't allowing nested styles

[benoitdeziel]

When trying to use nested selectors, I get a type error.

Example CSS:

const styles: CSSFunctionArgs<"prefix"> = {
  backgroundColor: "tomato",
  padding: "1rem",
  "&:hover": {
    backgroundColor: "crimson"
  },
  "&[role='button']": {
    "&:hover": {
      backgroundColor: "rebeccapurple"
    }
  }
};

Type error:

Type '{ backgroundColor: "tomato"; padding: "1rem"; "&:hover": { backgroundColor: "crimson"; }; "&[role='button']": { "&:hover": { backgroundColor: "rebeccapurple"; }; }; }' is not assignable to type 'CSSFunctionArgs<"prefix">'.
  Type '{ backgroundColor: "tomato"; padding: "1rem"; "&:hover": { backgroundColor: "crimson"; }; "&[role='button']": { "&:hover": { backgroundColor: "rebeccapurple"; }; }; }' is not assignable to type 'CSSObject<"prefix", Theme>'.
    Type '{ backgroundColor: "tomato"; padding: "1rem"; "&:hover": { backgroundColor: "crimson"; }; "&[role='button']": { "&:hover": { backgroundColor: "rebeccapurple"; }; }; }' is not assignable to type '{ [k: string]: string | number | InternalCss<"prefix", Theme> | undefined; }'.
      Property '"&[role='button']"' is incompatible with index signature.
        Type '{ "&:hover": { backgroundColor: "rebeccapurple"; }; }' is not assignable to type 'string | number | InternalCss<"prefix", Theme> | undefined'.
          Type '{ "&:hover": { backgroundColor: "rebeccapurple"; }; }' has no properties in common with type 'InternalCss<"prefix", Theme>'.ts(2322)

The type error disappear if a property is added to the nested selector

const styles: CSSFunctionArgs<"prefix"> = {
  backgroundColor: "tomato",
  padding: "1rem",
  "&:hover": {
    backgroundColor: "crimson"
  },
  "&[role='button']": {
     backgroundColor: "limegreen"
    "&:hover": {
      backgroundColor: "rebeccapurple"
    }
  }
};

And if a other property is nested, I still got a type error

const nestedStyles: CSSFunctionArgs<"prefix"> = {
  backgroundColor: "tomato",
  padding: "1rem",
  "&[role='button']": {
    backgroundColor: "limegreen",
    "&:hover": {
      backgroundColor: "slateblue",
      "&::after": {
        content: '"content"',
        paddingInline: "1rem"
      }
    }
  }
};

Type '{ backgroundColor: "slateblue"; "&::after": { content: string; paddingInline: string; }; }' is not assignable to type 'string | number | InternalCss<"prefix", Theme> | undefined'.
  Object literal may only specify known properties, and '"&::after"' does not exist in type 'InternalCss<"prefix", Theme>'.ts(2322)

Here's a codesandbox with some tests
https://codesandbox.io/s/system-props-nested-css-9dxigb