cssparser.js is a parser that generates json matched with source css structure.
- License: MIT license - http://www.opensource.org/licenses/mit-license.php
- Author : Chang W. Doh
Just want to use cssparser.js? Nothing needed.
If want generating parser, install 'jison' before it.
- Jison - http://jison.org
First of all, you should install cssparser.
$ npm install cssparseror
$ npm install cssparser -gThen execute and you can generate JSON file from command-line.
$ cssparser cssFileor
$ cssparser cssFile -o output_fileYou can generate javascript object from your javascript module.
// getting parser module
var cssparser = require("cssparser");
// create new instance of Parser
var parser = new cssparser.Parser();
// parse
var ast = parser.parse(raw)
// getting json
var json = ast.toJSON(type)$ git clone https://github.com/cwdoh/cssparser.js.git
$ npm install$ npm run buildThere are 3 types of JSON format.
- simple - most simple.
- simply consist of just key & value.
- deep - more detailed then simple mode.
- this includes more informations of selector, terms, expression, queries, …
- atomic - most detailed. 'atomic' JSON has all pieces of each key & values in CSS.
- e.g. length has numeric value & its unit like "100px" -> { "value": 100, "unit": "px" }
Example is tested with rulesets of http://css3please.com
cssparser example/test.css --console -i 4@charset 'utf-8';
@import url("fineprint.css") print;
@media screen {
* {
position: absolute;
}
}
.footer {
position: fixed;
bottom: 0 !important;
width: 1rem;
}[
{
"type": "@charset",
"value": "'utf-8'"
},
{
"type": "@import",
"value": "url(\"fineprint.css\")",
"mediaQuery": [
"print"
]
},
{
"type": "@media",
"value": [
"screen"
],
"nestedRules": [
{
"type": "rule",
"selectors": [
"*"
],
"declarations": {
"position": "absolute"
}
}
]
},
{
"type": "rule",
"selectors": [
".footer"
],
"declarations": {
"position": "fixed",
"bottom": "0 !important",
"width": "1rem"
}
}
]{
"type": "STYLESHEET",
"value": [
{
"type": "AT_RULE",
"rule": "charset",
"value": "'utf-8'"
},
{
"type": "AT_RULE",
"rule": "import",
"value": "url(\"fineprint.css\")",
"nextExpression": [
"print"
]
},
{
"type": "AT_RULE",
"rule": "media",
"value": [
"screen"
],
"nestedRules": [
{
"type": "QUALIFIED_RULE",
"value": {
"type": "DECLARATION_LIST",
"value": [
{
"type": "DECLARATION",
"property": "position",
"value": "absolute"
}
]
},
"selectors": [
"*"
]
}
]
},
{
"type": "QUALIFIED_RULE",
"value": {
"type": "DECLARATION_LIST",
"value": [
{
"type": "DECLARATION",
"property": "position",
"value": "fixed"
},
{
"type": "DECLARATION",
"property": "bottom",
"value": 0,
"important": true
},
{
"type": "DECLARATION",
"property": "width",
"value": "1rem"
}
]
},
"selectors": [
".footer"
]
}
]
}{
"type": "STYLESHEET",
"value": [
{
"type": "AT_RULE",
"rule": {
"type": "ID",
"value": "charset",
"prefix": "@"
},
"value": {
"type": "STRING",
"value": "'utf-8'"
}
},
{
"type": "AT_RULE",
"rule": {
"type": "ID",
"value": "import",
"prefix": "@"
},
"value": {
"type": "URL",
"name": {
"type": "ID",
"value": "url"
},
"value": "\"fineprint.css\""
},
"nextExpression": {
"type": "MEDIA_QUERY_LIST",
"value": [
{
"type": "MEDIA_QUERY",
"mediaType": {
"type": "ID",
"value": "print"
}
}
]
}
},
{
"type": "AT_RULE",
"rule": {
"type": "ID",
"value": "media",
"prefix": "@"
},
"value": {
"type": "MEDIA_QUERY_LIST",
"value": [
{
"type": "MEDIA_QUERY",
"mediaType": {
"type": "ID",
"value": "screen"
}
}
]
},
"nestedRules": [
{
"type": "QUALIFIED_RULE",
"value": {
"type": "DECLARATION_LIST",
"value": [
{
"type": "DECLARATION",
"property": {
"type": "ID",
"value": "position"
},
"value": {
"type": "ID",
"value": "absolute"
}
}
]
},
"selectors": {
"type": "SELECTOR_LIST",
"value": [
{
"type": "UNIVERSAL_SELECTOR",
"value": "*"
}
]
}
}
]
},
{
"type": "QUALIFIED_RULE",
"value": {
"type": "DECLARATION_LIST",
"value": [
{
"type": "DECLARATION",
"property": {
"type": "ID",
"value": "position"
},
"value": {
"type": "ID",
"value": "fixed"
}
},
{
"type": "DECLARATION",
"property": {
"type": "ID",
"value": "bottom"
},
"value": {
"type": "NUMBER",
"value": 0
},
"important": true
},
{
"type": "DECLARATION",
"property": {
"type": "ID",
"value": "width"
},
"value": {
"type": "DIMENSION",
"value": 1,
"unit": "rem"
}
}
]
},
"selectors": {
"type": "SELECTOR_LIST",
"value": [
{
"type": "CLASS_SELECTOR",
"value": ".footer"
}
]
}
}
]
}- 0.9.4 - October 10th, 2017
- Fixed missing space after attribute selector by #23, thanks @kauffecup
- 0.9.3 - July 20th, 2017
- Fixed producing undefined for expression when using simple mode.
- Supported IE hacks including
_PROPERTYpattern.
- 0.9.2 - March 17th, 2017
- Now supports beautify delimiter option for simple & deep type.
- Showing version will be run lower-case 'v' instead 'V'.
- Fixed missing keyframe name and added type & level descriptions for simple type.
- Fixed EOF error case.
- Added '-b' option for beautify delimiters.
- 0.9.1 - March 8th, 2017
- Added 'rule' type on the css style node when simple mode.
- 0.9.0 - March 5th, 2017
- Fully rewrited parser.
- Supports three modes such as simple, deep, atomic.
- Also, simple mode produced different results instead of the format of previous version.
- 0.2.2 - July 27th, 2013
- Add ratio type expression with '/'. thanks to Mohsen Heydari.
- 0.2.1 - May 21st, 2013
- Update grunt, dependencies, cli options & output message.
- Add 'keyframe' type at child node of keyframes.
- 0.2.0 - May 20th, 2013
- Initial release of cssparser.js.