tldraw项目中CSS相对路径解析问题的分析与解决方案

背景介绍

在tldraw这个开源绘图编辑器的开发过程中，开发团队发现了一个与CSS样式表处理相关的重要问题。该问题主要出现在编辑器实现PNG/SVG导出功能时，特别是在处理文档中的字体嵌入逻辑时。

问题本质

问题的核心在于FontEmbedder.ts文件中的getCurrentDocumentFontFaces方法无法正确处理CSS规则中的相对路径。当该方法遍历文档样式表并处理@import规则时，如果遇到相对路径（如../style.css），它会直接尝试获取该路径，导致请求错误的URL（如domain.com/style.css），最终返回404错误。

技术细节

在Web开发中，CSS样式表经常使用相对路径来引用其他资源。这些相对路径的正确解析依赖于它们所在的父样式表的位置。例如：

• 父样式表位于domain.com/a/b/parent_style.css
• 其中包含规则@import "../style.css"
• 正确的解析结果应该是domain.com/a/style.css

然而，tldraw当前的实现直接使用了规则中的href属性，没有考虑路径解析的上下文。

解决方案

针对这个问题，开发团队提出了一个有效的解决方案：在获取CSS规则href时，先将其转换为绝对路径。具体实现方式如下：

const absoluteHref = new URL(rule.href, rule.parentStyleSheet?.href ?? undefined).href
fontFaces.push(fetchCssFontFaces(absoluteHref))

这个方案利用了JavaScript的URL接口，它能够根据基础URL（这里是父样式表的href）正确解析相对路径。如果父样式表的href不可用（undefined），则会回退到默认行为。

影响范围

这个问题主要影响以下功能：

1. 编辑器中的PNG导出功能
2. SVG导出功能
3. 任何依赖字体嵌入的功能

最佳实践建议

在处理Web应用中的资源路径时，开发人员应该注意：

1. 始终考虑相对路径的解析上下文
2. 使用标准的URL解析API（如JavaScript的URL接口）
3. 为可能的undefined值提供合理的回退方案
4. 在单元测试中覆盖各种路径组合（绝对路径、相对路径、根相对路径等）

总结

tldraw项目中发现的这个CSS相对路径解析问题，展示了Web开发中一个常见但容易被忽视的细节。通过使用标准的URL解析API，开发团队不仅解决了当前的问题，也为未来处理类似场景提供了可靠的解决方案。这个案例提醒我们，在处理Web资源路径时，必须充分考虑各种可能的路径表示形式及其解析上下文。