Asarina

Zero-runtime CSS in JS library.

Features

• Zero-runtime, as styles are extracted at build time.
• Co-locate styles with components.
• UI framework agnostic.
• Typed by csstype.
• Supports nesting selectors and at-rules.
• Supports @keyframes.

Install

npm/pnpm/yarn install asarina

Setup

Asarina is built on wyw-in-js. Check out the WyW-in-JS's guide.

Usage

import { style, globalStyle, keyframes } from "asarina";

const foo = style({
  color: "red",
  "&:hover": {
    color: "green",
  },
  '&[data-bar="true"]': {
    color: "blue",
  },
});

export function Foo(props: { bar?: boolean }) {
  return (
    <div className={foo} data-bar={props.bar}>
      ...
    </div>
  );
}