Class directive breaks with token "/" for TailwindCSS width classes

[jerriclynsjohn]

Describe the bug When using specific classes like "w-1/2", which is standard tailwind class, the svelte compiler throws an error "Expected >svelte(unexpected-token)"

I'm pretty sure it is because the compiler assumes token ">" after the token in question "/".

To Reproduce Write any code with a class directive class:sm:w-1/2={!contact} in a Svelte+Tailwind project.

Expected behavior Compiler should not assume that the closing ">" token to succeed token "/" in a string after the class directive.

[jerriclynsjohn]

This bug is not reproducible now and I'm closing the issue.

[simonbernard2]

I'm also having this bug.

[benwoodward]

I'm experiencing this too, in 3.44.2, what version are you on?

Also finding that Svelte doesn't recognise border-gray-400 and border-gray-400/50 as distinct attributes:

EDIT: Also happening if I remove the shorthand syntax:

EDIT: Also happening if the class doesn't clash at all:

I should add that I'm using windicss v3.2.1 and vite-plugin-windicss v1.5.4.

EDIT: Upgrading to svelte 3.46.4, windicss 3.5.0 and vite-plugin-windicss v1.8.1 did not fix this issue for me.

[geoffrich]

Reopening since this still seems to be an issue - can someone provide a REPL showing the issue?

[git-no]

@geoffrich

Reopening since this still seems to be an issue - can someone provide a REPL showing the issue?

Here is example repositoryI created for you with the issue in index.svelte git repo

[benwoodward]

@git-no thanks, I totally forgot to do this.

[git-no]

I have also this issue, Class directive breaks with token "/" for TailwindCSS

[filpgc]

any update on this?

[git-no]

I remove my demo repository because it was not used for 1 1/2 years.

To remind, this does not work: class:bg-red-600/10={hasError}

[Rich-Harris]

Confirmed still broken in Svelte 5. Related: #7170

[dummdidumm]

See https://github.com/sveltejs/svelte/issues/7170#issuecomment-2041078111 for a proposal

[Serator]

Reproduction

<div class:bg-white/5={true}></div> causes an error: Expected token >.

• Svelte 5 🔴
• Svelte 4 🔴
• Tailwind 🟢 - is a normal Tailwind class.