Make it easier for adding custom selector utilities in typescript

[joseDaKing]

Discussed in https://github.com/modulz/stitches/discussions/969

^{Originally posted by joseDaKing February 24, 2022} Add custom selector utilities in typescript will yield the wrong type.

This wont work because of self refercing type

import {  createStitches, CSS as BaseCSS } from "@stitches/core";

const stitches = createStitches({
    theme: {
        space: {
            sm: "16px",
            md: "32px",
            lg: "64px"
        }
    },
    utils: {
        hover: (styles: CSS) => ({
            "@media (hover: hover)": {
                "&:hover": styles
            }
        })
    }
});

type CSS = BaseCSS<typeof stitches.theme>;

The only way to make it work is by using the CSS type without passing in the theme, but the theme tokens won't be typed anymore

import {  createStitches, CSS } from "@stitches/core";

const stitches = createStitches({
    theme: {
        space: {
            sm: "16px",
            md: "32px",
            lg: "64px"
        }
    },
    utils: {
        hover: (styles: CSS) => ({
            "@media (hover: hover)": {
                "&:hover": styles
            }
        })
    }
});
```</div>

[codingwithchris]

@joseDaKing will this not work and automatically pick up the type for your custom hover util while not overriding your theme config?

import type * as Stitches from '@stitches/core';

// export whatever you care about here
export const { css, theme, createTheme, getCssText, globalCss, keyframes, config, reset } = createStitches(
	{
		theme: {
			colors: {},
			fonts: {},
			shadows: {},
			sizes: {},
			space: {},
			fontSizes: {},
			radii: {},
			zIndices: {},
		},
		media: {},
		utils: {
			hover: (styles: Stitches.CSS) => ({
				'@media (hover: hover)': {
					'&:hover': styles,
				},
			}),
		},
	}
);

export type CSS = Stitches.CSS<typeof config>;