Support for the new ABP syntax `Inline CSS` and `Remove`

Recently uBlock added support for the new ABP syntax where:

• Remove: {remove: true;} = :remove()

• Inline CSS: {css-declaration} = :style(css-declaration !important;)

which can be tested in https://abptestpages.org, but take 3 seconds to do in VSCode:

ABP

! <------------------- Remove ------------------->

! https://abptestpages.org/en/filters/remove
abptestpages.org###remove-id {remove: true;}
abptestpages.org##div[id='{{remove-id}}'] {remove: true;}
abptestpages.org##.remove-class {remove: true;}
abptestpages.org##.testcase-area > .remove-descendant {remove: true;}
abptestpages.org##.testcase-examplecontent + .remove-sibling {remove: true;}
abptestpages.org##div[height="40"][width="40"] {remove: true;}
abptestpages.org##div[href="http://testcase-attribute-remove.com/"] {remove: true;}
abptestpages.org##div[style="width: 42px;"] {remove: true;}
abptestpages.org##div[href^="http://testcase-startswith-remove.com/"] {remove: true;}
abptestpages.org##div[style^="width: 43px;"] {remove: true;}
abptestpages.org##div[style$="width: 44px;"] {remove: true;}
abptestpages.org##div[style*="width: 45px;"] {remove: true;}

! https://abptestpages.org/en/filters/remove-extended
abptestpages.org#?#div:-abp-properties(width: 46px) {remove: true;}
abptestpages.org#?#div:-abp-has(>div>span.remove-abp-has) {remove: true;}
abptestpages.org#?#div:has(>div>span.remove-has) {remove: true;}
abptestpages.org#?#span:-abp-contains(remove-contains-target) {remove: true;}
abptestpages.org#?#span:xpath(//*[@id="basic-xpath-usage-with-remove-fail"]) {remove: true;}
abptestpages.org#?#span:has-text(remove-has-text) {remove: true;}
abptestpages.org#?#div:-abp-has(> div:-abp-properties(width: 47px)) {remove: true;}
abptestpages.org#?#div:-abp-properties(WiDtH: 48px) {remove: true;}
abptestpages.org#?#.remove-wildcard:-abp-properties(cursor:*) {remove: true;}
abptestpages.org#?#div:-abp-properties(/width: 13[1-5]px;/) {remove: true;}
abptestpages.org#?#div > div:-abp-contains(/remove-containsregex\d/) {remove: true;}

! https://abptestpages.org/en/filters/inline-css-on-DOM-mutation
abptestpages.org#?##span-inline-css {background-color: #0dc74b;}

! https://abptestpages.org/en/filters/remove-extended-inversion
abptestpages.org#?#.removei-properties:not(:-abp-properties(width: 137px)) {remove: true;}
abptestpages.org#?#.removei-has:not(:-abp-has(span.removei-has-not-hide)) {remove: true;}
abptestpages.org#?#.removei-contains:not(span:-abp-contains(example-content)) {remove: true;}
abptestpages.org#?#.removei-chained-parent:not(:-abp-has(> div:-abp-properties(width: 138px))) {remove: true;}
abptestpages.org#?#.removei-case:not(:-abp-properties(WiDtH: 139px)) {remove: true;}
abptestpages.org#?#.removei-wildcard:not(:-abp-properties(cursor:*)) {remove: true;}
abptestpages.org#?#.removei-regex:not(:-abp-properties(/width: 14[1-5]px;/)) {remove: true;}
abptestpages.org#?#.removei-contains-regex:not(span:-abp-contains(/example-contentregex\d/)) {remove: true;}



! <------------------- Inline CSS ------------------->

