semibran / css-string

:evergreen_tree: create CSS-compatible strings from object trees

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

> 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}}"

license

MIT © Brandon Semilla