Orverview

What is Typed cssx?

Zero Runtime and RSC

It's a CSS in JS library with a simple syntax.
Its characteristic feature is the powerful typed that enables autocomplete during development.

It is exported as static CSS at production build time.
Since it is embedded in the build process, It can be cached by the browser and by CDNs.

You can preview smoothly using the "use client", and you can also preview the `Server Component` by using the PreviewServerCSS API.

Hard Type and Hot Reload

It is properties is typed and does not allow typos as much as possible.
Since objects are attached to dynamic css in development mode, there is no need to reload during development.

Production environment

css exported by the compiler as static CSS Modules are split into components and further optimized by the framework.

Header.tsx

import cssx from 'typedcssx';
 
export const Header = () => {
return (
  <header className={css.header_main}>
    <nav className={cssNav}>
      <a>home</a>
      <a>about</a>
    </nav>
  </header>
)};
 
const css = cssx.create({
  header_main: {
    position: 'absolute',
    top: 0,
  },
});
 
const cssNav = cssx.set({
  '& a':{
    fontSize: 16,
    color: '#333',
  },
});

Inspirations

Although this library is a fairly latecomer to the CSS in JS world, it is heavily by these and other earlier libraries.

Styled-JSX: Very stable CSS in JS, template literals were easy to write with VSC's autocompletion.
Emotion: I found writing template literals easy. This was the standard CSS in JS in React.
React Native: cssheet Class is impeccable. It's standard in Typed CSS is inspired by React Native.
Vue.js: Scoped CSS in Vue.js excels in simplicity and directness.
Vanilla Extract: It is inspired by vanilla extract's concept of object, property types.
Linaria: Typed CSS was also inspired by the concept of static CSS extraction.

There integrated the standout features from each of these libraries into Typed CSS X. This is our expression of gratitude to these exceptional open-source projects and our contribution to the community.

What's Next?

Where good devlopment experience and simple is the Typed CSSX.
Dive into class functions or explore Pseudo docs to unleash its full potential.

Welcome to Typed CSSX. We can't wait to see what you'll create.