css-convert-json

Converts CSS to JSON and back.

Usage no npm install needed!

<script type="module">
  import cssConvertJson from 'https://cdn.skypack.dev/css-convert-json';
</script>

README

css-convert-json Typescript

Table of Contents generated with DocToc

About

Put simply... this tool will convert CSS to JSON and/or JSON to CSS.

This package allows for simple programmatic changes to CSS via editing JSON and writing back to CSS when required.

See the examples below for the JSON structure of the CSS.

Installation

npm i css-convert-json

Usage

JavaScript / Typescript


import { toCSS, toJSON } from 'css-convert-json';

// To JSON
const json = toJSON(cssString);

// To CSS
const css = toCSS(jsonObject);

Sample

See src/__tests__/toCSSandJSON.spec.ts

JSON

{
  "children": {
    "@media (max-width: 800px)": {
      "children": {
        "#main #comments": {
          "children": {},
          "attributes": {
            "margin": "0px",
            "width": "auto",
            "background": "red"
          }
        },
        "#main #buttons": {
          "children": {},
          "attributes": {
            "padding": "5px 10px",
            "color": "blue"
          }
        }
      },
      "attributes": {}
    },
    "#main #content": {
      "children": {},
      "attributes": {
        "margin": "0 7.6%",
        "width": "auto"
      }
    },
    "#nav-below": {
      "children": {},
      "attributes": {
        "border-bottom": "1px solid #ddd",
        "margin-bottom": "1.625em",
        "background-image": "url(http://www.example.com/images/im.jpg)"
      }
    }
  },
  "attributes": {}
}

CSS

@media (max-width: 800px) {
  #main #comments {
    margin: 0px;
    width: auto;
    background: red;
  }
  #main #buttons {
    padding: 5px 10px;
    color: blue;
  }
}
#main #content {
  margin: 0 7.6%;
  width: auto;
}
#nav-below {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1.625em;
  background-image: url(http://www.example.com/images/im.jpg);
}