https://github.com/semibran/css-string
:evergreen_tree: create CSS-compatible strings from object trees
https://github.com/semibran/css-string
css stringify tree virtual-dom
Last synced: 6 months ago
JSON representation
:evergreen_tree: create CSS-compatible strings from object trees
- Host: GitHub
- URL: https://github.com/semibran/css-string
- Owner: semibran
- License: mit
- Created: 2017-07-20T03:33:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-12-07T08:14:22.000Z (about 5 years ago)
- Last Synced: 2024-04-25T20:20:47.774Z (almost 2 years ago)
- Topics: css, stringify, tree, virtual-dom
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# css-string
> create CSS-compatible strings from object trees
```js
let style = document.createElement("style")
document.head.appendChild(style)
style.innerText = stringify({
body: {
display: "flex",
height: "100%"
}
})
```
This package exposes the `stringify` function, which creates CSS-compatible strings from object trees. The resulting strings can be used directly in dynamic stylesheets as well as [`HTMLElement.style`][HTMLElement.style].
## usage
[![npm badge]][npm package]
```js
> stringify({ color: "red" })
"color:red"
```
Use strings as keys to represent complex selectors, property names, and values.
```js
> stringify({
"*": {
"margin": 0,
"padding": 0,
"box-sizing": "border-box"
}
})
"*{margin:0;padding:0;box-sizing:border-box}"
```
If a declaration has an object as its value, it will be treated as a rule with its own selector and declarations.
```js
> stringify({
nav: {
display: "flex",
a: {
color: "inherit"
}
}
})
"nav{display:flex;a{color:inherit}}"
```
## license
[MIT](https://opensource.org/licenses/MIT) © [Brandon Semilla](https://git.io/semibran)
[npm package]: https://www.npmjs.com/package/css-string
[npm badge]: https://nodei.co/npm/css-string.png?mini
[HTMLElement.style]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style