Why Cryptic?

Because it's making your CSS/React components/etc. look Cryptic.

Live Editor
display: block;
padding: 10px;
background: transparent;

What is the approach?

The simplified answer: We have a property-map and a value-map where we basically match the short version of their long counterpart and emit. Nothing exceptional.

How about performance?

Transforming at runtime has performance costs, especially if your code is in a hot path (and usually with CSS-in-JS that's true for all your styles). However, the hit isn't more than using dynamic values in styled-components or using styled-system. We were also very restrictive about the shipped features to keep the core as primitive as possible.

How big the size saving is?

We do not have any case studies in practice. Due to the fact that CCSS also requires some extra code, you first need to reach the point where your **CCSS** + compiler = original CSS. This is fairly easy to reach as the compiler itself is small. The bigger your codebase, the bigger the savings are, should be 40-60% approx.

We were already running a highly dynamic system using values from props, CCSS is not different in such regards from any similar solutions.

Won't be this hard to understand?

We think that you need a relatively short time to get comfortable with it. If you know CSS, you know the shorthands as well. However, we also have a focus on developer experience. We're providing TypeScript definitions and TSDoc for all props to help your work. You'll have nice autocomplete and a list of possible options.

Why just not use styled-system?

It's not our goal to have an amount of features styled-system does. However, the mapping approach used by CCSS is making the compiler capable of supporting custom properties and custom values which helps you to create your own custom design system. For example, it's easy to define such:

Live Editor
color: #fff;
font-size: 32rem;

Also styled-system does not support as many shorthands as we wanted and works differently in many aspects.

What is the difference between plugins and props?

  • Plugins: Manipulating values on existing props.
  • Props: Adding support for new custom props.