Intellisense for custom CSS properties from utils

[yudyananda]

my expectation is the custom css properties from utils should have intellisense (option from appropriate theme config) , for example if it's a margin properties then should show the option from space config

const { getCssString, styled } = createCss ({
   theme: {
      space: {
        ....
      }
   },
   utils: {
      mx: config => value => ({
        marginLeft: value,
        marginRight: value,
      }),
   }
})

const Box = styled('div', {
  variants: {
    marginX: {
      auto: {
        mx: '', // should show the space option like regular margin properties
      },
    },
  },
});

any idea how to make intelisense working on it?

[dannytce]

Hello, afaik you need to type value. Try following:

utils: {
      mx: config => (value: `$${keyof typeof config['theme']['space']}` | (string & {})) => ({
        marginLeft: value,
        marginRight: value,
      }),
}

[yudyananda]

how can i define this type without typescript?

[peduarte]

This isn't something that can magically work, but we're working on exposing types to make this easier. WIP migration guide for v1 https://stitches-site-git-v1.modulz-deploys.com/blog/migrating-from-beta-to-v1