postcss-value-parser

What is postcss-value-parser?

The postcss-value-parser package is a tool to parse and manipulate values from CSS declarations. It can be used to analyze, transform, and understand the structure of CSS property values, making it easier to work with complex CSS strings in JavaScript.

What are postcss-value-parser's main functionalities?

Parsing CSS values

This feature allows you to parse a CSS value into an abstract syntax tree (AST), which can then be traversed or manipulated. The code sample demonstrates parsing a CSS rgba color value.

const valueParser = require('postcss-value-parser');
const parsed = valueParser('rgba(34, 12, 64, 0.3)');
console.log(parsed.nodes);

Walking through parsed values

This feature allows you to walk through the nodes of the parsed value and perform operations on each node. The code sample demonstrates walking through a parsed CSS declaration to find and log pixel values.

const valueParser = require('postcss-value-parser');
const parsed = valueParser('10px solid black');
valueParser.walk(parsed.nodes, (node) => {
  if (node.type === 'word' && /px$/.test(node.value)) {
    console.log(`Found pixel value: ${node.value}`);
  }
});

Stringifying parsed values

After manipulating the parsed AST, you can convert it back to a string. The code sample demonstrates modifying a scale function's Y value and then stringifying the modified AST back into a CSS value.

const valueParser = require('postcss-value-parser');
const parsed = valueParser('scale(1, 1.2)');
parsed.nodes[1].value = 1.5;
const stringified = valueParser.stringify(parsed);
console.log(stringified);

Other packages similar to postcss-value-parser

css-value-parser

css-value-parser is a package that offers similar functionality to postcss-value-parser. It can parse CSS property values into JavaScript objects. However, it may not have as rich an API for manipulation or walking through the parsed values as postcss-value-parser.

css-tree

css-tree is a more comprehensive CSS parser that can parse entire stylesheets and includes the ability to parse individual values. It differs from postcss-value-parser in that it is designed to handle full CSS parsing and AST manipulation, not just values.

README

postcss-value-parser

transforms css values into the tree

Usage

var parser = require('postcss-value-parser');

/*{
    nodes: [
      type: 'function',
      value: 'rgba',
      nodes: [
        { type: 'word', value: '233' },
        { type: 'div', value: ',', before: '', after: ' ' },
        { type: 'word', value: '45' },
        { type: 'div', value: ',', before: '', after: ' ' },
        { type: 'word', value: '66' },
        { type: 'div', value: ',', before: ' ', after: '' },
        { type: 'word', value: '.5' }
      ]
    ]
  }*/
parser('rgba(233, 45, 66 ,.5)')
  .walk('rgba', function (fn) {
    var color = fn.filter(function (node) {
      return node.type === 'word';
    }); // [233, 45, 66, .5]
    fn.type = 'word';
    fn.value = convertToHex(color);
  })
  .toString();
  // #E92D42

Prevent walking into function

parser('url(some url) 50% 50%')
  .walk(function (node) {
    // Your code

    if(node.type === 'functon' && node.value === 'url') {
      return false;
    }
  })
  .toString();

Node types

• { type: 'word', value: 'any' }
• { type: 'string', value: 'string', quote: '"' || '\'' }
• { type: 'div', value: '/' || ',', before: ' ', after: ' ' }
• { type: 'space', value: ' ' } space as a separator
• { type: 'function', value: 'name', nodes: [] }

API

var parser = require('postcss-value-parser');

parser.unit(value)

Returns parsed value

// .2rem
{
  number: '.2',
  unit: 'rem'
}

parser.stringify(nodes)

Stringifies node and array of nodes

var p = parser(value)

Returns parsed tree

p.nodes

Root nodes list

p.toString()

Stringify tree to the value

p.walk([name, ]cb[, reverse])

• name value filter
• cb(node, index, nodes)
• reverse walk to the deepest functions firstly

License

MIT © Bogdan Chadkin