@grucloud/bau-css
v0.97.0
Published
A CSS in JS library in 35 lines of code
Downloads
816
Readme
BauCss
A CSS in JS library in less than 35 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:
Contribution
Bugs and suggestion can be discussed on its GitHub project page.