[jss] Support simple (e.g. "&:hover") pseudo-selectors of jss-nested.

[estaub]

Consider support for simple jss-nested pseudo-selectors like &:hover, which I suspect are the overwhelming majority of pseudo-selector use in jss. csstype has pseudoselectors, but of course they are without the leading ampersand, which is a trigger for jss-nested.

Support might look like the attached pseudos.ts, together with a definition or two at some level leveraging those, e.g. roughly

export type CSSDeclBlock = 
    CSS.Properties<string | number> & {[key in Pseudos]?:CSS.Properties<string | number>}

It might make sense to try to get the pseudos.ts definitions into csstype, but probably only as a separate, standalone file.

[estaub]

If anyone goes after this, you may want to also think about nested media-queries in the same syntactic position. These are considerably harder to come up with a reasonable solution for, because there is no hope of a library-provided lexicon of likely keys; the developer must declare, or provide some way to infer, the keys that they are using. I ended up with this, which is definitely lame but may help seed thought:

export type CSSDeclBlock<ODDKEYS extends string = never> = 
    CSS.Properties<string | number> & {[key in Pseudos]?:CSS.Properties<string | number>}  & {[key in ODDKEYS]?:CSS.Properties<string | number>}

//=== used as:

// Force string-constant typing.  
// Consider use of a  string enum; 
//   see https://basarat.gitbooks.io/typescript/docs/types/literal-types.html

const mqSmallWindow: '@media (max-width: 1280px) and (max-height: 1024px)' = 
    '@media (max-width: 1280px) and (max-height: 1024px)'
const mqNotSmallWindow: '@media (min-width: 1281px), (min-height: 1025px)' = 
    '@media (min-width: 1281px), (min-height: 1025px)'

export type UsedMediaQueries = typeof mqSmallWindow | typeof mqNotSmallWindow

type MyCSSBlock = CSSDeclBlock<UsedMediaQueries>

[pelotom]

The issue here is with Material UI, not @types/jss: mui/material-ui#11004

[orta]

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.