Custom theme-based TypeScript Intellisense

Another goal of this library is to have a script that detects your theme, and builds TypeScript intellisense into your components based on your custom theme values. But this isn’t made yet. I’d love help with it.

For example, if you have a theme like this:

export default {
  colors: {
    primary: 'blue',
    muted: '#e8e8e8',
  },
};

Then you would get intellisense like this:

^ The gif might take sec to load.

I think this could be achieved with some TypeScript wizardry, where a command line takes in the theme file and generates a typescript hidden file in your repository. This hidden file would globally declare values that override the sx prop, injecting in type suggestions. The command would probably be placed in a given project’s postinstall, so that it runs every time you run yarn or npm install

@slorber recommended I look here.

I think generating something like this would work?

[rafaelrinaldi]

Popping in to say I thoroughly appreciate all the work being put into this. It will be such a great addition to Dripsy!

[nandorojo]

Props now narrow down to the specific themeKey for a given style 😎