stylesith

This library is a simple, barebones CSS-in-JS library. The purpose is to allow scoped, grouped, inline CSS without the need for additional tooling or syntax. This library is intended for server-rendered JSX pages, but it’s possible to use it on client-side as well.

Basically, stylesith is just doing a regex-replace for the placeholders with a generated ID, and then concating all the created CSS created into one string. But this simple abstraction makes it on par feature-wise (I think) with the other complex CSS-in-JS libraries.

It is left as an exercise for the reader to ponder whether there’s a typo in the library name.

<div id={css.id} style={{ backgroundColor: color }}>
  <div className="label">{label}</div>
  {css`
    ## {
      display: flex;
      align-items: center;
      margin: 5px;
      border: 1px solid black;
    }
    ## .label {
      color: #0ff;
    }
  `}
</div>

Why not just use a plain CSS?

One reason is that CSS are global and not scoped by default. Making sure an id or className is unique and doesn’t clash accidentally is tedious and error-prone.

Another reason is lack of locality when using a separate CSS file. Grouping related and tightly-coupled together makes it easier to reason and modify code. A