CrypticCSS

A companion on the journey to your next CSS-in-JS and/or design system solution.

Yet another tool to handle CSS style objects but in particular ways.

[object Object]

What CCSS exactly is?

CCSS is a very much opinionated, low level utility to deal with CSS style objects. It's not an out of the box styling solution, instead it focuses on helping you deliver your own, custom tool. At the end it's basically an object transformer that generates its output based on different rules which are defined by you. However, we also created some ready to use tools built on top of CCSS.

CCSS is easy to extend, it's broke down to a very few principles which are helping you play with its results: props, maps and transformers.

[object Object]

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.

[object Object]

What CCSS means?

CrypticCSS. The initial source of the idea was using short names for all CSS properties and their values in a React props based environment, like d="b" instead of display="block".

There were 3 goals with this approach:

  • to be able to define styles in a single row of a component;
  • to achieve true CSS mangling to optimize file size;
  • to speed up development.
This makes our code look a bit... err... Cryptic, but it's optional to use short names.

Using the CCSS function

ccss({
    display: 'flex',
    width: '100%',
    backgroundColor: '#fff'
})
ccss({ d: 'f', w: '100%', bgc: '#fff' })

Using the @cryptic-css/styled

<Ui
    display="flex"
    width="100%"
    backgroundColor="#fff"
>
    My Content
</Ui>
<Ui d="f" w="100%" bgc="#fff">
    My Content
</Ui>
πŸ’…

@cryptic-css/styled

On the top of styled-components we released a solution to utilize CCSS. Using it there are multiple ways to apply styles. You can either use prepared components or the much more preferred* Ui component that's provided by the package.

<Ui
    display="flex"
    width="100%"
    backgroundColor="#fff"
>
    My Content
</Ui>
const View = ccssd({
    display: 'flex',
    width: '100%',
    backgroundColor: '#fff'
})

<View>My Content</View>
* the provided Babel plugin only supports static extraction of <Ui> components currently.
[object Object]

@cryptic-css/babel-plugin-styled

Using the provided (optional) Babel plugin you are able to automatically:
  • extract all non-computed values in a static CSS file;
  • mangle prop names for smaller production bundles;
  • convert <Ui> declarations to static HTML tags completely eliminating styled-components;
  • single character selectors for smaller CSS and JS output;
  • have an output based on Utility-first and AtomicCSS principles where you only have to ship code in your bundle what you actually use.
[object Object]

Static extraction

Using styled-components dynamically will always come with extra performance costs. CCSS is a completely dynamic approach, but it enables us apply some next level optimizations.

A highly oversimplified performance comparison between different solutions:
  • 🐒 Dynamic styled-components: slow
  • 🐒 CCSS + styled-components: slow
  • πŸ’ Static styled-components: normal
  • πŸ‡ CCSS + styled-components + Babel plugin: fast
On a production codebase we managed to save 800-1200ms in average on our initial rendering performance.
[object Object]

And there's more...

There are other tools and features helping your work. @cryptic-css/styled comes with βš›React-Native support out of the box, mostly thanks to styled-components.

CCSS does not only provide TypeScript types, but also helps you with an almost complete CSS reference using Doc comments. This is extremely useful, especially when using short names.

CrypticCSS - DocBlock
CrypticCSS - DocBlock
[object Object]

Try it out!