By default, the ccss package provides everything to get started. You don't need to configure anything.

import ccss from 'ccss'
Live Editor


You can re-configure CCSS instances, which means the default exported instance can be re-configured also.

import ccss from 'ccss'
// Set a custom prop
// Set custom property with handler
[['customProp'], null, input => makeItRock(input)],
// Create value-map for a property
[['color'], { dark: '#000' }]
color: 'dark',
customProp: 'active'
Good to know

For more details and options see the documentation of transformed, the library CCSS is built on top.


A function that will transform your number values to have your desired unit.

Default: v => `${v}px`

For example in case you want to use the 62.5% root font-size technique, you can define your function as such: v => `${v / 10}rem`


It tells how transformed should transform your output. There are 2 transformers provided by CCSS, but you can create your own:

  • stringOutputTransformer (default): output is a CSS string;
  • objectOutputTransformer: output is a style object.
Last updated on by Pablo Henrique