On this page

cssx.union

union

Merges multiple conditional class names into one.
It also supports named export for use within className.

Something.tsx

"use client"
 
import cssx, { union } from 'typedcssx'
import { usePathname } from 'next/navigation'
 
export default function Page () {
  const pathname = usePathname()
 
  return(
    <Link href="/" className={union(cssLink, pathname === "/" ? cssActive : "")}>
        Home        
    </Link>
  )
}
 
const cssLink = cssx.set({
  fontSize: '14px',
  color: 'var(--color-link)',
  textDecoration: 'none'
})
 
const cssActive = cssx.set({
  fontWeight: 'bold',
  borderBottom: 'solid 2px skylbue'
})

This simplifies the syntax:

<div className={union(css.link, css.active)}>

The following is how it is written so far.

<div className={css.link + ' ' + css.active}>
<div className={`${css.link} ${css.active}`}>