everycss-parser
Liberal CSS parser
Last updated 6 years ago by cahnory .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install everycss-parser 
SYNC missed versions from official npm registry.

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:

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

Current Tags

  • 0.1.0                                ...           latest (6 years ago)

1 Versions

  • 0.1.0                                ...           6 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2016 © taobao.org |