koss

KOSS - A performant and flexible CSS-in-JS library.

Quick Start

Install

npm i -S koss

Usage

import { CSSManager } from "koss";

// Create a custom theme.
const theme = {
    isDarkTheme: true,
    accent: "hsla(250, 50%, 50%)",
    foreground: "#fff",
    background: "#333",
};
// Create a cssManager instance.
const cssManager = new CSSManager(theme);

// feat: Object style.
const className = cssManager.addStyle({ color: "yellow", fontSize: 12 });

// feat: Multiple key styles.
const classNames = cssManager.addStyles({
    app: {
        // feat: Functional value support.
        color: theme => theme.isDarkTheme ? "#fff" : "#1a1a1a",
        // feat: Pseudo selector.
        "&:hover": {
            opacity: .75,
        },
        // feat: Calculation selector.
        "& > header": {
            opacity: .5,
        },
        // feat: Media Query.
        "@media (min-width: 420px)": {
            background: "transparent"
        } as KoCSSProperties,
    },
});

// feat: Template string.
const colorCls = cssManager.css
`font-size: ${14}px;
color: red;
`;

// feat: Selector style support.
cssManager.addSelectorStyle("html", {
    background: "#282c34"
});

// feat: Keyframes support.
cssManager.addKeyframes("App-logo-spin", {
    from: {
        transform: "rotate(0deg)",
    },
    to: {
        transform: "rotate(360deg)"
    }
});