https://github.com/crown3/cx

cx is a TypeScript utility which contains conditional processing, can process both CSS Module and native CSS className
https://github.com/crown3/cx

classnames css cssmodules cssmodules-react typescript

Last synced: about 13 hours ago
JSON representation

cx is a TypeScript utility which contains conditional processing, can process both CSS Module and native CSS className

• Host: GitHub
• URL: https://github.com/crown3/cx
• Owner: crown3
• License: mit
• Created: 2021-05-07T06:50:00.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-18T17:06:04.000Z (over 1 year ago)
• Last Synced: 2024-09-12T19:46:57.643Z (12 days ago)
• Topics: classnames, css, cssmodules, cssmodules-react, typescript
• Language: TypeScript
• Homepage:
• Size: 601 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 
[CX](https://github.com/crown3/cx)
















中文｜English


> `cx` is a TypeScript utility that contains conditional processing, can process both CSS Module and native CSS className (Inspired by [classNames/bind](https://github.com/JedWatson/classnames))

```js

cx('a', true, { c: true })

// => 'a c'  just like classNames function

// But when you bind styles in cx and the first argument is arr

import styles from './style.module.css'

import classNames from '@crown3/cx'

const cx = classNames.bind(styles)

cx(['a', { b: true }], 'c', { d: true }, [{ e: true }])

// => 'a-module-class b-module-class c d e

```

## Getting Started

```bash

# via npm

npm install @crown3/cx

# or Yarn

yarn add @crown3/cx

```

Use with TypeScript

```typescript

import classNames, { CX } from '@crown3/cx'

import styles from './demo.module.css'

const cx: CX = classNames.bind(styles)

cx(['hello'], 'world')

// => 'hello-module-class world'

```

Or in JavaScript

```javascript

import { classNames } from '@crown3/cx'

import styles from './demo.module.css'

const cx = classNames.bind(styles)

```

## Documentation

**Only when you bind this to CSS Module styles and the first argument is array**, cx will handle all arguments in this array as CSS Module (Others are still handled as normal CSS styles)

- Note: If you bind a CSS Module but the first argument isn't array, cx will handle all arguments as normal CSS styles

- The processing logic of the arguments is similar with [classNames/bind](https://github.com/JedWatson/classnames), all arguments will do a conditionally handle and if the result is true, the key will be output

  - But there's a little different with [classNames/bind](https://github.com/JedWatson/classnames) in handling CSS Module styles, when the class name doesn't exist in the CSS Module, cx will ignore this instead of returning it as a string like [classNames/bind](https://github.com/JedWatson/classnames)

```javascript

// mock a CSS Module styles

import classNames from '@crown3/cx'

const cx = classNames

cx([{ a: true, b: false }], 'c', undefined, null) // => 'a c'

// But when you bind styles

const styles = { a: 'a1', b: 'b2' }

const cx = classNames.bind(styles)

cx(['a', { b: true }]) // => 'a1 b2'

// But if first arg isn't array, cx will handle all arguments as normal css, even if you bind styles

cx('a', ['b']) // => 'a b'

// the arguments can accept any number of items which can be a string, boolean, number, array or Object

// If the value associated with a given key is falsy, the key won't be included in the output

cx(['a', { b: true }, [{ b: true }, 'c']], 'a', ['b'], [{ c: true }])

// => 'a1 b2 b2 a b c'

// Note: there hasn't 'cx' in our output, because the Module styles doesn't have the 'c' key

// Even using it like this

cx(

  [

    {

      toString() {

        return 'a'

      },

    },

    {

      toString() {

        return 'c'

      },

    },

  ],

  {

    toString() {

      return 'b'

    },

  }

)

// => 'a1 b'

```

## License

[@crown3/cx](https://github.com/crown3/cx) is licensed under a [MIT License](./LICENSE).