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 />
export const Example = () => {
return <div className="h-fit w-fit bg-red-500">Example</div>;
};
export const Example = () => {
return <div className="h-fit w-fit bg-red-500">Example</div>;
};
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
Costa.
Costa.•2y ago
maybe i'm wrong but i dont think that's possible 🥸
Will
Will•2y ago
@Costa. yeah I was thinking so too, but had to ask
kdiffin
kdiffin•2y ago
can u give more info about this library i wanna try it out the link returns a 404 -.-
Will
Will•2y ago
oops sorry
Will
Will•2y ago
Theme Generator – Chimera
Theme your components super quickly by picking 3 colors. The generator will automatically create all of the other shades for you!
Will
Will•2y ago
@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
kdiffin
kdiffin•2y ago
dude lets fucking go then
Will
Will•2y ago
Installation – Chimera
A beautiful, accessible, and customizable UI library for React + Tailwind
kdiffin
kdiffin•2y ago
give me a project idea ill make it
Will
Will•2y ago
sorry meant to hit you with the install link
kdiffin
kdiffin•2y ago
i wanna work with t3 stack and pokeapi maybe ill use the t3 stack and this in sync
Will
Will•2y ago
I think this would be more than capable!
kdiffin
kdiffin•2y ago
whenever i get to that ill dm u
Will
Will•2y ago
sweet dude. happy to walk you through it all live just lmk
kdiffin
kdiffin•2y ago
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
Will
Will•2y ago
hmm not quite sure what you mean can you give me an example?
kdiffin
kdiffin•2y ago
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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
ooh checking this out now man ngl I have no idea what is going in in this haha
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
I'm not really sure what that has to do with what I'm looking for though
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
hmm i see yeah that might be too difficult. I think I might just write a script that automatically syncs tsdocs
Will
Will•2y ago
Will
Will•2y ago
/**
* @param className - inline-flex w-fit items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-line focus:ring-offset-2
*/
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
/**
* @param className - inline-flex w-fit items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-line focus:ring-offset-2
*/
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
the tricky thing is I'm using CVA and shit class variance authority so i might have something that looks like
/**
* @param className - inline-flex w-fit items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-line focus:ring-offset-2
*/
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, ...props }, ref) => {
return (
<button
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";
/**
* @param className - inline-flex w-fit items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-line focus:ring-offset-2
*/
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, ...props }, ref) => {
return (
<button
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";
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
const Image = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square object-cover h-full w-full", className)}
{...props}
/>
));
Image.displayName = "Avatar.Image";
Avatar.Image = Image;
const Image = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square object-cover h-full w-full", className)}
{...props}
/>
));
Image.displayName = "Avatar.Image";
Avatar.Image = Image;
then its much simpler, I just need to lift the string out
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
im kinda familiar with generics but not sure how that would apply to this use case
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
const errorInk = cx<something should go here?>('bold', 'red')
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Will
Will•2y ago
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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server