jayfate/css2json

Converts CSS to JSON and back.

CSS-JSON Converter for JavaScript

Table of Contents generated with DocToc

• About
• Installation
  • NPM
• Usage
  • JavaScript / Typescript
  • npm run / CLI
• Sample
  • JSON
  • CSS

About

CSS-JSON Converter for JavaScript
Converts CSS to JSON and back.
Version 3.0.0

Released under the MIT license.

Installation

NPM

npm install cssjson

Usage

JavaScript / Typescript

import { toCSS, toJSON } from 'cssjson';

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

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

npm run / CLI

To use CSSJSON from your command-line interface or with npm scripts there is cssjson-cli.

$ cssjson input_file [--to-css] [--output|-o output_file]

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