Converts CSS to JSON and back.
npm install css-convert-json
Table of Contents generated with DocToc
- About
- Installation
- Usage
- JavaScript / Typescript
- Sample
- JSON
- CSS
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.
``bash`
npm i css-convert-json
`typescript
import { toCSS, toJSON } from 'css-convert-json';
// To JSON
const json = toJSON(cssString);
// To CSS
const css = toCSS(jsonObject);
`
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);
}