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 |