Quick examples

There are already multiple ways to utilize CCSS in your codebase, however currently only CSS-in-JS solutions covered. Please note you can also use emotion or any other CSS-in-JS solution.

Styled-components + JSX

Simply replace any divs with this one component:

Live Editor
Result
Hello world!

You can also replace styled-components with @cryptic-css/styled, providing out-of-the-box support for CCSS.

import { Ui, ccssd } from '@cryptic-css/styled'
Live Editor
Result
Prepared component + extra props
Ui component directly
Ui component directly + TAG helper

An ~44% text and code size reduction.

Special props and values

child

Add any child CSS/pseudo definition.

Live Editor
Result
color: #fff;
> h1 span {
color: #fc0;
}

Pseudo selectors/states

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

Live Editor
Result
color: #fff;
&:hover {
color: #000;
}

raw

Use it to pass raw CSS string / Style object.

Live Editor
Result
background-color: #fff;

Number values

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

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

Example:

Live Editor
Result
width: 100px;
height: 100px;

Array values

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

Example:

Live Editor
Result
margin: 5px 0 5px 5px;