Features

Ammolite provides a set of features to make your life easier.

Type Safety

All the functions are type-safe by default.

Reused Key-Value

Key-value pairs defined in the style function are automatically reused after their initial declaration.

Input

Output (JS)

Output (CSS)

import { style } from "ammolite";

const container: string = style({
    display: "block", // first declaration
});

const child: string = style({
    display: "block", // CSS reused
});

Static But Dynamic

Even the style declarations are static, their values can be assigned dynamically.

import type { VariablesSetter } from "ammolite";
import type * as React from "react";

import { variables, setVariables, style } from "ammolite";

const Component = (): React.JSX.Element => {
    return (
        <div style={themeReverse.props}>
            <div className={container}>
                {"Theme reversed!"}
            </div>
        </div>
    );
};

type Colors = {
    blue: string;
}

const themeDark = "html[data-theme='dark']" as const;

const colors: Colors = variables({
    blue: {
        default: "#1591ea",
        [themeDark]: "#0c578c",
    },
});

const themeReverse: VariablesSetter = setVariables(colors, {
    blue: "#ea6e15",
});

const container: string = style({
    color: colors.blue,
});

Style Conflict Resolution

With the merge function, style conflicts are automatically resolved.

import { style, merge } from "ammolite";

const containerA: string = style({
    display: "block",
    backgroundColor: "red",
});

const containerB: string = style({
    backgroundColor: "blue",
    color: "white",
});

/**
 * display: block;
 * backgroundColor: blue;
 * color: white;
 */
const containerC: string = merge(containerA, containerB);

Fallback Value

Fallback values are supported by providing an array of values.

Input

Output (JS)

Output (CSS)

import { style } from "ammolite";

const container: string = style({
    display: ["flex", "grid"],
});

#Features

#Type Safety

#Reused Key-Value

#Static But Dynamic