@tailwindcss/vite@alpha Vite error if using [&_div]:flex and url() with encoded content in plugins

[saadeghi]

What version of Tailwind CSS are you using?

@tailwindcss/vite 4.0.0-alpha.30

What build tool (or framework if it abstracts the build tool) are you using?

vite 5, svelte 5

What version of Node.js are you using?

v22.10.0

What operating system are you using?

For example: macOS

Reproduction URL

https://github.com/saadeghi/tw4alpha-vite-url-bug
it's an empty Vite/Svelte project.

npm i
npm run dev

There's [&_div]:flex class in src/routes/+page.svelte
There's a Tailwind plugin in src/myplugin.js

Describe your issue

✅ Having a Tailwind plugin like this works as expected

export default ({ addComponents }) => {
  addComponents({
    ".circlemask": {
      "mask-image": "url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e\")"
    }
  })
}

✅ An arbitrary class name like [&_div]:flex works as expected.

❌ But having both in the same project using @tailwindcss/[email protected] causes Vite error:

[plugin:vite:css] [postcss] /src/tailwind.css:615:5: Unknown word

✅ This wasn't an issue in Tailwind CSS 3
✅ The issue doesn't happen with @tailwindcss/[email protected]
It was really hard to debug for me because Vite just says Unknown word. No more details. After days I found that arbitrary class names with [] and & cause the issue if there's a plugin including url() with encoded image in it.

[thecrypticace]

I did a bit of debugging here and it appears that Svelte has compiled the .svelte file before Tailwind is able to scan it. This causes [&_div]:flex to show up in the HTML as [&_div]:flex which produces invalid CSS and causes it to throw under certain situations.

In this case I think the presence of a potentially re-writable url(…) in the CSS causes additional validation to happen and is why the error is conditional on the inclusion of circlemask.

We don't have a workaround for this at the moment but wanted to drop in some details about what appears to be happening.

[dummdidumm]

The issue stems from having the tailwind vite plugin after the SvelteKit vite plugin, but it should come before it, so that the tailwind plugin runs on the unprocessed Svelte files, else it would run on the compiled JS output.
Curious if the order is on purpose that way or just by accident (if accident, the v4 documentation should definitely show that the plugin goes before the Svelte plugin)