@hopes/core
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

@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>

Package Sidebar

Install

npm i @hopes/core

Weekly Downloads

0

Version

1.1.2

License

MIT

Unpacked Size

118 kB

Total Files

29

Last publish

Collaborators

  • gustavo-dev