postcss-selector-parser

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

const parser = require('postcss-selector-parser');
const transform = selectors => {
  selectors.walkTags(tag => {
    if (tag.value === 'h1') {
      tag.value = 'h2';
    }
  });
};
const transformed = parser(transform).processSync('h1.class');

const parser = require('postcss-selector-parser');
const extractClasses = selector => {
  const classes = [];
  parser(selectors => {
    selectors.walkClasses(classNode => {
      classes.push(classNode.value);
    });
  }).processSync(selector);
  return classes;
};
const classes = extractClasses('.class1.class2');

const parser = require('postcss-selector-parser');
const transformPseudo = selector => {
  return parser(selectors => {
    selectors.walkPseudos(pseudo => {
      if (pseudo.value === ':hover') {
        pseudo.value = ':focus';
      }
    });
  }).processSync(selector);
};
const result = transformPseudo('a:hover');

postcss-selector-parser

Selector parser with built in methods for working with selector strings.

Install

With npm do:

npm install postcss-selector-parser

Quick Start

const parser = require('postcss-selector-parser');
const transform = selectors => {
    selectors.walk(selector => {
        // do something with the selector
        console.log(String(selector))
    });
};

const transformed = parser(transform).processSync('h1, h2, h3');

To normalize selector whitespace:

const parser = require('postcss-selector-parser');
const normalized = parser().processSync('h1, h2, h3', {lossless: false});
// -> h1,h2,h3

Async support is provided through parser.process and will resolve a Promise with the resulting selector string.

API

Please see API.md.

Credits

• Huge thanks to Andrey Sitnik (@ai) for work on PostCSS which helped accelerate this module's development.

License

MIT

3.0.0

Breaking changes

• Some tweaks to the tokenizer/attribute selector parsing mean that whitespace locations might be slightly different to the 2.x code.
• Better attribute selector parsing with more validation; postcss-selector-parser no longer uses regular expressions to parse attribute selectors.
• Added an async API (thanks to @jacobp100); the default process API is now async, and the sync API is now accessed through processSync instead.
• process() and processSync() now return a string instead of the Processor instance.
• Tweaks handling of Less interpolation (thanks to @jwilsson).
• Removes support for Node 0.12.

Other changes

• ast() and astSync() methods have been added to the Processor. These return the Root node of the selectors after processing them.
• transform() and transformSync() methods have been added to the Processor. These return the value returned by the processor callback after processing the selectors.
• Set the parent when inserting a node (thanks to @chriseppstein).
• Correctly adjust indices when using insertBefore/insertAfter (thanks to @tivac).
• Fixes handling of namespaces with qualified tag selectors.
• process, ast and transform (and their sync variants) now accept a postcss rule node. When provided, better errors are generated and selector processing is automatically set back to the rule selector (unless the updateSelector option is set to false.)
• Now more memory efficient when tokenizing selectors.

Upgrade hints

The pattern of:

rule.selector = processor.process(rule.selector).result.toString();

is now:

processor.processSync(rule)