everycss-parser

Introduction

Everycss-parser is a liberal CSS parser written in javascript. It follows the css syntaxe but takes some liberties allowing:

• nested rules and/or at-rules
• declarations out of rules
• nonexistent properties, selectors, at-rules,…
• unexpected characters, when possible

Features

• turns "css" into standard javascript object descriptor
• different level of precision for values
• different level of precision for selectors

Getting started

Installation

Globally:

$ npm install everycss-parser -g

In your project:

$ npm install everycss-parser --save

In your package.json:

dependencies: {
  "everycss-parser": "*"
}

Usage

var
  fs      = require('fs'),
  Parser  = require('everycss-parser');

  fs.readFile('some.css', 'utf-8', function (error, data) {
    if (error) {
      return console.log(error);
    }

    // return object representation of `some.css`
    (new Parser()).parse(data);
  });

Documentation

Everycss outputs a plain object representing your css. This object is the root of your css and contains all top level elements. The elements are:

• at-rule
• color
• comment
• declaration
• function
• identifier
• number
• operator
• parenthesis
• root
• rule
• selector
• string
• value

Blocks: root, rule and at-rule

Root, rules and at-rules share the same object structure:

attribute	value	Description
type	'root', 'rule' or 'at-rule'	type of the block
selector	selector or null	selectors of the block
atKeyword	string or null	at-rule keyword without leading '@'
opened	bool	if the block has brackets (eg: @import 'some.css'; is not)
content	array	content of the block

Declaration

attribute	value	Description
type	'declaration'
property	string	type of the block
value	value	values for the property

Collections: value, selector, parenthesis

Values, selectors and parenthesis share the same object structure:

attribute	value	Description
type	'value', 'selector' or 'parenthesis'	type of the block
content	string or array	content of the selection

Collections content could be represented in four ways according to a given precision. Values and parenthesis use the valuePrecision attribute and selectors use the selectorPrecision one.

parser = new Parser();
parser.valuePrecision     = 1;
parser.selectorPrecision  = 1;

Precision: 0 (default)

Collection content is represented as a string like:

'foo 1px+2px, bar 3px'

Precision: 1

Each comma separated values is represented as an element of the collection's content array:

[
  'foo 1px+2px',
  'bar 3px'
]

Precision: 2

Like for precision 1 but each comma separated values is represented as an array of space separated values:

[
  ['foo', '1px+2px'],
  ['bar', '3px']
]

Precision: 3

Like for precision 2 but each space separated values is represented as an array of tokens:

[
  [
    [
      {
      "type": "identifier",
      "value": "foo"
      }
    ],
    [
      {
      "type": "number",
      "unit": "px",
      "value": 1
      },
      {
      "type": "operator",
      "value": "+"
      },
      {
      "type": "number",
      "unit": "px",
      "value": 2
      }
    ]
  ],
  [
    [
      {
      "type": "identifier",
      "value": "bar"
      }
    ],
    [
      {
      "type": "number",
      "unit": "px",
      "value": 3
      }
    ]
  ]
]

Function

attribute	value	Description
type	'function'
keyword	string	function name
arguments	value	arguments passed to the function

Number

attribute	value	Description
type	'number'
unit	string or null	unit of the number
value	float	value of the number

String

attribute	value	Description
type	'identifier'
quote	''' or '"'	the quote used
value	string	the unquoted string

Color

3 or 6 chars Hex colors

attribute	value	Description
type	'color'
value	string	3 or 6 chars hex value without leading '#'

Identifier

Identifiers are unquoted words like center or auto.

attribute	value	Description
type	'identifier'
value	string	the identifier

Comment

Everycss parses comment and inline comment. Inline comments are not allowed in CSS but are oftenly used by processors.

attribute	value	Description
type	'comment'
inline	bool	If the comment is inline (//) or not (/* */)
value	string	the comment (/*, */ and // are preserved)

Operator

Are operators are charIdentifiers are unquoted words like center or auto.

attribute	value	Description
type	'identifier'
value	string	the identifier