! https://abptestpages.org/en/filters/inline-css
abptestpages.org###inline-css-id {background-color: #0dc74b;}
abptestpages.org##div[id='{{inline-css-id}}'] {background-color: #0dc74b;}
abptestpages.org##.inline-css-class {background-color: #0dc74b;}
abptestpages.org##.testcase-area > .inline-css-descendant {background-color: #0dc74b;}
abptestpages.org##.testcase-examplecontent + .inline-css-sibling {background-color: #0dc74b;}
abptestpages.org##div[height="50"][width="50"] {background-color: #0dc74b;}
abptestpages.org##div[href="http://testcase-attribute-inline-css.com/"] {background-color: #0dc74b;}
abptestpages.org##div[style="width: 52px;"] {background-color: #0dc74b;}
abptestpages.org##div[href^="http://testcase-startswith-inline-css.com/"] {background-color: #0dc74b;}
abptestpages.org##div[style^="width: 53px;"] {background-color: #0dc74b;}
abptestpages.org##div[style$="width: 54px;"] {background-color: #0dc74b;}
abptestpages.org##div[style*="width: 55px;"] {background-color: #0dc74b;}

! https://abptestpages.org/en/filters/inline-css-extended
abptestpages.org#?#div:-abp-properties(width: 56px) {background-color: #0dc74b;}
abptestpages.org#?#div:-abp-has(>div>span.inline-css-abp-has) {background-color: #0dc74b;}
abptestpages.org#?#div:has(>div>span.inline-css-has) {background-color: #0dc74b;}
abptestpages.org#?#span:-abp-contains(.inline-css-contains-target) {background-color: #0dc74b;}
abptestpages.org#?#span:xpath(//*[@id="basic-xpath-usage-with-inline-css-fail"]) {background-color: #0dc74b;}
abptestpages.org#?#span:has-text(inline-css-has-text) {background-color: #0dc74b;}
abptestpages.org#?#div:-abp-has(> div:-abp-properties(width: 57px)) {background-color: #0dc74b;}
abptestpages.org#?#div:-abp-properties(WiDtH: 58px) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-wildcard:-abp-properties(cursor:*) {background-color: #0dc74b;}
abptestpages.org#?#div:-abp-properties(/width: 14[1-5]px;/) {background-color: #0dc74b;}
abptestpages.org#?#div > div:-abp-contains(/inline-css-containsregex\d/) {background-color: #0dc74b;}

! https://abptestpages.org/en/filters/inline-css-on-DOM-mutation
abptestpages.org#?##span-inline-css {background-color: #0dc74b;}

! https://abptestpages.org/en/filters/inline-css-extended-inversion
abptestpages.org#?#.inline-css-inv-properties:not(:-abp-properties(width: 147px)) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-inv-has:not(:-abp-has(span.inline-css-inv-has-not-hide)) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-inv-contains:not(span:-abp-contains(example-content)) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-inv-chained-parent:not(:-abp-has(> div:-abp-properties(width: 148px))) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-inv-case:not(:-abp-properties(WiDtH: 149px)) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-inv-wildcard:not(:-abp-properties(cursor:*)) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-inv-regex:not(:-abp-properties(/width: 15[1-5]px;/)) {background-color: #0dc74b;}
abptestpages.org#?#.inline-css-inv-contains-regex:not(span:-abp-contains(/example-contentregex\d/)) {background-color: #0dc74b;}

Brave

! <------------------- Remove ------------------->

! https://abptestpages.org/en/filters/remove
abptestpages.org###remove-id:remove()
abptestpages.org##div[id='{{remove-id}}']:remove()
abptestpages.org##.remove-class:remove()
abptestpages.org##.testcase-area > .remove-descendant:remove()
abptestpages.org##.testcase-examplecontent + .remove-sibling:remove()
abptestpages.org##div[height="40"][width="40"]:remove()
abptestpages.org##div[href="http://testcase-attribute-remove.com/"]:remove()
abptestpages.org##div[style="width: 42px;"]:remove()
abptestpages.org##div[href^="http://testcase-startswith-remove.com/"]:remove()
abptestpages.org##div[style^="width: 43px;"]:remove()
abptestpages.org##div[style$="width: 44px;"]:remove()
abptestpages.org##div[style*="width: 45px;"]:remove()

