Custom theme-based TypeScript Intellisense about dripsy HOT 26 CLOSED

After many months, I'm excited to say that this feature is close to landing. @hasparus has been hard at work with many great additions to theme-ui, and one of them will address this issue. This means our sx prop will get strict types based on our theme.

To follow: system-ui/theme-ui#1090

from dripsy.

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

from dripsy.

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

from dripsy.

Alright, let's make this happen.

from dripsy.

I published the first version of this at 3.0.0, would love help testing:

yarn add dripsy@canary

from dripsy.

This requires some TypeScript codegen wizardry that I just don't have. I'll probably close this until some TS genius stumbles upon it and can solve it.

from dripsy.

There's an exciting theme UI PR which seems like it could solve this system-ui/theme-ui#1090. Still have to look more into it, but I've re-opened this issue.

from dripsy.

Relevant: https://material-ui.com/components/about-the-lab/#typescript

from dripsy.

#72

from dripsy.

Gosh, this is sooo hard with all of theme-ui's complex types in the way rn.

@cmaycumber I think this is the start of v3 of Dripsy. Remove theme-ui altogether, copy over the types ourselves, and have great type safety.

(I accidentally wrote this on the other thread first)

from dripsy.

This cool new project by @intergalacticspacehighway has good custom types: https://github.com/intergalacticspacehighway/react-native-styled-variants/blob/9d6a801683b5ffbc8641b5937b62f24425e504de/src/types.ts#L32

from dripsy.

@nandorojo Have you seen react-native-styled-variants: https://styled-variants.vercel.app/

from dripsy.

Haha yeah good timing. I'd want to make sure that the type creator there from the custom theme is performant. For massive TS objects, you can get into slow performance if you recurse too much (see millsp/ts-toolbelt#154)

from dripsy.

Looks like TS performance has improved for this, which is good news microsoft/TypeScript#45711

from dripsy.

Haha yeah good timing. I'd want to make sure that the type creator there from the custom theme is performant. For massive TS objects, you can get into slow performance if you recurse too much (see millsp/ts-toolbelt#154)

That makes a lot of sense. We should definitely make sure that's the case. I wonder if we can build off of some of the work from react-native-styled-variants.

from dripsy.

Yeah, I wrote more about my vision for how this could work at #72 a while ago

I feel like a good UX is

const theme = createTheme({
  ...
})

type MyTheme = typeof theme

declare module 'dripsy' {
  interface UserTheme extends MyTheme {}
}

But I'm open to anything, also could make it like the styled variants for sure. The one missing piece is adding all of the custom scales p, px, etc)

from dripsy.

I think that's definitely a good UX imo. Let me reread #72. I'm super pumped to get this started

from dripsy.

Starting at #124

from dripsy.

Omg. still work to do here but...

from dripsy.

Adding variant support too...

Theme here (just to mock)

from dripsy.

Gradient support working...

from dripsy.

Added sx prop as a function support (not sure why tbh, but why not)

from dripsy.

2 things left:

1. Make sure that the Tokenizer is actually performant
2. Maybe add per-scale styles? As in, bg only sees scales from the theme.colors. It's just a lot of time / effort.

from dripsy.

Shorthand support working...

from dripsy.

Thanks, glad you think so! You can see more details at #124

from dripsy.

Will be closed with the release of v3.

from dripsy.