postcss-selector-parser

Parsing and transforming selectors

This feature allows for the parsing and transformation of CSS selectors. In the provided code sample, all 'h1' tags in a selector are changed to 'h2' tags.

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');

Extracting classes from selectors

This feature demonstrates how to extract class names from a selector. The code sample extracts 'class1' and 'class2' from the selector string '.class1.class2'.

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');

Working with pseudo classes

This feature focuses on manipulating pseudo classes within selectors. In the example, ':hover' pseudo classes are replaced with ':focus'.

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');