CSS Variables not working in clsx

[andrianfaa]

Hi There, I'm using clsx and tailwindcss for styling my nextjs project, but when I set css variables in clsx like this

<figure className={clsx(baseImgWrapperClassName, "flex items-start")}>
  <Image
    src={People1}
    alt="Hero Animation image 1"
    className={clsx(
      {
        "--max-height": "80%"
      },
      "pointer-events-none w-full rounded-[18px] object-cover lg:rounded-[36px]",
      "about-us-hero-animation-top translate-y-[25%] bg-[#EDDDDD]"
    )}
  />
</figure>

and css:

@keyframes about-us-hero-animation-top {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: var(--max-height, 100%);
  }
}

why is --max-height variable unreadable in chrome devtools? it should be displayed as attribute style right? see devtools screenshot here

Btw I tried this method from the example of usage in the clsx documentation (https://github.com/lukeed/clsx#usage)

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

[lukeed]

As shown in your screenshot, this produces class="—max-height …" which is not how you use css vars.

You need to move the max-height variable as a style property since it needs to be actual CSS and not a DOM string token within the class attribute

<Image className="…" style="—max-height: 80%" … />

clsx is working fine here. It’s just a misplacement of the CSS var

[andrianfaa]

I see..., I think the output of using

clsx(...{ "--max-height": "80%" })

is adding a css variable in the style tag😅

Btw thank you for the detailed explanation🙏

[lukeed]

clsx only works with the inputs you give it. If you tell it to be there, it’ll be there