search

sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
80.05k stars 4.25k forks source link

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

Open jerriclynsjohn opened 4 years ago

jerriclynsjohn commented 4 years ago

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 commented 4 years ago

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

simonbernard2 commented 2 years ago

I'm also having this bug.

benwoodward commented 2 years ago

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

image

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

image

EDIT: Also happening if I remove the shorthand syntax:

image

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

image

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 commented 2 years ago

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

git-no commented 2 years ago

@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 commented 2 years ago

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

git-no commented 2 years ago

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

filpgc commented 1 year ago

any update on this?

git-no commented 1 year ago

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 commented 7 months ago

Confirmed still broken in Svelte 5. Related: #7170

dummdidumm commented 7 months ago

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

Serator commented 6 months ago

Reproduction

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