A CSS property value parser for use with PostCSS, following the same node, container, and traversal patterns as PostCSS.

As with PostCSS and postcss-selector-parser, this parser generates an Abstract Syntax Tree, (aka "AST") which allows for ease of traversal and granular inspection of each part of a property's value.

Yeah, it's a tad confusing. The Lesshint project needed a parser that would allow detailed inspection of property values to the same degree that PostCSS and postcss-selector-parser provided. This was especailly important for the Lesshint project, as it provides for very granular rules for linting LESS.

postcss-value-parser makes a lot of assumption about how values should be parsed and how the resulting AST should be organized. It was also fairly out of sync with the tokenzing and traversal patterns and convenience methods found in PostCSS and postcss-selector-parser.

So we needed an alternative, and drew upon all three projects to put together a value parser that met and exceeded our needs. The improvements include:

• Written using ES6
• Uses the same Gulp toolchain as PostCSS
• Doesn't strip characters; eg. parenthesis
• Full AST traversal
• AST traversal based on node type
• Simple methods to derive strings from the parsed result
• Follows PostCSS patterns for whitespace between Nodes
• Provides convenience properties for number units, colors, etc.

Please see the API Documentation for full usage information.

As with any NPM module, start with the install:

npm install postcss-values-parser

Using this parser is straightforward and doesn't require callbacks:

const parser = require('postcss-values-parser');
const ast = parser('#fff').parse();

let color = ast       // the Root node
              .first  // the Value node
              .first; // a Word node, containing the color value.

If your intent is to use this parser with a CSS-like language (eg. SASS, LESS) then you can instruct the parser not to adhere to strict CSS parsing rules as per the spec. For example, the parser will throw an error by default if calc parameters don't adhere to the spec.

We call this loose mode. To enable loose mode, pass an options object to the parser method:

const parser = require('postcss-values-parser');
const ast = parser('#fff', { loose: true }).parse();

This project was heavily influenced by postcss-selector-parser and utilized many patterns and logical constructs from the project.

Tests and some tokenizing techniques found in postcss-value-parser were used.