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.
You do not need to use short names, all properties are, supported using their long names as well.
CCSS can be used with templating and/or native inline styling:
Or you can compose it within your existing CSS-in-JS solution, the same way as
@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)
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.
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.
A function used to create prepared components using the "object API".
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.)
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.