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.
You can assign value maps to any CSS or custom property your design system requires. Common use cases are colors, font sizes, and dimensions.
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:
Add support for margin and padding to accept ratio value. The aspect-ratio CSS property is around the corner now, but before the so-called padding hack was used. Using this plugin you can avoid any manual calculation you might need and just provide ratio directly.
Let's create a plugin that adds support to resolve an object path. This is a popular solution among other libraries. In this example, we will add such support to the
Add your own custom properties to share, compose, re-use styles, and design tokens. Create amazing new features living right inside your CSS.
- Media Query
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.
mediaQuery (shorthands: mq, at) property adds support for @w11r/use-breakpoint's breakpoint mechanism. It's an array-based solution to maintain the order you want for specificity. It comes with built-in, customizable breakpoints for various screen sizes and common queries.
scroll property can help you to easily make a container scrollable. It's a common use-case nowadays on devices to apply horizontal scroll to a container of items without any scrollbars.
This code will add a property named
icon. It has 2 parts: a value map that will resolve the icon's character code, and a handler that will emit the necessary CSS.
In this example, we're using UTF-8 icons, but the method can work with icon fonts or any other way, it's up to you to define how it works.
I always eat a before I ride my !
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.
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.
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.