AI & Agent Dev Bug Sandbox Back to Radar

Turbopack Misreports Lightning CSS Parsing Errors As PostCSS

Turbopack 默认使用 Lightning CSS 解析 CSS，但当解析失败时，错误消息错误地声称是 PostCSS 转换输出，导致开发者误以为问题出在 PostCSS 配置或插件上。

mediumConfidence 72%Next.js Affected V16.3.0-Canary.52

Origin Analysis

Next.js 的 Turbopack 集成在捕获 CSS 解析错误时，未区分底层解析器（Lightning CSS 或 PostCSS），错误包装代码硬编码或错误地将消息标注为 PostCSS 转换结果，而实际解析错误来自 Lightning CSS。

1. 在 Next.js 项目中使用 Turbopack（next dev）。 2. 在任意 CSS 文件中写入以下内容： @media screen and (min-width: 700px), screen and (min-zoom: 120%) { .root { color: red; } } 3. 启动开发服务器，观察终端报错信息，错误中包含 'Generated code of PostCSS transform' 且指向 Lightning CSS 解析失败。

Fixing Code Block

function normalizeCssParseError(error: Error): Error {
  const message = error.message;
  if (message.includes('Parsing CSS source code failed') && message.includes('PostCSS transform')) {
    return new Error(message.replace(/PostCSS transform/g, 'Lightning CSS transform'));
  }
  return error;
}

该函数检测错误消息中同时包含 'Parsing CSS source code failed' 和 'PostCSS transform'（这是 Lightning CSS 解析错误被误标为 PostCSS 的典型特征），然后将所有 'PostCSS transform' 替换为 'Lightning CSS transform'。使用时，在 Turbopack 错误捕获的 catch 块中调用此函数后再抛出错误。