! https://abptestpages.org/en/filters/remove-extended
abptestpages.org#?#div:-abp-properties(width: 46px):remove()
abptestpages.org#?#div:-abp-has(>div>span.remove-abp-has):remove()
abptestpages.org#?#div:has(>div>span.remove-has):remove()
abptestpages.org#?#span:-abp-contains(remove-contains-target):remove()
abptestpages.org#?#span:xpath(//*[@id="basic-xpath-usage-with-remove-fail"]):remove()
abptestpages.org#?#span:has-text(remove-has-text):remove()
abptestpages.org#?#div:-abp-has(> div:-abp-properties(width: 47px)):remove()
abptestpages.org#?#div:-abp-properties(WiDtH: 48px):remove()
abptestpages.org#?#.remove-wildcard:-abp-properties(cursor:*):remove()
abptestpages.org#?#div:-abp-properties(/width: 13[1-5]px;/):remove()
abptestpages.org#?#div > div:-abp-contains(/remove-containsregex\d/):remove()

! https://abptestpages.org/en/filters/inline-css-on-DOM-mutation
abptestpages.org#?##span-inline-css {background-color: #0dc74b;}

! https://abptestpages.org/en/filters/remove-extended-inversion
abptestpages.org#?#.removei-properties:not(:-abp-properties(width: 137px)):remove()
abptestpages.org#?#.removei-has:not(:-abp-has(span.removei-has-not-hide)):remove()
abptestpages.org#?#.removei-contains:not(span:-abp-contains(example-content)):remove()
abptestpages.org#?#.removei-chained-parent:not(:-abp-has(> div:-abp-properties(width: 138px))):remove()
abptestpages.org#?#.removei-case:not(:-abp-properties(WiDtH: 139px)):remove()
abptestpages.org#?#.removei-wildcard:not(:-abp-properties(cursor:*)):remove()
abptestpages.org#?#.removei-regex:not(:-abp-properties(/width: 14[1-5]px;/)):remove()
abptestpages.org#?#.removei-contains-regex:not(span:-abp-contains(/example-contentregex\d/)):remove()



! <------------------- Inline CSS ------------------->

! https://abptestpages.org/en/filters/inline-css
abptestpages.org###inline-css-id:style(background-color: #0dc74b !important;)
abptestpages.org##div[id='{{inline-css-id}}']:style(background-color: #0dc74b !important;)
abptestpages.org##.inline-css-class:style(background-color: #0dc74b !important;)
abptestpages.org##.testcase-area > .inline-css-descendant:style(background-color: #0dc74b !important;)
abptestpages.org##.testcase-examplecontent + .inline-css-sibling:style(background-color: #0dc74b !important;)
abptestpages.org##div[height="50"][width="50"]:style(background-color: #0dc74b !important;)
abptestpages.org##div[href="http://testcase-attribute-inline-css.com/"]:style(background-color: #0dc74b !important;)
abptestpages.org##div[style="width: 52px;"]:style(background-color: #0dc74b !important;)
abptestpages.org##div[href^="http://testcase-startswith-inline-css.com/"]:style(background-color: #0dc74b !important;)
abptestpages.org##div[style^="width: 53px;"]:style(background-color: #0dc74b !important;)
abptestpages.org##div[style$="width: 54px;"]:style(background-color: #0dc74b !important;)
abptestpages.org##div[style*="width: 55px;"]:style(background-color: #0dc74b !important;)

