Typescript types for component selectors that use object syntax in emotion

[idrm]

The existing demo of twin.macro + vite + emotion does not appear to allow component selectors using object syntax, e.g. as in the following snippet:

const Child = styled.div({
  color: 'red',
})

const Parent = styled.div({
  [Child]: {
    color: 'green',
  },
})

In order to enable that feature I had to add @emotion/babel-plugin as a dev dependency and inside the babel plugin list in vite.config.ts. While that made component selectors work, the type definitions provided in the vite+emotion example still flagged the [Child]:{...} selector as invalid. You can see the behavior in this CS. Can this be corrected by expanding the types in twin.d.ts, similar to the suggestion in ben-rogerson/twin.macro#116?

One other notable aspect of such an addition -- the component selector can be arbitrarily deep inside the selector tree, e.g. {'&:hover': { [Child]: { color: 'green' }}}.