Parcel v2.4.0
1 月,我们宣布了 Parcel CSS,一个用 Rust 编写的超快速的新 CSS 解析器、编译器和压缩器。从那时起,我们一直在努力改进它,并添加了 许多新功能,并进一步提升了性能。今天,我们很高兴地宣布 Parcel CSS 现在是 Parcel v2.4.0 中的默认 CSS 转换器和压缩器!
新功能
#以下是自我们首次宣布以来添加到 Parcel CSS 的一些主要功能的摘要。
@custom-media
草案语法- 改进的自定义属性压缩
- 级联层(即
@layer
) - 注册的自定义属性(即
@property
) - CSS 颜色级别 4,包括
lab()
和其他颜色空间,并为旧版浏览器提供回退。 - 来自 CSS 颜色级别 5 的
color-mix()
函数 mask
、clip-path
和filter
的自动供应商前缀。- 以及 更多!
借助这些功能,Parcel CSS 现在可以作为许多常见基于 PostCSS 的设置的替代方案,包括 autoprefixer、postcss-preset-env、postcss-modules 和 cssnano。
升级
#在 Parcel v2.4.0 中,默认的 CSS 转换器和压缩器已更新为使用 Parcel CSS。在大多数项目中,这应该是无缝的。但是,有一些需要注意的地方。
PostCSS 仍然完全受支持,因此您当前的配置仍然可以正常工作。但是,我们在 Parcel 中添加了警告,以便在建议您更新项目的配置以提高构建性能时通知您。
cssnano 配置
#如果您在项目中有一个 cssnano 配置文件,例如 .cssnanorc
,它将不再默认使用。在构建项目时,您可能会在控制台中看到有关此问题的警告。如果您不再需要此配置文件,可以将其删除,或者设置 .parcelrc
以继续使用 cssnano。有关更多详细信息,请参阅 文档。
autoprefixer 和 postcss-preset-env
#在大多数情况下,Parcel 现在将自动处理供应商前缀和为您的浏览器目标转译 CSS,就像它对 JavaScript 所做的那样。您只需在 package.json
中设置 browserslist
字段,Parcel 就会处理剩下的工作。
Parcel 还提供对编译草案语法的可选支持,例如 嵌套、自定义媒体查询 和 伪类填充。有关 Parcel 所有 CSS 转译功能的更多信息,请参阅 新文档。
如果您之前使用 autoprefixer 和 postcss-preset-env 来实现这一点,您可能能够从 PostCSS 配置中删除它们以提高构建性能。如果这些是您唯一使用的 PostCSS 插件,您可以完全删除 PostCSS 配置。查看 文档 以了解更多详细信息。
CSS 模块
#当使用 .module.css
后缀命名时,CSS 模块由 Parcel 自动处理。以前,这是在幕后由 postcss-modules 提供支持的,但现在由 Parcel CSS 处理。
您还可以启用将所有 CSS 文件处理为 CSS 模块。以前,这是通过 PostCSS 配置文件中的顶级 modules
选项完成的。此选项已移至 @parcel/transformer-css
的 package.json
中的配置键。有关更多信息,请参阅 文档。
严格解析
#Parcel CSS 解析器比 PostCSS 更严格。当选择器、规则或声明无效时,它会报错。这很有用,因为它可以避免意外地发布在浏览器中加载时被忽略的代码。
在依赖项方面,Parcel CSS 也更符合规范。如果您在 CSS 自定义属性中具有 url()
依赖项,如果您通过相对路径引用文件,您可能会看到一个新的错误。这是模棱两可的,因为 CSS 规范实际上是根据使用 var()
的位置来解析这些依赖项,而不是根据自定义属性定义的位置。Parcel 现在要求自定义属性中的 url 使用绝对路径定义。有关详细信息,请参阅 文档。
其他更改
#Parcel v2.4.0 还带来了其他一些错误修复和改进,包括升级到 SWC 以改进 JavaScript 死代码消除,以及对类静态初始化块的支持。查看 变更日志 以查看所有改进的完整列表。