Does anyone know of a way to programmatically lift classNames into typescript intellisense?
For example, if I import this component somewhere else, I'd like to be able to see the classNames that were applied to the div when I hover over <Example />
You are probably wondering why I would ever want to do that. It's because I wrote this l created this library http://chimera-ui.com/docs/components, where the components have default styles applied with Tailwind. When users import these components, I'd like to expose that styling to them via typescript intellisense.
36 Replies
maybe i'm wrong but i dont think that's possible 🥸
@Costa. yeah I was thinking so too, but had to ask
can u give more info about this library
i wanna try it out
the link returns a 404 -.-
oops sorry
Theme Generator – Chimera
Theme your components super quickly by picking 3 colors. The generator will automatically create all of the other shades for you!
@kdiffin please feel free to dm me as you try it out! I don't know anyone who has actually installed it yet lol
so would love to get your thoughts
dude lets fucking go then
Installation – Chimera
A beautiful, accessible, and customizable UI library for React + Tailwind
give me a project idea
ill make it
sorry meant to hit you with the install link
i wanna work with t3 stack and pokeapi
maybe ill use the t3 stack and this
in sync
I think this would be more than capable!
whenever i get to that ill dm u
sweet dude. happy to walk you through it all live
just lmk
maybe u can add a prop here tho
classNames prop
and give that values
but that only works if the classes are static of course
hmm not quite sure what you mean
can you give me an example?
like u know when u add a prop to a component and give types to that prop, typescript gives u intellisense
so if the css of that component doesnt change i think u can do it so like
wait nvm
mb
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
ooh checking this out now
man ngl I have no idea what is going in in this haha
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I'm not really sure what that has to do with what I'm looking for though
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
hmm i see
yeah that might be too difficult. I think I might just write a script that automatically syncs tsdocs
i can get the default className to show up if I write a comment like this
so maybe I can just write a script to programmatically add those
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
the tricky thing is I'm using CVA and shit
class variance authority
so i might have something that looks like
so it's hard to know what the classname in buttonVariants() will actually be
would be nice if intellisense changed when a user passed in a different variant
for something like this
then its much simpler, I just need to lift the string out
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
im kinda familiar with generics
but not sure how that would apply to this use case
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
hmm maybe I just don't understand generics enough
don't you need to pass something in <Colors extends Color[]>
on the function call?
const errorInk = cx('bold', 'red')
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
const errorInk = cx<something should go here?>('bold', 'red')
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
tbh im still confused
but its okay haha
i am getting the feeling it's not actually the right solution for what I'm after
but I appreciate you trying to take me through it!
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View