Passing function as `className`

[thewasif]

Bug report

Describe the bug

I am passing a function as a className but stitches is passing it as a function instead of parsing it. Here's the code example

To Reproduce

import { NavLink } from "react-router-dom";
import {styled} from "@stitches/react"

const StyledNavLink = styled(NavLink, {
  display: "block",
  borderTop: "1px solid rgba(255, 255, 255, 0.4)",
  borderBottom: "1px solid rgba(255, 255, 255, 0.4)",
  linearGradient: "90deg, rgba(217, 217, 217, 0.1) 0%, rgba(217, 217, 217, 0) 100%",
  mb: "$3",
  pl: "$4",
  py: 10,
  color: "$white",
  fontSize: "$base",
  textTransform: "uppercase",
  textDecoration: "none",
})

<ul>
    <li>
        <StyledNavLink className={({ isActive }) => (isActive ? "active" : undefined)} to={routes.home.path} >
            Home
        </StyledNavLink>
   </li>
   <li>
        <StyledNavLink className={({ isActive }) => (isActive ? "active" : undefined)} to={routes.about.path}>
            About
        </StyledNavLink>
   </li>
</ul>

1. import NavLink from react-router-dom
2. Use className and pass the className as a function
3. You can see the following class being given in DOM

Expected behavior

It should pass the class 'active' instead of the whole function

System information

• OS: Debian 11
• Browser (if applies) Chrome
• Version of Stitches: 1.2.8
• Version of Node.js: 16.16.0

[hadihallak]

Hey @thewasif Stitches does not support this syntax.