🌲 create CSS-compatible strings from object trees
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
license
package.json
readme.md

readme.md

css-string

create CSS-compatible strings from object trees

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.

usage

npm badge

> stringify({ color: "red" })
"color:red"

Use strings as keys to represent complex selectors, property names, and values.

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

> stringify({
    nav: {
      display: "flex",
      a: {
        color: "inherit"
      }
    }
  })
"nav{display:flex;a{color:inherit}}"