css-convert-json

css-convert-json Typescript

Table of Contents generated with DocToc

• About
• Installation
• Usage
  • JavaScript / Typescript
• Sample
  • JSON
  • CSS

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);
}