PHP-CSS-Parser项目中@font-face规则src属性解析问题分析

在PHP-CSS-Parser项目中，开发者发现了一个关于CSS中@font-face规则src属性解析的问题。这个问题涉及到CSS字体定义中多值URL的解析处理。

问题现象

当CSS代码中@font-face规则的src属性包含多个URL值时，解析器无法正确识别这些值。例如以下CSS代码：

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/open-sans-italic-300.woff2') format('woff2'),
         url('../fonts/open-sans-italic-300.ttf') format('truetype');
}

预期应该解析出两个URL组件，但实际解析结果却产生了三个组件，这表明解析器在处理逗号分隔的多值URL时出现了问题。

技术背景

在CSS规范中，@font-face规则的src属性允许指定多个字体源，用逗号分隔。这是浏览器实现字体回退机制的基础——当第一个字体源不可用时，浏览器会尝试加载后续的字体源。

PHP-CSS-Parser是一个用PHP实现的CSS解析器，它需要准确解析CSS的各种语法结构，包括这种复杂的属性值列表。

问题原因

经过项目维护者的分析，问题根源在于解析器对运算符优先级的处理。具体来说：

1. 解析器默认将逗号(,)视为比空格更高优先级的运算符
2. 但在src属性的上下文中，应该反过来——空格应该比逗号有更高优先级
3. 这种优先级错配导致解析器错误地拆分了属性值

解决方案

项目维护者提出了以下解决方案：

1. 为src属性提供自定义的分隔符优先级顺序
2. 在解析src属性时，优先按空格拆分，再处理逗号
3. 这种处理方式与CSS规范中字体回退列表的语法要求一致

值得注意的是，src属性目前主要出现在@font-face规则中，虽然未来可能会有其他使用场景，但预计其解析方式应该保持一致。

相关扩展

这个问题引出了CSS解析器中更广泛的属性值列表处理问题。许多CSS属性都支持用逗号分隔的多值语法，如元素阴影等。这些属性的解析也需要类似的特殊处理，但可能要求不同的运算符优先级顺序。

总结

CSS解析器需要精确处理各种复杂的语法结构。PHP-CSS-Parser项目通过调整运算符优先级的方式解决了@font-face规则中src属性的解析问题，这不仅修复了当前bug，也为处理类似的多值属性提供了参考方案。这种对CSS语法细节的精确把握，是构建可靠CSS处理工具的关键。