PostCSS 8.5发布：增强非CSS源码处理能力

PostCSS是一个用JavaScript转换CSS的工具，它通过插件系统让开发者能够对CSS进行各种现代化处理，如自动添加浏览器前缀、使用未来CSS语法等。PostCSS已经成为现代前端开发工作流中不可或缺的一部分。

新版本核心特性

PostCSS 8.5版本主要引入了对非CSS源码的更好支持，这一改进对于处理混合了CSS和其他语言的源码文件特别有价值。

新增Input#document属性

在8.5版本中，PostCSS新增了Input#document属性，与现有的Input#css属性配合使用：

root.source.input.document // 获取完整文档内容
root.source.input.css      // 仅获取CSS部分

这个改进使得PostCSS能够更好地处理以下场景：

• 内嵌在HTML中的<style>标签
• Vue.js/Single File Components中的样式部分
• Svelte组件中的样式代码
• 各种CSS-in-JS实现中的CSS片段

技术背景与应用场景

为什么需要这个特性

在传统CSS处理流程中，工具通常只需要处理纯CSS文件。但随着前端开发的演进，CSS经常被嵌入到其他类型的文件中：

1. HTML文件：通过<style>标签内联CSS
2. 组件化框架：Vue/Svelte等框架的单文件组件
3. CSS-in-JS：JavaScript中直接编写CSS样式

PostCSS 8.5的这一改进使得样式检查工具（如Stylelint）能够更准确地定位问题，因为现在它们可以访问完整的原始文档而不仅仅是提取出来的CSS部分。

实际应用示例

考虑一个Vue单文件组件：

<template>
  <div class="example">Hello World</div>
</template>

<style>
.example {
  color: red;
}
</style>

使用PostCSS 8.5处理时：

• input.document将包含整个Vue文件内容
• input.css将只包含.example { color: red; }部分

这使得插件能够：

1. 更精确地报告错误位置（基于完整文件而非提取的CSS）
2. 实现更智能的代码转换
3. 保持源映射的准确性

开发者影响与升级建议

对于大多数PostCSS用户来说，8.5版本的升级是平滑的，不需要特别的迁移工作。主要受益者是：

1. 工具开发者：特别是开发PostCSS插件和CSS处理工具的作者
2. 框架维护者：那些需要处理嵌入式CSS的框架开发者
3. 样式检查工具：如Stylelint这类需要精确源码位置的工具

总结

PostCSS 8.5通过引入Input#document属性，显著提升了对嵌入式CSS的处理能力，使前端工具链能够更精确地处理现代开发中的各种CSS使用场景。这一改进虽然看似微小，但对于提升开发体验和工具质量有着重要意义。