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...
- Simple
- Custom Props and Values
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.
Plugins
Enhance the functionality of existing properties by supporting new value types and/or special rules.
- Gutter
- Ratio
- Custom
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
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 background-color
property.
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.
- Keyframes
- Media Query
- Scroll
- Custom
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
The 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.
The 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 !
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.
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.
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.