cssparser.js

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

Description

• License: MIT license - http://www.opensource.org/licenses/mit-license.php
• Author : Chang W. Doh

Demo

• http://cwdoh.github.io/cssparser.js/demo/CSS_stringify.html

Dependency

Just want to use cssparser.js? Nothing needed.

If want generating parser, install 'jison' before it.

• Jison - http://jison.org

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 modulevarcssparser=require("cssparser");// create new instance of Parservarparser=newcssparser.Parser();// parsevarast=parser.parse(raw)// getting jsonvarjson=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';
@importurl("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.