# postcss-query-ast

> Query PostCSS AST with CSS selectors.

Latest version **2.1.1** (published 2023-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-query-ast
pnpm add postcss-query-ast
yarn add postcss-query-ast
bun add postcss-query-ast
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2023-08-23 |
| First published | 2019-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 2 |
| Unpacked size | 138.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Ivan Nikolić |
| Maintainers | niksy |
| Keywords | ast, css, postcss, query, queryselector |

## Links

- npm: https://www.npmjs.com/package/postcss-query-ast
- Repository: https://github.com/niksy/postcss-query-ast
- Homepage: https://github.com/niksy/postcss-query-ast#readme
- Issues: https://github.com/niksy/postcss-query-ast/issues
- npm.io page: https://npm.io/package/postcss-query-ast

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^8.1.1
- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^6.0.4

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2023-08-23
- 2.1.0 — 2021-10-25
- 2.0.0 — 2020-10-08
- 1.0.1 — 2019-01-04
- 1.0.0 — 2019-01-03

## README

# postcss-query-ast

[![Build Status][ci-img]][ci]

Query PostCSS AST with CSS selectors.

Supported selectors are:

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

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

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

## Install

```sh
npm install postcss-query-ast --save
```

## Usage

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

```css
body {
	background: red;
}

body#jackie {
	background: hotpink;
}

a {
	background: green;
}
```

```js
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ć](http://ivannikolic.com)

<!-- prettier-ignore-start -->

[ci]: https://github.com/niksy/postcss-query-ast/actions?query=workflow%3ACI
[ci-img]: https://github.com/niksy/postcss-query-ast/workflows/CI/badge.svg?branch=master
[mdn-type-selector]: https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
[mdn-universal-selector]: https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
[mdn-attribute-selector]: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
[mdn-descendant-combinator]: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
[mdn-child-combinator]: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
[mdn-adjacent-sibling-combinator]: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
[mdn-general-sibling-combinator]: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
[mdn-first-child]: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
[mdn-last-child]: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
[mdn-nth-child]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
[mdn-nth-last-child]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
[mdn-only-child]: https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child
[mdn-first-of-type]: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
[mdn-last-of-type]: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
[mdn-nth-of-type]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
[mdn-nth-last-of-type]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type
[mdn-only-of-type]: https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type
[mdn-empty]: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
[mdn-matches]: https://developer.mozilla.org/en-US/docs/Web/CSS/:matches
[mdn-not]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

<!-- prettier-ignore-end -->

---
_Source: https://npm.io/package/postcss-query-ast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._