https://github.com/matheusps/clssx

Simple utilities that join strings and objects conditionally
https://github.com/matheusps/clssx

classnames css react style typescript utility

Last synced: 5 days ago
JSON representation

Simple utilities that join strings and objects conditionally

• Host: GitHub
• URL: https://github.com/matheusps/clssx
• Owner: matheusps
• License: mit
• Created: 2019-10-12T13:28:53.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T22:34:43.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T11:41:16.449Z (about 1 month ago)
• Topics: classnames, css, react, style, typescript, utility
• Language: TypeScript
• Homepage:
• Size: 4.34 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

README

        
# clssx

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![CircleCI](https://circleci.com/gh/matheusps/clssx.svg?style=svg)](https://circleci.com/gh/matheusps/clssx) [![Greenkeeper badge](https://badges.greenkeeper.io/matheusps/clssx.svg)](https://greenkeeper.io/)

I just got tired of copying these functions throughout my projects and decided to turn them into a simple library.

### Installing from npm

`yarn add clssx` or `npm install clssx`

### Usage

Import `csx` or `ssx` from the library

```javascript

import { csx, ssx } from 'clssx'

```

**Example using react:** https://codesandbox.io/s/vigorous-voice-ef38p

#### csx

It receives any amount of `strings`, `numbers` or `conditional objects` and returns a single `string` containing the allowed rulesets.

`type csx = (...rulesets: Array) => string`

Ex:

```javascript

csx('') // => ''

csx('flex padding-ns') // => 'flex padding-ns'

csx('flex padding-ns', 't-bold') // => 'flex padding-ns t-bold'

csx(0) // => '0'

csx(1, 2, 3) // => '1 2 3'

csx(1, 't-bold') // => '1 t-bold'

csx({ 'flex padding-ns': false, grow: true }) // => 'grow'

csx({ 'flex padding-ns': false, grow: false }) // => ''

csx({ 'flex padding-ns': true, grow: true }) // => 'flex padding-ns grow'

csx(1, { 'flex padding-ns': true }, { grow: true }, 'margin-xl') // => '1 flex padding-ns grow margin-xl'

```

#### ssx

It receives any amount of `objects` or `arrays with length 2` and returns a single `object` containing the allowed rulesets.

`type ssx = (...rulesets: Array) => Object`

Ex:

```javascript

ssx({}) // => {}

ssx({ padding: 1 }) // => {padding: 1}

ssx({ padding: 1 }, { display: 'flex' }) // => {padding: 1, display='flex'}

ssx({ padding: 1 }, [{ display: 'flex' }, false]) // => {padding: 1}

ssx({ padding: 1 }, [{ display: 'flex' }, false], [{ display: 'inline' }, true]) // => {padding: 1, display: 'inline'}

```

### Scripts cheatset

- `yarn start`: Run `yarn build` in watch mode

- `yarn test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)

- `yarn test:prod`: Run linting

- `yarn build`: Generate bundles and typings, create docs

- `yarn lint`: Lints code

- `yarn release`: Publishes the package