class-variant

Features

Vanilla, Next, React, Vue, Tailwind CSS, and Master CSS are available:

* ⚡️ Ultra-lightweight ~1.5KB, powered by Proxy
* 🛡️ Type safety
* 🌈 Dynamically change styles based on properties
* 💫 Re-expand existing elements, like NextLink
* 🧩 Compatible with server and client components
* 🪄 Built-in first-class clsx handling

Why?

😰 Before: Creating a simple styled element using a FunctionalComponent is unpleasant.
``tsx
function Button(props) {
return (

{props.children}

)
}
`
🥳 After: It's in one line and ~80% code less.
`tsx
import styled from '@master/styled.react' // or .vue

const Button = styled.buttoninline-flex font:14
`
Apply it as usual:
`tsx
export default function App() {
return (
submit
)
}
`
It will be rendered as:
`html
submit
`

Getting Started

Install the package depending on your framework:

$3

`bash
npm install class-variant
`
`js
import cv from 'class-variant'

const btn = cv(...params)
const btn = cv... // or

btn(props) // -> string
`

$3


`bash
npm install @master/styled.react
`
`js
import styled from '@master/styled.react'

const Button = styled.button(...params)
const Button = styled.button... // or


`

$3

`bash
npm install @master/styled.vue
`
`js
import styled from '@master/styled.vue'

const Button = styled.button(...params)
const Button = styled.button... // or


`

Basic usage

$3

Declared in two ways: function or template literal, and parameters inherit all features of clsx.
`tsx
const Element = styled.divflex text:center
const Element = styled.div('flex text:center') // or

return (
Hello World
)
`
`html


Hello World


`

$3

Predefine the class variant corresponding to the property.
`tsx
const Button = styled.button('flex', {
$size: {
sm: 'font:12 size:8x',
md: 'font:14 size:12x'
},
disabled: 'opacity:.5',
...
})

return (


)
`
`html

`
> ⚠️ Custom properties that are not element-owned properties must be prefixed with $prop, otherwise they will be reflected on the final element and an error may be thrown.

You can set default properties for elements.
`tsx
Button.default = {
$size: 'md'
}

return (

)
`
`html

`

$3


Dynamically apply class names based on function properties.
`tsx
const Element = styled.div('fg:white',
({ $color }) => $color && bg:${$color}
)

return (

)
`
`html



`

$3

Applies the target class name matching all specified property keys and their values.
`tsx
const Button = styled.button('inline-flex',
['uppercase', { $intent: 'primary', $size: 'md' }]
)

return (
Not matched
Not matched
Matched
)
`
`html
Not matched
Not matched
Matched
`

Extended

$3

Extend an existing styled element and add additional classes or conditions.
`tsx
const A = styled.p('a')
const B = styled.p(A)b

return (
A
B
)
`
`html


A

B

`
It also supports client components, taking Next.js’s Link as an example:
`tsx
'use client'

import styled from '@master/styled.react';
import Link from 'next/link';

const Button = styled(Link)inline-flex text:center

return (
Submit
)
`
> ⚠️ If the extended target contains client components, the 'use client' directive is required.

$3


Changing the original tag name of an element, such as to . Left empty '' even if there are no additional classes.
`tsx
const Button = styled.button('inline-flex')
const Link = styled.a(Button)

return (

button
link
)
`
`html
button
link
`

$3

Extend multiple style elements at once.
`tsx
const A = styled.pa
const B = styled.pb
const C = styled.pc
const D = styled(A)(B)(C)d

return (
A
B
C
D
)
`
`html


A

B

C

D

`

Typings

`ts
declare type Props = {
$size: 'sm' | 'md'
}

const Button = styled.button('flex', {
$size: {
sm: 'font:12 size:8x',
md: 'font:14 size:12x'
},
disabled: 'opacity:.5'
})
`

Overview class-variant APIs


`ts
import cv from 'class-variant'

const btn = cv(
'inline-flex rounded',
{
intent: {
primary: 'bg:blue fg:white bg:blue-60:hover',
secondary: 'bg:white fg:slate-30 bg:slate-90:hover',
},
size: {
sm: 'text:14 p:5|15',
md: 'text:16 p:10|25'
}
},
['uppercase', { intent: 'primary', size: 'md' }],
({ indent, size }) => indent && size && 'font:semibold'
)

btn.default = {
intent: 'primary',
size: 'sm'
}

btn()
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:14 p:5|8 font:semibold

btn({ indent: 'secondary', size: 'sm' })
// inline-flex rounded bg:white fg:slate-30 bg:slate-90:hover text:14 p:5|8 font:semibold

btn({ indent: 'primary', size: 'md' })
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:16 p:10|25 uppercase font:semibold
``

Community

The Master community can be found here:

- Discuss on GitHub - Ask questions, voice ideas, and do any other discussion
- Join our Discord Server - Casually chat with other people using the language ^{_{✓ 中文}}

_{Our 《 Code of Conduct 》 applies to all Master community channels.}

Contributing

Please see our CONTRIBUTING for workflow.

Inspiration

Some of our core concepts and designs are inspired by these giants.
- Template Literal - The use of template literals as syntactic sugar for reusing components is inspired by Styled Components.