[Blazor] ::deep does not work in combination with [dir="rtl"] #45138
Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the bug
If you have an isolated CSS file that contains [dir="rtl"]-selector in combination with ::deep-selector the generated CSS does not work correctly because there is no space between the two selectors.
Because of the space not being there, targeting rtl-languages with isolated CSS icw [dir] selector is very hard/impossible.
Expected Behavior
The generated CSS should contain a space between [dir="rtl"]-selector and ::deep-selector.
What gets generated:
[dir="rtl"][b-fl] fluent-button {
display: none;
position: fixed;
bottom: 45px;
left: 20px;
right: unset;
z-index: 99;
cursor: pointer;
}
What should be generated:
[dir="rtl"] [b-fl] fluent-button {
display: none;
position: fixed;
bottom: 45px;
left: 20px;
right: unset;
z-index: 99;
cursor: pointer;
}
NOTE: There are 2 spaces generated between the generated ::deep selector and the fluent-button selector
Steps To Reproduce
Repo: https://github.com/vnbaaij/CssIsolationBug
Standard new Blazor WebAssembly project.
- I changed
<html>-tagto<html lang="en" dir="rtl"> - I've added a at the bottom of the survey prompt withing the existing div:
<div class="rtlspecific">
Some RTL content
</div>
- I've put the
<SurveyPrompt>in<Counter> - I've added
SurveyPrompt.razor.csswith:
[dir="rtl"] ::deep .rtlspecific {
color: red;
border: 1px dotted red;
}
Running this gives:
No red text/border
Going to Dev Tools you'll find in CssIsolationBug.styles.css:
:
/* /Shared/SurveyPrompt.razor.rz.scp.css */
[dir="rtl"][b-e23gho3fj3] .rtlspecific {
color: red;
border: 1px dotted red;
}
Adding the space between [dir="rtl"] and [b-e23...] in Dev Tools gives the desired effect:
Exceptions (if any)
No response
.NET Version
.NET 6 and higher
Anything else?
No response