[SOLVED] SSR compile fails with TailwindCSS "Cannot read properties of undefined (reading '5')

I am making a Github pages site with SvelteKit and Tailwind CSS as a learning project. I am using Adaptor static to render the site for hosting on github pages so everything ends up getting Server side pre rendered.

Error:

[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

I have a Svelte component that has a named tailwind group so that i can do some conditional highlighting. The basics of the component are like this:


<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>

This works in this REPL that uses tailwind strangely! is this issue just to do with SSR? https://svelteboard.com/repl

When i made this component I had inline declarations of the class with a prenamed group/name like this:

<div class="group/name">
    <div
        class="group-hover/name:bg-blue"
    >
        {title}
    </div>
    <slot/>
</div>

that worked fine (but highlighted all instances of the component on hover.) but when i changed to the newer implementation it breaks with the above error & even when i roll back to a previous check in the error persists.

Am i implementing something wrong, my tailwind config is unmodified from the svelte + tailwind setup, and svelte config has vitePreprocess and adapterstatic only.

I Tried updating dependencies to latest versions downgrading postcss to 8.2 (suggested by another question) reverting to previous revision, (does fix eventually but still cant implement this feature)