SvelteKit+TailwindCSS SSR编译报错：Cannot read properties of undefined (reading '5')

项目环境 #

• 基于SvelteKit + Tailwind CSS开发Github Pages学习项目
• 使用adapter-static进行服务端预渲染（SSR），用于部署到Github Pages

编译错误信息 #

编译时出现如下错误：

[postcss] Cannot read properties of undefined (reading '5')
21:35:57 [vite-plugin-svelte] ssr compile in progress ...
TypeError: Cannot read properties of undefined (reading '5')
    at Parser.parentheses (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:859:65)
    at Parser.parse (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1062:14)
    at Parser.loop (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1043:12)
    at new Parser (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:164:10)
    at Processor._root (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:53:18)
    at Processor._runSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:100:21)
    at Processor.astSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:145:17)
    at finalizeSelector (D:\Repositories\myrepo\node_modules\tailwindcss\lib\util\formatVariantSelector.js:125:59)
    at D:\Repositories\myrepo\node_modules\tailwindcss\lib\lib\generateRules.js:732:81
    at D:\Repositories\myrepo\node_modules\postcss\lib\container.js:96:18
TypeError: Cannot read properties of undefined (reading '5')
    at Parser.parentheses (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:859:65)
    at Parser.parse (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1062:14)
    at Parser.loop (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1043:12)
    at new Parser (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:164:10)
    at Processor._root (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:53:18)
    at Processor._runSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:100:21)
    at Processor.astSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:145:17)
    at finalizeSelector (D:\Repositories\myrepo\node_modules\tailwindcss\lib\util\formatVariantSelector.js:125:59)
    at D:\Repositories\myrepo\node_modules\tailwindcss\lib\lib\generateRules.js:732:81
    at D:\Repositories\myrepo\node_modules\postcss\lib\container.js:96:18
Error: Not found: /favicon.ico
    at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:395:13)
    at resolve (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:236:5)
    at Object.#options.hooks.handle (/fs/D:/Repositories/myrepo/node_modules/@sveltejs/kit/src/runtime/server/index.js:41:55)
    at Module.respond (/node_modules/@sveltejs/kit/src/runtime/server/respond.js:233:40)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
TypeError: Cannot read properties of undefined (reading '5')
    at Parser.parentheses (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:859:65)
    at Parser.parse (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1062:14)
    at Parser.loop (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:1043:12)
    at new Parser (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\parser.js:164:10)
    at Processor._root (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:53:18)
    at Processor._runSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:100:21)
    at Processor.astSync (D:\Repositories\myrepo\node_modules\postcss-selector-parser\dist\processor.js:145:17)
    at finalizeSelector (D:\Repositories\myrepo\node_modules\tailwindcss\lib\util\formatVariantSelector.js:125:59)
    at D:\Repositories\myrepo\node_modules\tailwindcss\lib\lib\generateRules.js:732:81
    at D:\Repositories\myrepo\node_modules\postcss\lib\container.js:96:18

组件代码 #

编写了一个使用Tailwind命名group实现条件高亮的Svelte组件，代码如下：

<script>
export let id;
export let title;
const setting= `group/${id}`
</script>

<div class="{setting}">
    <div
        class="{`group-hover/${id}:bg-blue-500`}"
    >
        {title}
    </div>
    <slot/>
</div>

该代码在Svelte REPL中可正常运行，但本地SSR编译时报错。此前使用固定命名的group（如group/name、group-hover/name:bg-blue-500）可正常工作，但会导致所有组件实例hover时同时高亮。

配置与尝试过的解决方案 #

• Tailwind配置为Svelte+Tailwind初始化的默认配置
• Svelte配置仅包含vitePreprocess和adapter-static
• 更新所有依赖到最新版本
• 降级postcss到8.2版本
• 回滚代码至之前可正常运行的版本

以上操作均未解决问题，无法实现动态group的功能。

疑问 #

是我的实现方式有误，还是这是SSR相关的问题？

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