⚡️ Lightning CSS

一个极快的CSS解析器、转换器和最小化器，用Rust编写。使用Parcel、作为独立库或CLI，或通过插件与任何其他工具一起使用。

功能

• 极快 – 解析和最小化大文件只需毫秒，通常比其他工具生成的输出更小。请参见下方的基准测试。
• 类型化属性值 – 许多其他CSS解析器将属性值作为未类型化的令牌序列处理。这意味着任何想要对这些值执行操作的转换器都必须自己解析它们，导致重复工作和不一致。
• 浏览器级别的解析器 – Lightning CSS建立在Mozilla和Firefox的贡献基础上，使用cssparser和selectors crate。这些提供了一个强大的通用CSS解析基础，在Lightning CSS中实现对特定CSS规则和属性的支持。
• 最小化 – Lightning CSS的一个主要目的是使CSS文件尽可能小。这包括合并相邻规则、移除不必要的空格、注释和属性值，以及使用短名称替代长名称。
  • 尽可能将长手写属性合并为缩写属性。
  • 当安全时，合并相邻的具有相同选择器的规则。
  • 当尺寸更小且不影响功能时，将CSS转换操作合并为单个矩阵或其逆。
  • 删除不需要的供应商前缀，基于提供的浏览器目标。
  • 尽可能减少calc()表达式。
  • 尽可能将颜色转换为更短的十六进制表示。
  • 最小化渐变。
  • 最小化CSS网格模板。
  • 规范化属性值顺序。
  • 删除浏览器可以推断出的默认属性子值。
  • 许多微优化，例如转换为更短的单位、删除不必要的引号等。
• 供应商前缀 - Lightning CSS接受一组浏览器目标，并自动添加（和删除）供应商前缀。
• Browserslist配置 - Lightning CSS支持可选的Browserslist配置发现，以解决浏览器目标和集成现有工具和配置设置。
• 语法降低 - Lightning CSS解析现代CSS语法，并根据浏览器目标生成更兼容的输出。
  • CSS嵌套
  • 自定义媒体查询（草案规范）
  • 逻辑属性
  • 颜色级别5
    • color-mix() 函数
    • 相对颜色语法，例如 lab(from purple calc(l * .8) a b)
  • 颜色级别4
    • lab()、lch()、oklab() 和 oklch() 颜色
    • color() 函数支持预定义的颜色空间，如 display-p3 和 xyz
    • rgb 和 hsl 函数中的空格分隔的组件
    • 带alpha的十六进制语法
    • hwb() 颜色语法
    • 不透明度的百分比语法
    • #rgba 和 #rrggbbaa 十六进制颜色
  • 选择器
    • :not 多参数
    • :lang 多参数
    • :dir
    • :is
  • 双重位置渐变停止（例如 red 40% 80%）
  • clamp()、round()、rem() 和 mod() 数学函数
  • 对齐简写（例如 place-items）
  • 两个值的 overflow 简写
  • 媒体查询范围语法（例如 @media (width <= 100px) 或 @media (100px < width < 500px)）
  • 多值 display 属性（例如 inline flex）
  • system-ui 字体系列备选方案
• CSS模块 - Lightning CSS支持编译CSS模块的子集功能。
  • 局部作用域的类和id选择器
  • 局部作用域的自定义标识符，例如 @keyframes 名称，网格线/区域，@counter-style 名称等。
  • 支持启用局部作用域的CSS变量和其他虚线标识符。
  • :local() 和 :global() 选择器
  • composes 属性
• 自定义转换 – 可以使用 Lightning CSS 访问者 API 来实现自定义转换插件。

文档

可以从 Parcel、作为 JavaScript 或 Rust 的独立库、使用独立 CLI 或作为任何其他工具中的插件使用 Lightning CSS。请参阅 Lightning CSS 网站 中的文档。

基准测试

$ node bench.js bootstrap-4.css
cssnano: 544.809ms
159636 bytes

esbuild: 17.199ms
160332 bytes

lightningcss: 4.16ms
143091 bytes


$ node bench.js animate.css
cssnano: 283.105ms
71723 bytes

esbuild: 11.858ms
72183 bytes

lightningcss: 1.973ms
23666 bytes


$ node bench.js tailwind.css
cssnano: 2.198s
1925626 bytes

esbuild: 107.668ms
1961642 bytes

lightningcss: 43.368ms
1824130 bytes

要查看更多工具和输入的比较基准，请参阅 此处。请注意，显示的一些工具执行不安全的优化，可能会改变原始 CSS 的行为以利于更小的文件大小。Lightning CSS 不这样做 – 输出 CSS 应始终与输入的行为相同。在比较工具之间的文件大小时，请记住这一点。