Core module of the siimple css toolkit
npm install @siimple/coreThe core engine of the siimple CSS toolkit, that can be used for building your own themeable CSS framework.
Install this package using npm:
``bash`
$ npm install --save @siimple/core
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.
`js
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:
`css`
button {
background-color: #34dde5;
color: white;
padding: 2rem;
}
Performs a deep merge of the styles defined in the target object into the source object, and returns the merged styles object.
`js
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:
`js`
mergedStyles = {
".button": {
backgroundColor: "primary",
borderRadius: "0.5rem",
color: "white",
padding: "1.5rem",
"&:hover": {
backgroundColor: "inherit",
opacity: "0.5",
},
},
};
This function will return a new configuration object as a result of performing a deep merge of the target configuration object into source.
`js
import {mergeConfig} from "@siimple/core";
const config = mergeConfig({ / source /}, {/ target /});
``