I was using MS docs to configure a custom scope identifier for my isolated css code.
I added this to my .csproj file

  <ItemGroup>
    <None Update="Pages/Jobs.razor.css" CssScope="jobs-scope" />
  </ItemGroup>

this is my Jobs.Razor.css file

::deep .blurry-dialog-background {
  backdrop-filter: blur(10px);
}

This is how I would like to reference the css class in my Jobs.Razor.cs

DialogOptions options = new()
{
    ClassBackground = "blurry-dialog-background[jobs-scope]",
    CloseButton = true,
};

But what I can see using chrome dev tools is, that the generated file looks like this:

/* _content/Project/Pages/Jobs.razor.rz.scp.css */
[jobs-scope] .blurry-dialog-background {
  backdrop-filter: blur(10px);
}

So how do I correctly identify the css so I can use it in my code? All auto generated css scopes look different and I’m not sure if I’m doing something wrong or if it is a bug?