Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration.

Current configured baseUrl = / (default value)

We suggest trying baseUrl =

CrypticCSS

Swiss-army knife for custom CSS-in-JS and design-system needs.

Shorthands, custom properties, value maps, design tokens, static/dynamic extraction, and much more...

🎌
Get Started
📚
Documentation
🤾‍♀
Playground

Tiny core

CCSS is an opinionated, low-level utility to deal with CSS style objects. It's not an out-of-the-box styling solution. It helps you deliver your own, tailor-made tool. It is built on the top of transformed (3.8 kB, 1.5 kB compressed) which gives you great customization options to suit your own needs.

Value maps

You can assign value maps to any CSS or custom property your design system requires. Common use cases are colors, font sizes, and dimensions.

// Setup custom value maps
ccss.setProps([
[['max-width'], { container: 1220 }],
[['color'], { dark: '#333', light: '#eee' }],
[['font-size'], { small: 12, large: 16 }]
])
Live Editor
Result
max-width: 1220px;
color: #333;
&:hover {
color: #eee;
}

Plugins

Enhance the functionality of existing properties by supporting new value types and/or special rules.

Apply a general gutter rule to all your margin, padding, and grid-gap values. Keeping a consistent spacing of one key to a good design system. The gutter plugin helps you maintain a multiply of a pre-defined unit. Default: 5px

Live Editor
Result
padding: 5px;
margin: 5px 10px 15px 20px;
grid-gap: 20px;

Custom properties

Add your own custom properties to share, compose, re-use styles, and design tokens. Create amazing new features living right inside your CSS.

Using the keyframes prop you can add animation keyframes without the hassle and worrying about the naming. The generated names with the same values are cached to make them reusable.

Animated text

Live Editor
Result
animation: 3s infinite;
animation-name: a2;
@keyframes a2 {
from {
color: #000;
}
to {
color: #fff;
}
}

Shorthands

Work less do more! CCSS comes with shorthands for all CSS properties. Both Styled System and Tailwind CSS are coming with some shorthands out of the box. CCSS gives you the ability to use shorthands for both property names and/or values. Mix to your liking for rapid development.

Live Editor
Result
padding: 5px;
margin: 10px;
flex: 1;
align-items: center;
Live Editor
Result
position: relative;
align-items: center;

Plug n' Play

Use CCSS in any existing codebase where you can apply CSS string or Style object in JS. No matter what unit system (em, rem, px, etc.) you use, CCSS supports any unit you need.

You may introduce design tokens to a monolithic codebase using multiple styling solutions.

import styled from 'styled-components'
const MyComponent = styled.div`
${ccss({
width: 'site-container',
color: 'dark',
icon: 'rocket'
})}
`
import jss from 'jss'
const styles = {
button: ccss({
color: 'dark',
':hover': {
color: 'light'
}
})
}
const { classes } = jss.createStyleSheet(styles).attach()
document.body.innerHTML = `
<button class="${classes.button}">Button</button>
`

Performance

CSS-in-JS by default is a trade-off on performance, no matter which library you choose. Compiling CSS dynamically at runtime will always have its costs.

During the development of CCSS strict decisions and various micro-optimizations have been made to ensure it won't affect performance seriously. The included features are limited to maintain speed and simplicity.

Another area kept in mind is static extraction. Using @you-eye/babel-plugin-react you're able to static (and even dynamic) extract your Ui components, and replace them with native DOM elements with CSS classes in your production bundle.