108 lines
2.2 KiB
Markdown
108 lines
2.2 KiB
Markdown
# @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**:
|
|
|
|
```bash
|
|
$ npm install --save @siimple/core
|
|
```
|
|
|
|
## API
|
|
|
|
### css(config)
|
|
|
|
Given a [configuration object](https://www.siimple.xyz/configuration), 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;
|
|
}
|
|
```
|
|
|
|
### 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.
|
|
|
|
```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",
|
|
},
|
|
},
|
|
};
|
|
```
|
|
|
|
### 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`.
|
|
|
|
```js
|
|
import {mergeConfig} from "@siimple/core";
|
|
|
|
const config = mergeConfig({ /* source */}, {/* target */});
|
|
```
|
|
|
|
|
|
## License
|
|
|
|
[MIT License](https://github.com/jmjuanes/siimple/blob/main/LICENSE).
|