Turbo 8.0.0-beta.3 版本中样式表处理机制的变更与优化

在 Turbo 8.0.0-beta.3 版本中，开发团队引入了一个重要的功能变更：在页面导航时自动移除未使用的样式表。这个功能原本旨在解决多布局切换时的样式冲突问题，但在实际应用中却引发了一些意料之外的兼容性问题。

功能背景与初衷

Turbo 框架的核心目标之一是提供流畅的页面导航体验。在之前的版本中，当用户在不同布局的页面间导航时，如果缺少 data-turbo-track="reload" 属性标记，可能会出现样式叠加的问题。开发团队通过自动移除未使用的样式表这一机制，试图从根本上解决这个问题。

实际应用中的问题

然而，这一变更在实际应用中暴露出了两个主要问题：

1. 开发服务器兼容性问题：当使用 Vite 等现代前端工具的开发服务器时，Turbo 导航会导致所有样式暂时消失。这是因为开发模式下样式表通常是通过 JavaScript 动态注入的，Turbo 的样式表清理机制会误判这些样式为"未使用"。

2. 动态加载库的样式丢失：对于使用 Stimulus 等框架进行代码分割和懒加载的场景，当第三方库的样式是通过 JavaScript 动态导入时（如 import '@splidejs/splide/dist/css/splide-core.min.css'），这些样式也会被错误地移除。

解决方案的演进

开发团队在收到反馈后，迅速评估了问题的严重性，并做出了以下调整：

1. 将功能改为可选：为了避免破坏性变更，团队决定将这个样式表清理行为改为可选功能，而不是默认行为。

2. 引入更精细的控制机制：类似于为 Trix 编辑器添加的 data-turbo-permanent 属性，未来可能会提供更多细粒度的控制方式，让开发者能够明确标记哪些样式表应该被保留。

对开发者的建议

对于正在使用或计划升级到 Turbo 8.0.0-beta.3 的开发者，建议：

1. 关注即将发布的新 beta 版本，其中包含了这一问题的修复。

2. 如果需要在当前版本中解决样式问题，可以考虑暂时回退到之前的稳定版本。

3. 对于动态加载的第三方库样式，可以探索将其提取到主样式表中的可能性，避免依赖运行时注入。

这一事件也提醒我们，在现代前端开发中，框架与构建工具的深度集成需要特别谨慎，任何看似合理的优化都可能在不经意间破坏现有的工作流程。Turbo 团队快速响应和调整的做法，展现了良好的开源项目管理能力。