Blazor reconnect CSS in .NET 10 has a syntax error

[dimodi]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Hello,

Are we sure about the correct CSS syntax in this code snippet? It looks like there is a leftover from some SCSS syntax and the W3C CSS validator doesn't like that.

aspnetcore/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/ReconnectModal.razor.css

Lines 33 to 38 in 828955c

	animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
	&[open]
	{
	animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
	animation-fill-mode: both;

#components-reconnect-modal {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

Expected Behavior

No CSS rule nesting and valid CSS code.

#components-reconnect-modal {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
}

#components-reconnect-modal[open] {
    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

Steps To Reproduce

Create a .NET 10 Blazor Web App project and review Components/Layout/ReconnectModal.razor.css.

Exceptions (if any)

CSS parse error

.NET Version

10.0.100-preview.6.25358.103

Anything else?

No response

[javiercn]

@dimodi thanks for contacting us.

I'm not sure if you are referring to &[open] but that's valid CSS syntax since Baseline 2023 https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

I suspect the validator is not up to date. I imagine that if you look at errors in the console you won't see any.

[dotnet-policy-service]

Hi @@dimodi. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[dimodi]

@javiercn OK, thanks! And sorry about the false alarm.