! https://abptestpages.org/en/filters/inline-css-extended
abptestpages.org#?#div:-abp-properties(width: 56px):style(background-color: #0dc74b !important;)
abptestpages.org#?#div:-abp-has(>div>span.inline-css-abp-has):style(background-color: #0dc74b !important;)
abptestpages.org#?#div:has(>div>span.inline-css-has):style(background-color: #0dc74b !important;)
abptestpages.org#?#span:-abp-contains(.inline-css-contains-target):style(background-color: #0dc74b !important;)
abptestpages.org#?#span:xpath(//*[@id="basic-xpath-usage-with-inline-css-fail"]):style(background-color: #0dc74b !important;)
abptestpages.org#?#span:has-text(inline-css-has-text):style(background-color: #0dc74b !important;)
abptestpages.org#?#div:-abp-has(> div:-abp-properties(width: 57px)):style(background-color: #0dc74b !important;)
abptestpages.org#?#div:-abp-properties(WiDtH: 58px):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-wildcard:-abp-properties(cursor:*):style(background-color: #0dc74b !important;)
abptestpages.org#?#div:-abp-properties(/width: 14[1-5]px;/):style(background-color: #0dc74b !important;)
abptestpages.org#?#div > div:-abp-contains(/inline-css-containsregex\d/):style(background-color: #0dc74b !important;)

! https://abptestpages.org/en/filters/inline-css-on-DOM-mutation
abptestpages.org#?##span-inline-css:style(background-color: #0dc74b !important;)

! https://abptestpages.org/en/filters/inline-css-extended-inversion
abptestpages.org#?#.inline-css-inv-properties:not(:-abp-properties(width: 147px)):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-inv-has:not(:-abp-has(span.inline-css-inv-has-not-hide)):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-inv-contains:not(span:-abp-contains(example-content)):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-inv-chained-parent:not(:-abp-has(> div:-abp-properties(width: 148px))):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-inv-case:not(:-abp-properties(WiDtH: 149px)):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-inv-wildcard:not(:-abp-properties(cursor:*)):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-inv-regex:not(:-abp-properties(/width: 15[1-5]px;/)):style(background-color: #0dc74b !important;)
abptestpages.org#?#.inline-css-inv-contains-regex:not(span:-abp-contains(/example-contentregex\d/)):style(background-color: #0dc74b !important;)

Some rules don't work in Brave because of some issues (as explained in brave/brave-browser#42873) with Procedural Cosmetics not being parsed properly, if rules are tested individually, they will work fine, but some are dropped when they are being parsed in a big group.
The other issue is simply, for the lack of true procedural :has() and :not() since native Chromium one is different BTW.

The next are just :-abp-properties that aren't compatible in Brave or uBlock either.

Incompatible rules

https://abptestpages.org/en/filters/remove-extended or https://abptestpages.org/en/filters/inline-css-extended

Caution

abptestpages.org#?#div > div:-abp-contains(/remove-containsregex\d/):remove()
abptestpages.org#?#div > div:-abp-contains(/inline-css-containsregex\d/):style(background-color: #0dc74b !important;)

Brave :has-text() or :-abp-contains regex support is not being done correctly, if you remove the \d, it will work.
The problem happens even if you use abptestpages.org##div > div:has-text(/\S/)

Warning

abptestpages.org#?#span:xpath(//*[@id="basic-xpath-usage-with-remove-fail"]):remove()
abptestpages.org#?#span:xpath(//*[@id="basic-xpath-usage-with-inline-css-fail"]):style(background-color: #0dc74b !important;)

