Travis Build Status - Master Travis Build Status - Develop npm downloads in the last month npm total downloads

cssparser.js

cssparser.js is a parser that generates json matched with source css structure.

Description

Demo

Dependency

Just want to use cssparser.js? Nothing needed.

If want generating parser, install ‘jison’ before it.

Usage

from Command-line

First of all, you should install cssparser.

$ npm install cssparser

or

$ npm install cssparser -g

Then execute and you can generate JSON file from command-line.

$ cssparser cssFile

or

$ cssparser cssFile -o output_file

from CommonJS Module

You 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)

Generating parser from source

Getting jison & source

$ git clone https://github.com/cwdoh/cssparser.js.git
$ npm install

Generating parser from source

$ npm run build

JSON Structure

There are 3 types of JSON format.

Example

Example is tested with rulesets of http://css3please.com

cssparser example/test.css --console -i 4

Input

@charset 'utf-8';
@import url("fineprint.css") print;
@media screen {
    * {
       position: absolute;
     }
}
 
.footer {
    position: fixed;
    bottom: 0 !important;
    width: 1rem;
}

JSON Output

Type ‘simple’

[
    {
        "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 ‘deep’

{
    "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 ‘atomic’

{
    "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"
                    }
                ]
            }
        }
    ]
}

Change log