1.2.0 • Published 5 years ago
clssx v1.2.0
clssx
I just got tired of copying these functions throughout my projects and decided to turn then into a simple library.
Installing from npm
yarn add clssx
or npm install clssx
Usage
Import csx
or ssx
from the library
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 | number | [key:string]: boolean>) => string
Ex:
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 lenght 2
and returns a single object
containing the allowed rulesets.
type ssx = (...rulesets: Array<Object, boolean>) => Object
Ex:
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
: Runyarn build
in watch modeyarn test:watch
: Run test suite in interactive watch modeyarn test:prod
: Run lintingyarn build
: Generate bundles and typings, create docsyarn lint
: Lints codeyarn release
: Publishes the package