Postcss-query-ast NPM

postcss-query-ast

Query PostCSS AST with CSS selectors.

Supported selectors are:

Type selectors: rule, atrule, decl, comment
Universal selector: *
Attribute selectors: [attr=value], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr*=value]
Descendant combinator: rule decl
Child combinator: atrule > rule
Adjacent sibling combinator: rule + rule
General sibling combinator: rule ~ rule
Child pseudo classes (:first-child, :last-child, :nth-child, :nth-last-child, :only-child): rule:first-child
Type pseudo classes (:first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type, :only-of-type): rule:first-of-type
Empty nodes: rule:empty
Matches: :matches(rule, atrule)
Negation: :not(atrule)

In addition to standard selectors, there are also custom selectors:

Attribute selector with regular expression: [attr="/^value$/i"]

Install

npm install postcss-query-ast --save

Usage

Querying AST from following CSS will give us only body rule with jackie ID attribute.

body {
	background: red;
}

body#jackie {
	background: hotpink;
}

a {
	background: green;
}

import queryAst from 'postcss-query-ast';

// Assume we have AST
const postcssAst = [];

(async () => {
	const ast = await queryAst('rule[selector="body#jackie"]', postcssAst);

	/* [ Rule {
	    raws: { before: '\n\n', between: ' ', semicolon: true, after: '\n' },
	    type: 'rule',
	    nodes: [ [Declaration] ],
	    parent: 
	     Root {
	       raws: [Object],
	       type: 'root',
	       nodes: [Array],
	       source: [Object],
	       lastEach: 1,
	       indexes: {} },
	    source: { start: [Object], input: [Input], end: [Object] },
	    selector: 'body#jackie',
	    lastEach: 1,
	    indexes: {} } ] */
})();