Skip to content

Commit

Permalink
Pull request #58: AG-2144 implement matches-property pseudo
Browse files Browse the repository at this point in the history
Merge in EXTENSIONS/extended-css from feature/AG-2144 to master

* commit '7b2ba4660f2402fc064838a187191c6459373189':
  few tiny edits
  fix readme typo
  handle 'null' and 'undefined' property values set as string
  refactor utils, add matcherUtils tests, update readme
  refactor parseRawPropChain
  handle null as value while comparing, add extra tests for regexp chain props
  implement matches-property pseudo
  • Loading branch information
slavaleleka committed Sep 3, 2020
2 parents 066a61e + 7b2ba46 commit 0274fb8
Show file tree
Hide file tree
Showing 17 changed files with 1,989 additions and 250 deletions.
58 changes: 58 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Module for applying CSS styles with extended selection properties.
* [Pseudo-class :contains()](#extended-css-contains)
* [Pseudo-class :matches-css()](#extended-css-matches-css)
* [Pseudo-class :matches-attr()](#extended-css-matches-attr)
* [Pseudo-class :matches-property()](#extended-css-matches-property)
* [Pseudo-class :xpath()](#extended-css-xpath)
* [Pseudo-class :nth-ancestor()](#extended-css-nth-ancestor)
* [Pseudo-class :upward()](#extended-css-upward)
Expand Down Expand Up @@ -240,6 +241,63 @@ div:matches-attr("/-unit/"="/click/"):has(> span:contains(ads))
*[class]:matches-attr("/.{5,}delay$/"="/^[0-9]*$/"):upward(2)
```

<a id="extended-css-matches-property"></a>
### Pseudo-class `:matches-property()`

This pseudo-class allows to select an element by its properties.

**Syntax**
```
selector:matches-property("name"[="value"])
```

- `name` — property name OR regular expression for property name
- `value` — optional, property value OR regular expression for property value

> For regex patterns, `"` and `\` should be escaped.
> `name` supports regexp for property in chain, e.g. `prop./^unit[\\d]{4}$/.type`
**Examples**

```javascript
divProperties = {
id: 1,
check: {
track: true,
unit_2ksdf1: true,
},
memoizedProps: {
key: null,
tag: 12,
_owner: {
effectTag: 1,
src: 'ad.com',
},
},
};
```

```
// element with such properties can be matched by any of such rules:
div:matches-property("check.track")
div:matches-property("check./^unit_.{4,6}$/"))
div:matches-property("memoizedProps.key"="null")
div:matches-property("memoizedProps._owner.src"="/ad/")
```

<details>
<summary><b>For filters maintainers</b></summary>

To check properties of specific element, do:
1. Select the element on the page.
2. Go to Console tab and run `console.dir($0)`.
</details>

<a id="extended-css-xpath"></a>
### Pseudo-class `:xpath()`

Expand Down
Loading

0 comments on commit 0274fb8

Please sign in to comment.