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

$3

``bash
npm install cssjson
`

Usage

$3

`typescript

import { toCSS, toJSON } from 'cssjson';

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

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

$3

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

$3

`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": {}
}
`

$3

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