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: {} } ] */
})();

API

queryAst(query, ast)

Returns: Promise<(Root | Rule | AtRule | Declaration | Comment)[]>

Queries PostCSS with CSS selector.

query

Type: string

CSS selector.

ast

Type: Root

PostCSS AST.

License

MIT © Ivan Nikolić