ECSSTree 欧统局
附加块扩展 CSS 补充 CSSTree (英语)。 。 。 . 我们的首要目标是改变CSSTree分析器的内部行为以支持 扩展CSS(ECSS)语言元素,但我们不改变API或AST结构. 因此 ECSSTree 完全向后兼容 CSSTree, 这样您就可以将我们的 AST 函数传递到 CSSTree 反之亦然,没有任何问题.
说明: 此软件包开发于 辅助软件Limited/ext-ecstree。 。 。 . 这个 护卫队/护卫队 寄存器是一个公共镜像.
[注] 如果你要找一个可以分析CSS的图书馆 但你不知道Adblock是什么 或扩展 CSS,您可能应该使用 CSSTree (英语) 代替此库 :)
目录
安装
您可以使用
- 菲律宾数字 :
pnpm add @adguard/ecss-tree - 国家预防机制数字 :
npm install @adguard/ecss-tree - 雅伦数字 :
yarn add @adguard/ecss-tree
或者你可以通过esm.run使用: https://esm.run/@adguard/ecss-tree 互联网档案馆的存檔,存档日期2013-12-22
支持扩展CSS元素
目前,支持以下扩展CSS伪类:
:-abp-contains(raw)数字 : [ABP参考]:-abp-has(selector list)数字 : [ABP参考]:contains(raw)数字 : [总干事参考]:has-text(raw)数字 : [UBO参考]:if-not(selector)数字 : [总干事参考]:matches-css-after(raw)数字 : [UBO参考]:matches-css-before(raw)数字 : [UBO参考]:matches-css(raw)数字 : [总干事参考], (中文(简体) ), [UBO参考]:matches-media(media query list)数字 : [UBO参考]:min-text-length(number)数字 : [UBO参考]:nth-ancestor(number)数字 : [总干事参考]:style(declaration list)数字 : [UBO参考]:upward(selector list / number)数字 : [总干事参考], (中文(简体) ), [UBO参考]:xpath(raw)数字 : [总干事参考], (中文(简体) ), [UBO参考]
此外,CSSTree支持以下伪类 默认数字 :
:has(selector list)数字 : [W3C参考], (中文(简体) ), [总干事参考], (中文(简体) ), [UBO参考]:not(selector list)数字 : [W3C参考], (中文(简体) ), [总干事参考], (中文(简体) ), [UBO参考]:is(selector list)数字 : [W3C参考], (中文(简体) ), [总干事参考], (中文(简体) ), [UBO参考]
另外, CSSTree 默认支持遗留扩展 CSS 元素( 属性选择器) :
[-ext-name="value"]时 name 是扩展 CSS 元素的名称,并且 value 是它的价值.
例如,以下选择器可以通过 CSSTree 解析:
[-ext-has="selector list"]
如果CSSTree不知道一个伪类,它试图将其描述为 Raw 元素
(如果可能 - 见 有问题的案件) (中文(简体) ).
CSSTree 库本身是相当灵活和耐错的, 因此,它基本上很好地管理了此处不包括的扩展CSS元素.
动机
例如,以下选择器
div:-abp-has(> section)
将被默认 CSSTree 解析如下:
{
"type": "Selector",
"loc": null,
"children": [
{
"type": "PseudoClassSelector",
"loc": null,
"name": "-abp-has",
"children": [
{
"type": "Raw",
"loc": null,
"value": "> section"
}
]
}
]
}
问题在于 -abp-has 参数解析为 Raw,而不是作为一个 Selector, (中文(简体) ),
自此以来 -abp-has 是CSS / CSSTree 中的一个未知的伪类.
这就是ECSSTree图书馆开始运行的地方. 它发现 -abp-has 期望一个选择器作为参数,
即它将通过的参数解为 Selector。这意味着上面的选取者将被解析如下:
{
"type": "Selector",
"loc": null,
"children": [
{
"type": "PseudoClassSelector",
"loc": null,
"name": "-abp-has",
"children": [
{
"type": "Selector",
"loc": null,
"children": [
{
"type": "Combinator",
"loc": null,
"name": ">"
},
{
"type": "TypeSelector",
"loc": null,
"name": "section"
}
]
}
]
}
]
}
Combinator 和相类似的节点是 CSSTree 的一部分,这个叉子只是指定 -abp-has 参数
应被解析为选择者。 节点本身是CSSTree的一部分.
高级验证
此外,这种方法还能够进行更先进的验证。 譬如说, 默认 CSSTree 在解析以下选择器时不会出错 :
div:-abp-has(42)
因为它不知道什么 -abp-has 意思是,它只是将42描述为 Raw. ECSSTree 将参数解释为选择器,
它将丢出一个错误,因为42 只是一个无效的选择器.
处理有问题的案件
图书馆还处理有问题的选择者,例如:
div:contains(aaa'bbb)
这个选择器并不完全符合CSS标准,所以即使CSSTree灵活, 它无法正确分析它,因为它将把它标出如下:
| 托肯类型 | 开始索引 | 结束索引 | 来源部分 |
|---|---|---|---|
| 缩写 | 0 个 | 3个 | 数字 |
| 结肠 | 3个 | 页:1 | 数字 : |
| 函数键 | 页:1 | 第13条 | 包含( c) |
| 缩写 | 第13条 | 16个 | 页:1 |
| 字符串键 | 16个 | 21国 | 'bbb' (英语) |
引号') 符号化器会认为一个字符串正在开始,它将其余的输入作为字符串来表示.
这是普通的行为 对于象征性的, 但我们错了, 因为分析器会失败
")" is expected 错误,因为它没有找到收尾括号,因为它认为字符串仍然开着.
ECSSTree 将在解析过程中, 当解析器到达时, 通过一个特殊的重接算法来处理此例
这个问题 这样,ECSSTree的剖析器将能够正确剖析这个选择器.
这对 xpath。 。 。 .
说明: ECSSTree 剖析 :contains 财务报告和审定财务报表 :xpath 参数为 Raw该图书馆的主要目标是改变
cSSTree的解析器的内部行为,使其能正确解析扩展CSS选择器,
不改变AST本身。 AST应该和CSSTree中一样,这样可以使用库
作为CSSTree的倒置替代.
分析 :xpath 详细表达式或正则表达式将是一项艰巨的任务,需要新的AST节点,
这将是一个突破性的变化。 但它总是解释 正确的原始表达给你,
如果你愿意,你可以自己分析/验证这些表达式。 有很多图书馆,
例如 ưμ㼯a 或者说 缩写。 。 。 .
见 示例代码 更多细节.
实例
以下是一个非常简单的例子来说明如何使用ECSSTree:
import { parse, generate, toPlainObject, fromPlainObject } from "@adguard/ecss-tree";
import { inspect } from "util";
// Some inputs to test
const inputs = [
// Valid selectors
`div:-abp-has(> .some-class > a[href^="https://example.com"])`,
`body:style(padding-top: 0 !important;):matches-media((min-width: 500px) and (max-width: 1000px))`,
`section:upward(2):contains(aaa'bbb):xpath(//*[contains(text(),"()(cc")])`,
// Missing closing bracket at the end
`div:-abp-has(> .some-class > a[href^="https://example.com"]`,
];
// Iterate over inputs
for (const input of inputs) {
try {
// Parse raw input to AST. This will throw an error if the input is not valid.
// Don't forget to set context to 'selector', because CSSTree will try to parse
// 'stylesheet' by default.
const ast = parse(input, { context: "selector" });
// By default, AST uses a doubly linked list. To convert it to plain object, you can
// use toPlainObject() function.
// If you want to convert AST back to doubly linked list version, you can use
// fromPlainObject() function.
const astPlain = toPlainObject(ast);
const astAgain = fromPlainObject(astPlain);
// Print AST to console
console.log(inspect(astPlain, { colors: true, depth: null }));
// You can also generate string from AST (don't use plain object here)
console.log(generate(astAgain));
} catch (e) {
// Mark invalid selector
console.log(`Invalid selector: ${input}`);
// Show CSSTree's formatted error message
console.log(e.formattedMessage);
}
}
API与CSSTree中相同,因此您可以使用 CSSTree 文档 作为参考.
您可以在 实例 文件夹.
报告问题/请求特征
如果您找到错误或想要请求新功能, 请请 打开一个问题 (原始内容存档于2018-09-29). on GitHub. 请详细说明问题或你要求的特征,如有可能, 显示问题或特征的代码示例.
捐款
你可以通过打开拉出请求来为项目做出贡献. 向AdGuard项目捐款的人可以接受 各种奖励,见 此页面 详细情况.
发展
先决条件
确保您安装了以下工具 :
- 节点.js(建议使用最新的LTS版本)
- 小时
图标
开发期间,您可以使用以下命令(列于 package.json:
pnpm lint- 输入代码 ESLint 语录pnpm test- 与 欢乐 (您也可以使用pnpm test <test-name>(中文(简体) )pnpm build- 把图书馆建到dist通过使用 滚动
文档
许可证
这个图书馆根据麻省理工学院的许可证颁发执照. 见 自由主义 需要更多信息的文件.
鸣谢
在本节中,我们要感谢下列人士所做的工作:
- 罗马·德沃尔诺夫(签名)拉哈马蒂用于创建和维护 CSSTree (英语) 图书馆
参考资料
以下是更多关于扩展 CSS 选择器的有用链接 :
- CSSTree 文档 : https://github.com/csstree/csstree/tree/master/docs. 页面存档备份,存于互联网档案馆
- 守护 扩展CSS数字 : https://github.com/AdguardTeam/ExtendCs 互联网档案馆的存檔,存档日期2014-12-21
- uBlock 键 "程序化妆品过滤器"数字 : https://github.com/gorhill/uBlock/wiki/Procedural-cosmetic-filters (中文(简体) )
- 附加障碍 扩展CSS数字 : https://help.adblockplus.org/hc/en-us/articles/360062733293#elemhide-emulation (英语)