从文本到AST：深入vminpoly的CSS解析器parser.js，7种规则类型与@media规则注册表

从文本到AST深入vminpoly的CSS解析器parser.js7种规则类型与media规则注册表【免费下载链接】vminpolyA polyfill for CSS units vw, vh vmin and now some media queries to boot. Works in IE5.5 and Opera Mini项目地址: https://gitcode.com/gh_mirrors/vm/vminpolyvminpoly 是一个面向旧浏览器的 CSS 单位兼容库polyfill让 IE5.5 乃至 Opera Mini 也能正确解析 vw、vh、vmin 单位及媒体查询。它的核心 CSS 解析器 parser.js 负责把 CSS 文本转化为结构化的 AST 语法树本文完整拆解这套轻量解析器7 种规则类型、状态机主循环以及 media 规则注册表的设计巧思。一、vminpoly CSS 解析器解决什么问题 旧浏览器遇到不认识的 CSS 单位会直接丢弃整条规则这是写了 vw 也不生效的根本原因。vminpoly 的思路绕开了浏览器解析器自己重新走一遍抓取页面link引用的原始 CSS 源码解析成 AST抽象语法树筛选只保留含 vw / vh / vmin 单位的声明监听 resize把单位换算成 px 等价值注入一个style元素。整体流程由主引擎 vminpoly.coffee编译产物为 vminpoly.js驱动而解析环节则完全交给两个独立模块。二、三步解析流水线CSS 文本 → 词法单元 → ASTvminpoly 的解析层采用了经典的两级结构——先词法分析再语法分析各自独立、可单独测试阶段模块职责① 词法分析tokenizetokenizer.js逐字符扫描 CSS 文本切出 IDENT、NUMBER、DIMENSION、FUNCTION、AT-KEYWORD 等 token② 语法分析parseparser.js消费 token 流构建带层级的 AST 规则树③ 筛选与换算vminpoly.js遍历 AST保留目标单位声明resize 时生成 px CSS词法器内部是一个 20 多个状态的小型状态机data、number、dimension、url、hash……它会贴心地跟踪行列号并在遇到10vw这样的值时输出一个DIMENSIONtoken——这正是后续单位换算的抓手。两个模块都采用UMD 模块化封装同一份代码既能挂在浏览器全局对象上直接跑IE5.5 也能用也能通过 AMD / CommonJS 引入这是它能兼容古董浏览器的工程基础之一。三、7 种规则类型AST 节点结构一览 parser.js 的后半部分定义了 AST 的全部节点类型一个公共基类 7 种具体规则类型彼此用value数组层层嵌套构成完整语法树规则类型type 标识对应的 CSS 结构典型例子StylesheetSTYLESHEET样式表根节点整份 CSS 文件AtRuleAT-RULE 规则含 prelude 前导 内容块media screen {...}StyleRuleSTYLE-RULE普通样式规则选择器 声明块.box { color: red }DeclarationDECLARATION单条声明属性名 值width: 50vwSimpleBlockBLOCK圆括号 / 方括号 / 花括号块(max-width: 600px)FuncFUNCTION函数调用url(logo.png)FuncArgFUNCTION-ARG函数内单个参数rgba的0, 0, 0, 0.5所有节点共享基类CSSParserRule的能力fillType标记内容块里允许填充什么是理解 规则的关键append(val)把子节点挂进value数组toJSON()/toString()可序列化为 JSON方便调试与检查树结构。以media screen and (max-width: 600px) { .box { width: 50vw; } }为例它会被解析成一棵四层小树Stylesheet → AtRuleprelude 存条件含 SimpleBlock→ StyleRule → Declaration其中50vw是一个 DIMENSION token。四、状态机主循环10 种解析模式如何切换 ⚙️parse(tokens)的主循环parser.js并不使用递归下降而是维护两个核心状态mode解析模式当前处于哪种上下文共 10 种——top-level、at-rule、rule、selector、declaration、after-declaration-name、declaration-value、declaration-end、next-block、next-declarationstack规则栈记录嵌套层级push压入新规则、pop出栈并挂到父节点上switchto切换模式。配合几个精巧的小工具整个解析过程非常可控reprocess()指针回退一格让下一个循环重新消费当前 token——例如读到{需要同时完成模式切换和进入块内两件事consumeAPrimitive()遇到([{时整块吞下SimpleBlock遇到 FUNCTION 时解析出 Func FuncArg保证 token 流压缩成与 AST 同构的单元parseerror()报错只记录不中断尽量把残缺 CSS 解析完——这符合浏览器容错解析的惯例。五、media 规则注册表fillType 的三种取值 规则在 CSS 里五花八门有的带块、有的只跟分号。parser.js 用一张注册表 AtRule.registry 统一声明每个 规则的填充类型共收录 12 种fillType含义包含的规则空语句型以;结束没有内容块import、namespace、viewportrule规则块块内可嵌套样式规则media、keyframes、supports、document、region-styledeclaration声明块块内直接是属性声明font-face、page、counter-style、font-feature-values构造函数里的三行逻辑parser.js决定了 AtRule 的行为读到media时查表得到fillType rule于是遇到;→ 按语句型直接pop结束遇到{→ 切换到rule模式允许块内继续解析选择器和声明若遇到未登记的 规则fillType 为空又试图开块走next-block模式整块丢弃不污染主流程。media 为何特殊因为媒体查询条件是响应式的vminpoly 必须在运行时判断条件是否成立。主引擎在生成 CSS 时会检查 media 的 preludevminpoly.js若其中出现max-aspect-ratio就取出两个数字与当前窗口宽高比实时比较成立才输出块内规则——这就是它能rudimentary 但可用地支持媒体查询的秘密。六、AST 如何驱动 vw / vh / vmin 实时换算 拿到 AST 后主引擎做两件事预筛选analyzeStylesheet递归遍历 AST只保留声明值里含DIMENSION且单位为 vw / vh / vmin 的规则无关 CSS 直接剔除减小后续负担按需重算每次窗口 resize按vw 宽/100、vh 高/100、vmin min(vw, vh)计算出基准值再沿 AST 逐 token 走命中目标单位的 DIMENSION token 换算为px其余 token 原样调用toSourceString()还原最终拼出完整 CSS 写入style。可以看到tokenizer 的 DIMENSION token、parser 的树形结构与主引擎的换算逻辑是环环相扣的——这正是从文本到 AST这条流水线存在的意义。七、小结一套极简但完整的 CSS 解析设计两级解析tokenizer.js 管切词parser.js 管组树职责清晰、可独立复用7 种规则类型 公共基类用统一的value数组递归嵌套覆盖样式表绝大多数结构状态机 规则栈10 种模式 push/pop 处理任意深度嵌套reprocess与consumeAPrimitive让控制流干净利落media 规则注册表12 条注册项 3 种 fillType一张表搞定 规则的分类容错容错优先报错记录但不中断残缺 CSS 也能解析出可用子树。如果想实际感受解析效果可以打开 index.html 和 demo2.html 两个演示页后者演示了 vw/vh/vmin 媒体查询的组合效果配合 test.css 观察旧浏览器下实时换算的 px 值是如何生成的。【免费下载链接】vminpolyA polyfill for CSS units vw, vh vmin and now some media queries to boot. Works in IE5.5 and Opera Mini项目地址: https://gitcode.com/gh_mirrors/vm/vminpoly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考