BauCss

A CSS in JS library in less than 33 lines of code.

BauCss exports 3 functions: css, keyframes, and createGlobalStyles.

This API is the same as other popular css-in-js libraries such as styled-components, emotion and goober.

BauCss is framework agnostic and integrates with Bau, React, Preact, SolidJs etc ...

Bundle size

Let's compare the bundle sizes thanks to bundlephobia:

The difference is between 3 times and 26 times leaner.

Workflow

Install the dependencies:

npm install @grucloud/bau-css

Import @grucloud/bau-css and instantiate the library:

import BauCss from "@grucloud/bau-css";

const { css, keyframes, createGlobalStyles } = BauCss();

The following example demonstrates how to use the css and keyframes functions with the Bau reactive library.

import Bau from "@grucloud/bau";
import BauCss from "@grucloud/bau-css";

const bauCss = BauCss();
const { css, keyframes } = bauCss;

const bau = Bau({});
const { p, h1, div } = bau.tags;

const color = "red";
const backgroundColor = "teal";

const rotate = keyframes`
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
`;

createGlobalStyles`
:root {
  background-color: ${backgroundColor};
  font-family: Open-Sans, Helvetica, Sans-Serif;
}
`;

const App = () =>
  div(
    {
      class: css`
        border: ${color} dotted 1px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        & h1 {
          &:hover {
            animation: ${rotate} 4s infinite;
          }
        }
      `,
    },
    h1("Hello BauCss"),
    p("Hover over the title to start the animation")
  );

document.getElementById("app").replaceChildren(App({}));

Notice that the new nested css feature is being leveraged in this library. Not only it makes the bundle size more than 20 times smaller, it is also significantly faster at runtime. Under the hood, other CSS in JS libraries performs the following steps:

• 1 Build the css string through the template literal, a.k.a the css content inside a backtick.
• 2 Parses the given css to produce an abstract syntax tree (AST), often with regular expression which are notoriously slow and riddled with bugs.
• 3 Transforms the AST from nested css syntax into the old css way.
• 4 Stringified the css object model.
• 5 Infer a class name/keyframes by hashing the stringified css.
• 6 Add a style dom element in the DOM.

BauCss skips steps 2, 3 and 4 as no longer needed because modern browers natively support nested CSS.

Examples

bau-css integrates seamlessly with UI libraries, here is a list of examples:

• React with bau-css
• Bau with bau-css
• Vanilla JS with bau-css

Contribution

Bugs and suggestion can be discussed on its GitHub project page.