Skip to content

Commit

Permalink
cxclsx (#152)
Browse files Browse the repository at this point in the history
feat: use clsx instead of bespoke class concatenator
  • Loading branch information
joe-bell authored Apr 27, 2023
1 parent b4f8916 commit ec25777
Show file tree
Hide file tree
Showing 12 changed files with 409 additions and 128 deletions.
6 changes: 3 additions & 3 deletions docs/pages/docs/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const component = cva("base", options);

### Parameters

1. `base`: the base class name (`string`, `string[]` or `null`)
1. `base`: the base class name (`string`, `string[]` or other [`clsx` value](https://github.com/lukeed/clsx#input))
1. `options` _(optional)_
- `variants`: your variants schema
- `compoundVariants`: variants based on a combination of previously defined variants
Expand All @@ -23,15 +23,15 @@ A `cva` component function

## `cx`

Concatenates class names
Concatenates class names (an alias of [`clsx`](https://github.com/lukeed/clsx))

```ts
const className = cx(classes);
```

### Parameters

- `classes`: array of classes to be concatenated
- `classes`: array of classes to be concatenated ([see `clsx` usage](https://github.com/lukeed/clsx#input))

### Returns

Expand Down
2 changes: 2 additions & 0 deletions docs/pages/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ Creating variants with the "traditional" CSS approach can become an arduous task
- [**clb**](https://github.com/crswll/clb) ([Bill Criswell](https://github.com/crswll))
This project originally started out with the intention of merging into the wonderful [`clb`](https://github.com/crswll/clb) library, but after some discussion with Bill, we felt it was best to go down the route of a separate project.
I'm so grateful to Bill for sharing his work publicly and for getting me excited about building a type-safe variants API for classes. If you have a moment, please go and [star the project on GitHub](https://github.com/crswll/clb). Thank you Bill!
- [**clsx**](https://github.com/lukeed/clsx) ([Luke Edwards](https://github.com/lukeed))
Previously, this project surfaced a custom `cx` utility for flattening classes, but it lacked the ability to handle variadic arguments or objects. [clsx](https://github.com/lukeed/clsx) provided those extra features with quite literally zero increase to the bundle size – a no-brainer to switch!
- [**Vanilla Extract**](http://vanilla-extract.style) ([Seek](https://github.com/seek-oss))

## Downloads
Expand Down
3 changes: 3 additions & 0 deletions packages/class-variance-authority/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@
"test:jest": "jest --config .config/jest.config.ts --coverage",
"test:size": "pnpm build && bundlesize -f 'dist/*.js' -s 850B"
},
"dependencies": {
"clsx": "1.2.1"
},
"devDependencies": {
"@jest/types": "28.1.1",
"@swc/cli": "0.1.57",
Expand Down
Loading

6 comments on commit ec25777

@vercel
Copy link

@vercel vercel bot commented on ec25777 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on ec25777 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on ec25777 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

example-react-with-tailwindcss – ./examples/react-with-tailwindcss

cva-react-with-tailwindcss.vercel.app
example-react-with-tailwindcss-class-variance-authority.vercel.app
example-react-with-tailwind-git-27bf08-class-variance-authority.vercel.app

@vercel
Copy link

@vercel vercel bot commented on ec25777 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

example-react-with-css-modules – ./examples/react-with-css-modules

example-react-with-css-modules-class-variance-authority.vercel.app
example-react-with-css-modu-git-936303-class-variance-authority.vercel.app
cva-react-with-css-modules.vercel.app

@vercel
Copy link

@vercel vercel bot commented on ec25777 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on ec25777 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

example-astro-with-tailwindcss – ./examples/astro-with-tailwindcss

example-astro-with-tailwind-git-ecbae6-class-variance-authority.vercel.app
cva-astro-with-tailwindcss.vercel.app
example-astro-with-tailwindcss-class-variance-authority.vercel.app

Please sign in to comment.