Doesn't work because :xpath() in Brave and uBlock don't work with //*, in that ABP way.
In Brave and uBlock you have to specify add the span in the xpath, instead of the asterisk (*), regardless of the element being selected (#?#span), so either:

abptestpages.org#?#:xpath(//span[@id="basic-xpath-usage-with-remove-fail"]):remove()
abptestpages.org#?#span:xpath(//span[@id="basic-xpath-usage-with-inline-css-fail"]):style(background-color: #0dc74b !important;)

will work in both uBlock and Brave.

https://abptestpages.org/en/filters/remove-extended-inversion or https://abptestpages.org/en/filters/inline-css-extended-inversion

Caution

abptestpages.org#?#.removei-contains:not(span:-abp-contains(example-content)):remove()
abptestpages.org#?#.inline-css-inv-contains:not(span:-abp-contains(example-content)):style(background-color: #0dc74b !important;)

Brave :has-text() or :-abp-contains also has issues with native :not(), where :has-text() or :-abp-contains don't work inside native :not().

So, something simple as this will not work in Brave:

abptestpages.org##.site-panel > :not(:has-text(Remove))

Caution

abptestpages.org#?#.removei-contains-regex:not(span:-abp-contains(/example-contentregex\d/)):remove()
abptestpages.org#?#.inline-css-inv-contains-regex:not(span:-abp-contains(/example-contentregex\d/)):style(background-color: #0dc74b !important;)

Same issues as having \d in the regex rule, but also :-abp-contains or :has-text() inside native :not().

Also, why is :-abp-properties not the alias for :matches-css()?

It took a second to test that and most rules will be compatible are now compatible, some rules don't seem to work or be read the same as ABP, like: width some will work and some don't, also cursor:* is not compatible either, but most rules will be compatible, I mean, uBlock also doesn't do that, but it is something Brave could do.

But most rules work by just doing that little change, with all the other exceptions about Brave procedural filters and all that,

For example, using https://abptestpages.org/en/filters/element-hiding-emulation is not the best example, but not all rules will be written like in that example and they would be compatible with Brave and uBlock.

For example for this list to work in uBlock and Brave, I had to modify a lot of things, like width would need the computed value, while ABP would only see the one in the CSS, Brave lacks regex support in the value of :matches-css() and also brave doesn't have a true :has() so you can't put procedurals inside of it. Plus the little problems like \d in the :has-text() regex, caused issues. But changing this list:

abptestpages.org#?#div:-abp-properties(width: 213px)
abptestpages.org#?#div:-abp-has(>div>span.ehe-abp-has)
abptestpages.org#?#div:has(>div>span.ehe-has)
abptestpages.org#?#span:-abp-contains(ehe-contains-target)
abptestpages.org#?#span:xpath(//*[@id="basic-xpath-usage-fail"])
abptestpages.org#?#span:has-text(ehe-has-text)
abptestpages.org#?#div:-abp-has(> div:-abp-properties(width: 214px))
abptestpages.org#?#div:-abp-properties(WiDtH: 215px)
abptestpages.org#?#.ehe-wildcard:-abp-properties(cursor:*)
abptestpages.org#?#div:-abp-properties(/width: 12[1-5]px;/)
abptestpages.org#?#div > div:-abp-contains(/ehe-containsregex\d/)

to this:

abptestpages.org#?#div:matches-css(width: 537.5px)
abptestpages.org#?#div:-abp-has(>div>span.ehe-abp-has)
abptestpages.org#?#div:has(>div>span.ehe-has)
abptestpages.org#?#span:-abp-contains(ehe-contains-target)
abptestpages.org#?#span:xpath(//span[@id="basic-xpath-usage-fail"])
abptestpages.org#?#span:has-text(ehe-has-text)
abptestpages.org#?#div:-abp-has(> div:matches-css(width: 214px))
abptestpages.org#?#div:matches-css(width: 538.5px)
abptestpages.org#?#.ehe-wildcard:matches-css(cursor:/.?/)
abptestpages.org#?#div:matches-css(width: /24[3-7]\.5px/)
abptestpages.org#?#div > div:-abp-contains(/ehe-containsregex\d/)

Made most rules compatible.

And individually targetting the incompatible ones like

- abptestpages.org#?#div:-abp-has(> div:matches-css(width: 214px))
+ abptestpages.org#?#div > div:matches-css(width: 214px):upward(1)

- abptestpages.org#?#.ehe-wildcard:matches-css(cursor:/.?/)
+ abptestpages.org#?#.ehe-wildcard:matches-css(cursor: pointer)

- abptestpages.org#?#div > div:-abp-contains(/ehe-containsregex\d/)
+ abptestpages.org#?#div > div:-abp-contains(/ehe-containsregex/)

will make all but one rule compatible abptestpages.org#?#div:matches-css(width: /24[3-7]\.5px/) which works in uBlock but not brave for lack of regex, and making them individual will not work because the computed value will change and don't match the same as uBlock.

But I think would not be a terrible move to add also :-abp-properties as alias for matches-css