@siimple/core

The core engine of the siimple CSS toolkit, that can be used for building your own themeable CSS framework.

Install

Install this package using npm:

$ npm install --save @siimple/core

API

css(config)

Given a configuration object, this method will generate a CSS string with the parsed styles in config.styles and using the provided theme in the configuration object.

import {css} from "@siimple/core";

const result = css({
    useBorderBox: false,
    useRootStyles: false,
    colors: {
        primary: "#34dde5",
    },
    styles: {
        button: {
            backgroundColor: "primary",
            color: "white",
            p: "2rem",
        },
    },
});

This will generate the following CSS string:

button {
    background-color: #34dde5;
    color: white;
    padding: 2rem;
}

mergeStyles(source, target)

Performs a deep merge of the styles defined in the target object into the source object, and returns the merged styles object.

import {mergeStyles} from "@siimple/core";

const sourceStyles = {
    ".button": {
        backgroundColor: "primary",
        color: "white",
        padding: "1.5rem",
        "&:hover": {
            backgroundColor: "secondary",
        },
    },
};

const mergedStyles = mergeStyles(sourceStyles, {
    ".button": {
        borderRadius: "0.5rem",
        "&:hover": {
            backgroundColor: "inherit",
            opacity: "0.5",
        },
    },
});

In the previous example the merged styles will be:

mergedStyles = {
    ".button": {
        backgroundColor: "primary",
        borderRadius: "0.5rem",
        color: "white",
        padding: "1.5rem",
        "&:hover": {
            backgroundColor: "inherit",
            opacity: "0.5",
        },
    },
};

mergeConfig(source, target)

This function will return a new configuration object as a result of performing a deep merge of the target configuration object into source.

import {mergeConfig} from "@siimple/core";

const config = mergeConfig({ /* source */}, {/* target */});

License

MIT License.

@siimple/preset-mustard

@siimple/modules

Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.1

Repository

Issues

Releases