@hopes/core

A framework-agnostic version of hopes

Usage

Basic styling

The css function creates a styling function that returns a CSS className that can be used to style your components.

It's features are:

• [x] Variants support
• [ ] Compound Variants support
• [X] Unit conversion (only for pixels at the moment)
• [X] Custom selectors

import {css} from "@hopes/core"

const button = css({
    // Your Stylings
    backgroundColor: "red"
    color: "black",
    
    // Custom selectors
    "&::before": {
        content: "",
        // ...
    }

    // Variants
    variants: {
        background: {
            blue: {
                backgroundColor: "blue"
            },
            violet: {
                backgroundColor: "violet"
            }
        }
    }
})

// ...

<div className={button()}>...</div>
<div className={button({ background: "blue" })}>...</div>
<div className={button({ background: "violet" })}>...</div>