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ć
