Quick examples

Special props and values

child

Add any child CSS/pseudo definition.

Live Editor

ccss({ color: '#fff', child: { '> h1 span': { color: '#fc0' } } })

ccss({
    color: '#fff',
    child: {
        '> h1 span': {
            color: '#fc0'
        }
    }
})

Result

Pseudo selectors/states

Pseudo definitions are also having shorthands, always starting with :.

Live Editor

ccss({ c: '#fff', ':h': { c: '#000' } })

ccss({
    c: '#fff',
    ':h': {
        c: '#000'
    }
})

Result

raw

Use it to pass raw CSS string / Style object.

Live Editor

ccss({ raw: `background-color: #fff;` })

ccss({
    raw: `background-color: #fff;`
})

Result

Number values

Properties awaiting numeric values with a unit can accept pure numbers for built-in automatic conversion.

If not a number is given, the value will be used as-is.

Example:

Live Editor

ccss({ width: 100, height: '100px' })

ccss({
    width: 100,
    height: '100px'
})

Result

Array values

Shorthand properties awaiting numeric values with units can accept an array as an input.

Example:

Live Editor

ccss({ margin: [1, 0, 1, 1] })

ccss({
    margin: [1, 0, 1, 1]
})

Result