0.0.2 • Published 3 years ago
@unicss/core v0.0.2
@unicss/core
A tiny, themeable, and framework agnostic CSS-in-JS solution.
Installation
Use npm or yarn for adding this package to your project:
$ yarn add @unicss/core
Usage
import {css} from "@unicss/core";
const button = css({
backgroundColor: "#2271b1",
borderRadius: "0.5rem",
color: "white",
padding: "0.5rem 1rem",
"&:hover": {
cursor: "pointer",
},
});
document.getElementById("button").classList.add(button);
API
css(styles)
A function to generate a classname from the specified styles object.
import {css} from "@unicss/core";
const name = css({
color: "red",
fontWeight: "bold",
"&:hover": {
color: "blue",
cursor: "pointer",
},
});
globalCss(styles)
A function to convert the speicifed styles object to global styles. Useful for registering reset styles or font faces.
import {globalCss} from "@unicss/core";
globalCss({
body: {
backgroundColor: "#fff",
color: "#000",
},
a: {
textDecoration: "none",
},
});
keyframes(obj)
Generate global animations from the specified keyframes configuration object. This function returns an unique animation identifier that can be used in an animation
CSS property:
import {keyframes, css} from "@unicss/core";
const scale = keyframes({
from: {
transform: "scale(1)",
},
to: {
transform: "scale(1.5)",
},
});
const image = css({
height: "500px",
width: "500px",
"&:hover": {
animation: `${scale} 1s ease`,
},
});
document.getElementById("image").classList.add(image);
createUni(config)
Use this function to generate a new instance of UniCSS if you need to provide your own theme.
import {createUni} from "@unicss/core";
const {css, keyframes, globalCss} = createUni({
theme: {
colors: {
primary: colors.mint["500"],
secondary: colors.blue["500"],
},
},
// ...other configuration
});
classNames(obj)
A tiny utility for conditionally joining class names.
import {classNames} from "@unicss/core";
const names = classNames({
"foo": true,
"bar": trueCondition === true,
"baz": null,
});
// names === "foo bar"