@starting-style not supported in <style> blocks

[jrmoynihan]

Describe the bug

Given this style block:

<style>
	@starting-style{
		.card{
			opacity: 0;
			height: 0;
		}
	}	
	.card {
		background-color: orange;
		max-width: max-content;
		padding: 1rem;
		border-radius: 1rem;
		display: grid;
		margin: auto;
		transform-origin: bottom;
		overflow: hidden;
		transition: opacity 1s, display 1s, height 1s;
		transition-behavior: allow-discrete;
	}
</style>

Svelte outputs the following CSS:

@starting-style{}.card.svelte-1xboevw{background-color:orange;max-width:max-content;padding:1rem;border-radius:1rem;display:grid;margin:auto;transform-origin:bottom;overflow:hidden;transition:opacity 1s, display 1s, height 1s;transition-behavior:allow-discrete}

Note the empty ruleset within the @starting-style block. This rule is required to enable discrete entry transitions e.g. from display: none. Ideally, Svelte should be adding a scoped .card.svelte-[hash] rule within that block to the stylesheet.

Moreover, supporting this declaration would also likely help unlock more performant transitions directives provided by Svelte itself, without the need for JS functions.

Possibly related:
#8587

Reproduction

Not Working (Svelte)
https://svelte.dev/repl/74f096b3e2884455b47b9e6a2e6b24e9?version=4.2.1
Working (Codepen)
https://codepen.io/jrmoynihan/pen/jOXxeWG?editors=1111

Logs

No response

System Info

Chrome 117+, MacOS, Svelte 4.2.1

Severity

annoyance

[ZachSaucier]

This is a very important feature to me!

Another demo (not Svelte): https://codepen.io/web-dot-dev/pen/zYeJbgw?editors=0100

Is there a way to prevent this from being stripped in the mean time?

Edit: I ended up putting this code in a global CSS file.

[brunnerh]

This is a very important feature to me!

This is not even supported yet by two of the major browsers.

[ZachSaucier]

This is not even supported yet by two of the major browsers.

True! Yet it is still important to me. Including it doesn't hurt anything in browsers that don't support it so it is progressive enhancement.

[jrmoynihan]

This is a very important feature to me!

This is not even supported yet by two of the major browsers.

Still a good idea to address it, because the implementation would likely affect other @ rules in CSS. This particular rule also solves some of the harder CSS issues, like animating from display: none, or with animating newer features like the top-layer and overlays. I agree with @ZachSaucier that this is nice progressive enhancement where usable.

[dummdidumm]

Fixed in Svelte 5 but we should add a regression test

[HugeLetters]

btw there's workaround

:root {
  @starting-style {
      .selector { ..styles }
  }
}

you could also use local synax

.selector {
  @starting-style {
       ..styles
  }
}

but I've noticed it doesn't work for ::backdrop for whatever reason - "global" syntax works

here's a small demo

[Blankeos]

btw there's workaround

@HugeLetters doesn't seem to work for Svelte 4. (I mean the style works, but it doesn't remove the warning).

[matths]

I tried the demo from @HugeLetters and set the Svelte version of the REPL to 4.2.19 and gave the <style> Tag a lang="scss" attribute and that demo still works in the REPL.
But in my lokal setup it doesn't. There I get an empty @starting-style {} inside the rendered style block.
I have no idea, why. ;(