CSS isolation isn't working because the css is added in the wrong order

[jbaumflek]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I have a series of nested components, both in the same RCL. I have added the outer div where necessary to achieve the css isolation. I have pushed common CSS up to as high a parent component as I can. However, there are times when I want to override the parent component's ::deep styles with the child component's own ::deep style (::deep is required because I'm using a third-party component library). The only reason this doesn't work is that the RCL's css is added randomly, AFAIK. In other words, since with CSS, last one wins, the order in which the components styles get added to my library's generated css file should be ... rankable?
Currently:
<child component's styles> ::deep .style1 {lineheight: 2em !important;} <parent component's styles> ::deep .style1 {lineheight: 1em; }
This results in the parent style being the matched style.

Expected Behavior

I'd like the css builder to build a graph of dependencies and order with child css added after parents. That way the child's overrides will take precedence.
<parent component's styles> ::deep .style1 {lineheight: 1;} <child component's styles> ::deep .style1 {lineheight: 2em !important; }

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

8

Anything else?

This is the child component. Note inclusion line in .bundle.scp.css file.

I added it with two paths since the first wasn't working.

This is the parent component's css selector

Since this is coming in later in the css, the parent component's styling is applied.

[javiercn]

@jbaumflek thanks for contacting us.

If you need to beat specificity or very precisely control it, we recommend you rely on cascade layers https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers

As for the "random" aspect of the imported files, they aren't random, there's a deterministic order applied to them.

Finally, dotnet/razor#7606 is likely to help here.

[jbaumflek]

Thank you!!