Tips and Tricks

Here is a collection of some tips and tricks we've learnt by using CCSS in production.

Mapping values and converting numbers inside shorthands#

A common case is shorthands where you still want to be able to use number conversion and/or resolve mapped values:

Live Editor

ccss({
    borderWidth: 1,
    borderStyled: 'solid',
    borderColor: '#000'
})

ccss({
    borderWidth: 1,
    borderStyled: 'solid',
    borderColor: '#000'
})

Result

border-width: 1px;
border-color: #000;

If you're passing an array value, CCSS will loop through each value, try to resolve, and concat.

Live Editor

ccss({
    border: [1, 'solid', '#000'],
    transform: ['translateX(', 10, ')'],
    calc: ['calc(100% - ', 100, ')']
})

ccss({
    border: [1, 'solid', '#000'],
    transform: ['translateX(', 10, ')'],
    calc: ['calc(100% - ', 100, ')']
})

Result

border: 1px solid #000;
transform: translateX(,10,);

This also works while resolving value maps, eg. using custom colors: border: [1, 'solid', 'dark']