css_nesting_selector_invalid_placement false positive using tailwind 4 import reference

[minht11]

Describe the bug

Have style block like this

<style>
	@import '../../app.css' reference;
</style>

using new tailwind 4 syntax, see
Svelte diagnostic emits top level warning Nesting selectors can only be used inside a rule or as the first selector inside a lone ':global(...)'

Reproduction

n/a

Logs

No response

System Info

npmPackages:
    svelte: ^5.6.2 => 5.6.2

Severity

annoyance

[dummdidumm]

Please provide a reproduction

[dominikg]

according to the linked issue they did svelte integration tests

I also changed the Svelte and Vue integration tests to use this new syntax to ensure it works end to end.

but given this report i am not sure these tests work as expected. cc @philipp-spiess.

I can only assume that the reference import shoud point at a virtual css module provided by the tailwind vite plugin and not an existing file on disk.

How is this supposed to work with hmr when one of the values in the referenced config changes that is used within a scoped style rule or how does it replace @apply correctly is there a svelte preprocessor provided by tailwind v4?

[dominikg]

looking at their test code your reference import of app.css might be wrong,

https://github.com/tailwindlabs/tailwindcss/blob/7133d708c2ff1ab3c558dffe84fc5c0ee4d6d79f/integrations/vite/svelte.test.ts#L61
they use this syntax, which is nontheless not very ergonomic for svelte as defering to other.css breaks the SFC concept

        <style>
          @import 'tailwindcss/theme' theme(reference);
          @import './other.css';
        </style>

[philipp-spiess]

@minht11 It's a bit hard to understand what's going on here without a proper repro but I did just found a bug in that implementation where we'd still generate utilities with a reference import which is not expected. That might cause some styles to be imported there, sorry! Will get this resolved ASAP. A repro would still help to ensure we're fixing the right thing though.

How is this supposed to work with hmr when one of the values in the referenced config changes that is used within a scoped style rule or how does it replace @apply correctly is there a svelte preprocessor provided by tailwind v4?

We'll do some bookeeping for <style> modules we touch as part of the preprocessor and then, when Vite transforms the associated .svelte module styles later, mark these imports as proper dependencies in Vite (without doing any more transformations).

The @import '../../app.css' reference; API is something new we've inroduced in the latest beta so that you can pull in your Tailwind config without it generating unnecesary styles. The idea is that when we process this in Tailwind we only keep configuration settings but throw out all styles. It's a better version of the @import 'tailwindcss/theme' theme(reference); API since it can also handle custom utilities and plugins, etc.

[dominikg]

here is the preprocessor i was wondering about but it seems like it is not returning everything it should.

https://github.com/tailwindlabs/tailwindcss/blob/85da88f85138b6e91478b56e7b27e598b265bd78/packages/%40tailwindcss-vite/src/index.ts#L672 is missing the sourcemap for modifications and also any dependencies that went into processing that css code so i don't think css hmr for svelte files with tailwind v4 is working atm if you change something in the imported code.

[philipp-spiess]

@dominikg Oh I didn't see that we can just emit dependencies there too, can definitly change that!

[dominikg]

coming back to the warning here and looking at https://developer.mozilla.org/en-US/docs/Web/CSS/@import the syntax is valid css with reference being a layer name. But for svelte scoped styles i am not sure different layers would make sense, much less for code imported into a scoped style which is not what we recommend at all as it goes against the SFC approach.

So without preprocessors svelte won't be able to deal with this and because you are using plugin.api.sveltePreprocess which is not visible to static code analysis toolseven if your output code doesn't emit this. the warning is produced.

Other warnings or runtime errors might produce wrong stacktraces due to the missing sourcemaps.

I am not sure how to best solve this other than recommending not to use this kind of syntax and/or not using plugin.api.sveltePreprocess and instead passing the preprocessor directly in svelte.config.js.

This is one of the limitations we have with this api and one of the reasons it isn't widely used or recommended.

The best solution i can think of is for you to use syntax that passes the svelte compiler and apply tailwind modifications in post. For unocss this can work by using --at-apply instead of @apply iirc.

[dominikg]

this is getting off-topic, you can find me on svelte or vite discords. possibly best to start a discussion on vite discord as its likely not the only sfc framework affected by this.

[minht11]

Tailwind 4 does not seem to work in stackblitz, so here git repo demonstrating the issue.

It boils down to app.css having:

@import 'tailwindcss';

@utility interactable {
	&::after {
		display: none;
	}

	@media (any-hover: hover) {
		&:hover::after {
			display: block;
		}
	}
}

and then

<div></div>

<style>
	@import '../app.css' reference;
	/* @media (width >= theme(--breakpoint-sm))  */
	@media (min-width: 600px) {
		div {
			background-color: red;
		}
	}
</style>