# cssauron

> create matching selectors from css for your very own nested object hierarchy

Latest version **1.4.0** (published 2016-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install cssauron
pnpm add cssauron
yarn add cssauron
bun add cssauron
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2016-05-07 |
| First published | 2012-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 113 |
| Author | Chris Dickinson |
| Maintainers | chrisdickinson |
| Keywords | css, selector, parser, match |

## Links

- npm: https://www.npmjs.com/package/cssauron
- Repository: https://github.com/chrisdickinson/cssauron
- Homepage: https://github.com/chrisdickinson/cssauron#readme
- Issues: https://github.com/chrisdickinson/cssauron/issues
- npm.io page: https://npm.io/package/cssauron

## Dependencies (1)

- [through](https://npm.io/package/through.md) X.X.X

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.4.0 (latest) — 2016-05-07
- 1.3.0 — 2016-05-07
- 1.2.0 — 2014-08-11
- 1.1.2 — 2014-06-05
- 1.1.1 — 2014-05-18
- 1.1.0 — 2013-11-19
- 1.0.0 — 2013-10-24
- 0.2.1 — 2013-07-16
- 0.2.0 — 2013-07-15
- 0.1.1 — 2012-12-28
- 0.1.0 — 2012-12-28
- 0.0.3 — 2012-12-21
- 0.0.2 — 2012-11-24
- 0.0.0 — 2012-11-22

## README

# cssauron

build a matching function in CSS for any nested object structure!

```javascript
var language = require('cssauron')({
    tag: 'tagName'
  , contents: 'innerText'
  , id: 'id'
  , class: 'className'
  , parent: 'parentNode'
  , children: 'childNodes'
  , attr: 'getAttribute(attr)'
})

var selector = language('body > #header .logo')
  , element = document.getElementsByClassName('logo')[0]

if(selector(element)) {
  // element matches selector
} else {
  // element does not match selector
}
```

It's easy to use with your favorite nested tree structures!
Delicious with HTML! Digestable with JSON!

| HTML | JSON | GLSL AST | JS AST (Esprima) |
|------|------|----------|------------------------|
| [cssauron-html](http://npm.im/cssauron-html) | [cssauron-json](http://npm.im/cssauron-json) | [cssauron-glsl](http://npm.im/cssauron-glsl) | [cssauron-falafel](http://npm.im/cssauron-falafel) |


# API

### require('cssauron')(options) -> selector factory

Import `cssauron` and configure it for the nested object structure you'll
want to match against.

#### options

`options` are an object hash of lookup type to string attribute or `function(node)` lookups for queried
nodes. You only need to provide the configuration necessary for the selectors you're planning on creating.
(If you're not going to use `#id` lookups, there's no need to provide the `id` lookup in your options.)

* `tag`: Extract tag information from a node for `div` style selectors.
* `contents`: Extract text information from a node, for `:contains(xxx)` selectors.
* `id`: Extract id for `#my_sweet_id` selectors.
* `class`: `.class_name`
* `parent`: Used to traverse up from the current node, for composite selectors `body #wrapper`, `body > #wrapper`.
* `children`: Used to traverse from a parent to its children for sibling selectors `div + span`, `a ~ p`.
* `attr`: Used to extract attribute information, for `[attr=thing]` style selectors.

### selector_factory('some selector') -> match function

Compiles a matching function.

### match(node) -> false | node | [subjects, ...]

Returns false if the provided node does not match the selector. Returns truthy if the provided
node *does* match. Exact return value is determined by the selector, based on
the [CSS4 subject selector spec](http://dev.w3.org/csswg/selectors4/#subject): if only
a single node is matched, only that node is returned. If multiple subjects are matched,
a deduplicated array of those subjects are returned.

For example, given the following HTML (and `cssauron-html`):

```html
<div id="gary-busey">
    <p>
        <span class="jake-busey">
        </span>
    </p>
</div>
```

Checking the following selectors against the `span.jake-busey` element yields:

 - `#gary-busey`: `false`, no match.
 - `#gary-busey *`: `span.jake-busey`, a single match.
 - `!#gary-busey *`: `div#gary-busey`, a single match using the `!` subject selector.
 - `#gary-busey *, p span`: `span.jake-busey`, a single match, though both selectors match.
 - `#gary-busey !* !*, !p > !span`: `[p, span.jake-busey]`, two matches.

## Supported pseudoclasses 

 - `:first-child`
 - `:last-child`
 - `:nth-child`
 - `:empty`
 - `:root`
 - `:contains(text)`
 - `:any(selector, selector, selector)`

## Supported attribute lookups

 - `[attr=value]`: Exact match
 - `[attr]`: Attribute exists and is not false-y.
 - `[attr$=value]`: Attribute ends with value
 - `[attr^=value]`: Attribute starts with value
 - `[attr*=value]`: Attribute contains value
 - `[attr~=value]`: Attribute, split by whitespace, contains value.
 - `[attr|=value]`: Attribute, split by `-`, contains value.

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