search

dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.48k stars 10.04k forks source link

Blazor CSS-isolation :global #44634

Open yoerivdm opened 2 years ago

yoerivdm commented 2 years ago

Is there an existing issue for this?

Is your feature request related to a problem? Please describe the problem.

Given two separate components eg Button and Divider. I want to provide extra margin on the button if it is preceded by a Divider.

Divider has a .divider css class but I can't write .divider ~ button in the css file of the button component because the css isolation can't reference elements outside of the current component.

Describe the solution you'd like

Add a global style (cfr Reac global styles) to break out of the isolation when referencing components outside of the current component.

A style like: :global(.divider) ~ button would generate .divider ~ button [b-0a9f1qq166] instead of isolating the divider class.

Currently I have to add a non-isolated css to add specific margins (or other styles) for a certain sequence of components.

Additional context

No response

javiercn commented 2 years ago

@yoerivdm thanks for contacting us.

Could you not achieve the same result by doing something like .divider::deep ~ button inside the Divider component isolated CSS?

yoerivdm commented 2 years ago

I could add .divider ~ ::deep .button, this would add the isolation to the divider end leave the .button class as-is. Strange behaviour though, looks like we 'trick' the processor by telling that .button is a descendant of divider while it is actually not. In my understanding deep is used to reference descendants of isolated components (that also have css isolation), just overwrite properties with added specificity because of the attribute.

Few examples: .divider ~ ::deep .button in divider.razor.css results in .divider[b-ccg6fha73r] ~ .button ::deep .divider ~ .button in button.razor.css results in [b-ccg6fha73r] .divider ~ .button

I could use the first example since it selects the correct elements, despite the fact that I want to set the styles in the other css file. This is just one isolated sample, I don't want to mix up a bunch of styles in diff. components.

Just to give an extra sample ... our existing application uses a style on the body to set a base-theme style. Every component can set theme-specific rules by adding :global(.theme1) button styles.

javiercn commented 2 years ago

@yoerivdm we would suggest for now you use .divider ~ ::deep .button.

We'll keep this open for now to collect feedback, however, is unlikely we do something unless we see more requests for it.

yoerivdm commented 2 years ago

Thanks! I've read some other issues ... looks like the need for a reversed ::deep is more or less the same although I'm still missing some examples.

ghost commented 2 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

baktay commented 1 year ago

May I have a suggestion. Can you remove the pseudo css ::deep and just have the isolated razor.css work like normal css. It gets very confusing when a css is added and it does not work without this tag. We should be able to get to the child elements automatically on the razor page. It would be great if Blazor Server could figure this out automatically (even for styling of components without ::deep, on that particular razor page) on .NET 8

javiercn commented 1 year ago

@baktay it's not clear what your proposal is. But in general, if you are asking to co-locate CSS with the Razor file without scoping it. That's not something we want to do. There is no way to define the order in which to bundle individual CSS fragments, so they can't be composed into a single file. We can do that today with scoped CSS because we know each file is isolated and won't interfere with the styles on other files.

farshidsaberi commented 7 months ago

It sounds to be use full. For example think a loading animation component that can be placed in any component and being enabled or disabled. If we has a reverse deep for example :global() function in css. We could use css :has() and select the first container of component for "loading progress" and apply the style for showing "loading progress".