Vaadin集成ShepherdJS时postcss-lit插件报Unexpected token错误求助

1. 相关代码片段 #

动态添加CSS的JavaScript代码 #

var link = document.createElement("link")
link.rel = "stylesheet"
link.href = "./scripts/styles.css"
document.head.appendChild(link)

目标CSS文件（styles.css）内容 #

.custom-class {
    background-color: black;
}

2. 环境与错误现象 #

• 已安装最新版npm及postcss包
• 基于Vaadin + ShepherdJS的项目，启动引导流程（Tour）时抛出错误：

[plugin:postcss-lit] Unexpected token (1:0)
1 | .custom-shepherd-class {
| ^
2 | background-color: black;
3 | }

• 触发错误后，浏览器DOM中能看到styles.css文件，但内容为空；错误弹窗点击外部可消失

3. 问题原因 #

核心原因是postcss-lit插件误将普通CSS文件当作Lit组件的CSS模板字符串解析：

• Vaadin项目默认集成的postcss-lit插件，专门用于处理Lit组件内的css``模板语法，会尝试解析所有匹配特定规则的CSS资源
• 动态创建<link>标签加载的styles.css，被插件错误识别为Lit组件内的CSS代码片段。由于普通CSS没有包裹在Lit的css模板标签中，插件解析时无法识别开头的.custom-shepherd-class选择器，直接抛出"Unexpected token"错误
• 解析失败后，插件中断了CSS文件的正常加载，导致DOM中虽存在该文件条目，但内容为空

内容的提问来源于stack exchange，提问作者Ji Lin