All Projects → cwdoh → Cssparser.js

cwdoh / Cssparser.js

Licence: mit
cssparser.js is a parser that generate json from css with matched orders & structures.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Cssparser.js

Tomlplusplus
Header-only TOML config file parser and serializer for C++17 (and later!).
Stars: ✭ 403 (+560.66%)
Mutual labels:  json, parser
Himalaya
JavaScript HTML to JSON Parser
Stars: ✭ 758 (+1142.62%)
Mutual labels:  json, parser
Jsonparser
One of the fastest alternative JSON parser for Go that does not require schema
Stars: ✭ 4,323 (+6986.89%)
Mutual labels:  json, parser
Choetl
ETL Framework for .NET / c# (Parser / Writer for CSV, Flat, Xml, JSON, Key-Value, Parquet, Yaml, Avro formatted files)
Stars: ✭ 372 (+509.84%)
Mutual labels:  json, parser
Parson
Lightweight JSON library written in C.
Stars: ✭ 965 (+1481.97%)
Mutual labels:  json, parser
Stream Parser
⚡ PHP7 / Laravel Multi-format Streaming Parser
Stars: ✭ 391 (+540.98%)
Mutual labels:  json, parser
Body Parser
Node.js body parsing middleware
Stars: ✭ 4,962 (+8034.43%)
Mutual labels:  json, parser
Ojg
Optimized JSON for Go
Stars: ✭ 281 (+360.66%)
Mutual labels:  json, parser
Xml Js
Converter utility between XML text and Javascript object / JSON text.
Stars: ✭ 874 (+1332.79%)
Mutual labels:  json, parser
Jkt
Simple helper to parse JSON based on independent schema
Stars: ✭ 22 (-63.93%)
Mutual labels:  json, parser
Csv Parser
A modern C++ library for reading, writing, and analyzing CSV (and similar) files.
Stars: ✭ 359 (+488.52%)
Mutual labels:  json, parser
Framework
IONDV. Framework is a high level framework for enterprise web applications development.
Stars: ✭ 54 (-11.48%)
Mutual labels:  json, npm
Bad json parsers
Exposing problems in json parsers of several programming languages.
Stars: ✭ 351 (+475.41%)
Mutual labels:  json, parser
Json Rust
JSON implementation in Rust
Stars: ✭ 395 (+547.54%)
Mutual labels:  json, parser
Length.js
📏 JavaScript library for length units conversion.
Stars: ✭ 292 (+378.69%)
Mutual labels:  parser, npm
Crossplane
Quick and reliable way to convert NGINX configurations into JSON and back.
Stars: ✭ 407 (+567.21%)
Mutual labels:  json, parser
Rdflib Jsonld
JSON-LD parser and serializer plugins for RDFLib (Python 2.6+)
Stars: ✭ 250 (+309.84%)
Mutual labels:  json, parser
C Sharp Stack Only Json Parser
Stack only json deserialization using generators and the System.Text.Json library
Stars: ✭ 254 (+316.39%)
Mutual labels:  json, parser
Dasel
Query, update and convert data structures from the command line. Comparable to jq/yq but supports JSON, TOML, YAML, XML and CSV with zero runtime dependencies.
Stars: ✭ 759 (+1144.26%)
Mutual labels:  json, parser
Fast Xml Parser
Validate XML, Parse XML to JS/JSON and vise versa, or parse XML to Nimn rapidly without C/C++ based libraries and no callback
Stars: ✭ 1,021 (+1573.77%)
Mutual labels:  json, parser

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.

  • 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

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

  • 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 _PROPERTY pattern.
  • 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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].