Basic usage

Vanilla CCSS

CCSS on its own will convert your style object into CSS string and that's all. It's not a complete styling solution, and it doesn't want to be. It is simply a basic tool that you can use in your own scenarios.

Live Editor
Result
display: flex;
padding: 10px;

You do not need to use short names, all properties are, supported using their long names as well.

Live Editor
Result
display: flex;
padding: 10px;

CCSS can be used with templating and/or native inline styling:

const styles = ccss({
display: 'flex',
padding: 2
})
domElement.innerHTML = `
<div style="${styles}">Content</div>
`

Or you can compose it within your existing CSS-in-JS solution, the same way as styled-system:

const MyContent = styled.div`
${ccss({
display: 'flex',
padding: 2
})}
`

Styled CCSS

Using the @cryptic-css/styled package you can use CCSS in a much more comfortable way. It is based on styled-components, but you don't need to use it in its original way.

There are 3 ways to apply styles using it.

<Ui> component (most preferred)

The Ui component is the most convenient way. It is a component which is supporting CCSS using React props.

Only this way it is currently supported by static extraction, that's why it's the most preferred way.

import { Ui } from '@cryptic-css/styled'
Live Editor
Result
Logo

You can see that both long, light and short names work. In one of our projects we agreed in using long names, but we still utilize the Babel plugin to shorten these props for production code. For some personal projects we're using short names, and it we quickly got comfortable with it.

Read more details in its documentation.

ccssd helper

A function used to create prepared components using the "object API".

import { Ui } from '@cryptic-css/styled'
Live Editor
Result
My Wrapper

However, it's more preferred to simply create a component using <Ui>. It'll allow to be statically extract its CSS while the helper method isn't supported yet. (And anyway it's the same at the end.)

Live Editor
Result
My Wrapper

You can see that I was able to pass CCSS prop (width) to the prepared component. This is also true for the components made using ccssd. Allowing passing props enables users adjust styles of already encapsulated components.