Make it possible for adding custom selector utilities in typescript

[joseDaKing]

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
            }
        })
    }
});

[bwyx]

i have a silly solution:
create a new stitches only for the tokens type. you'll not getting typed utils inside util properties tho

import { createStitches } from '@stitches/core'
import type * as Stitches from '@stitches/core'

const theme = {
  space: {
    sm: '16px',
    md: '32px',
    lg: '64px'
  }
}

const utils = {
  '@hover': (styles: CSS) => ({
    '@media (hover: hover)': {
      '&:hover': styles
    }
  })
}

const { config } = createStitches({
  theme
})

export const { getCssText, css } = createStitches({
  theme,
  utils
})

type CSS = Stitches.CSS<typeof config>

[joseDaKing]

You could directly import the same type that is returned from createStitches

import Stitches from '@stitches/react/types/stitches';

import { media, theme, themeMap, utils } from "./config";

type StitchesConfig = Stitches<"", typeof media, typeof theme, typeof themeMap, typeof utils>;

By the way your approach wont work with nested selectors utilities

[joseDaKing]

Here is another approach that will work with nested selector utility types

import { 
    slate,
    slateA,
    gray,
    grayA,
    violet,
    violetA,
    crimson,
    crimsonA,
    amber,
    amberA,
    blue,
    blueA,
    red,
    redA,
    green,
    greenA,
}
from "@radix-ui/colors";

import { CSS, PropertyValue } from "@stitches/react";

import Stitches from "@stitches/react/types/stitches";



const media = {...};

const themeMap = {...} as const;

const theme = {};

type ThemedCSS = CSS<Stitches<"", typeof media, typeof theme, typeof themeMap, Utils>["config"]>;

type Utils = {
  borderXColor: (value: PropertyValue<"borderColor">) => {},
  hover: (styles: ThemedCSS) => {};
}

const utils: Utils = () => {
  borderXColor: value => ({ borderLeftColor: value, borderRightColor: value }),
  hover: styles => ({ "@media (hover: hover)": { "&:hover": styles }})
}

const stitches = createStitches({
    media,
    theme,
    themeMap,
    utils
});

But is still think direct support for this would yield better dev experience