everycss-parser v0.1.0

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:

Declaration

Collections: value, selector, parenthesis

Values, selectors and parenthesis share the same object structure:

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

Number

String

Color

3 or 6 chars Hex colors

Identifier

Identifiers are unquoted words like center or auto.

Comment

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

Operator

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