Theo's Typesafe Cult•2y ago

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.•2y ago

maybe i'm wrong but i dont think that's possible 🥸

WillOP•2y ago

@Costa. yeah I was thinking so too, but had to ask

kdiffin•2y ago

can u give more info about this library i wanna try it out the link returns a 404 -.-

WillOP•2y ago

oops sorry

WillOP•2y ago

https://www.chimera-ui.com/docs/theme

Theme Generator – Chimera

Theme your components super quickly by picking 3 colors. The generator will automatically create all of the other shades for you!

WillOP•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•2y ago

dude lets fucking go then

WillOP•2y ago

https://www.chimera-ui.com/docs/install

Installation – Chimera

A beautiful, accessible, and customizable UI library for React + Tailwind

kdiffin•2y ago

give me a project idea ill make it

WillOP•2y ago

sorry meant to hit you with the install link

kdiffin•2y ago

i wanna work with t3 stack and pokeapi maybe ill use the t3 stack and this in sync

WillOP•2y ago

I think this would be more than capable!

kdiffin•2y ago

whenever i get to that ill dm u

WillOP•2y ago

sweet dude. happy to walk you through it all live just lmk

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

WillOP•2y ago

hmm not quite sure what you mean can you give me an example?

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•2y ago

Message Not Public

WillOP•2y ago

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

WillOP•2y ago

I'm not really sure what that has to do with what I'm looking for though

Unknown User•2y ago

Message Not Public

WillOP•2y ago

hmm i see yeah that might be too difficult. I think I might just write a script that automatically syncs tsdocs

WillOP•2y ago

WillOP•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•2y ago

Message Not Public

WillOP•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•2y ago

Message Not Public

WillOP•2y ago

im kinda familiar with generics but not sure how that would apply to this use case

Unknown User•2y ago

Message Not Public

WillOP•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•2y ago

Message Not Public

WillOP•2y ago

const errorInk = cx<something should go here?>('bold', 'red')

Unknown User•2y ago

Message Not Public

WillOP•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•2y ago

Message Not Public

Gaming

Programming

Does anyone know of a way to programmatically lift classNames into typescript intellisense?