Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Blazor] ::deep does not work in combination with [dir="rtl"]

See original GitHub issue

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>-tag to <html lang="en" dir="rtl">
I’ve added a <div> 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.css with:

[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

Issue Analytics

State:
Created 10 months ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

SteveSandersonMScommented, Nov 23, 2022

Feels strange to have this difference, right?

The difference is only because ::deep .rtlspecific { ... } is shorthand for * ::deep .rtlspecific { ... }. If you wish, you could use the longhand version for the ltr case and then the code would look more symmetrical.

I’ll close this as answered now. Hope that’s OK.

0reactions

vnbaaijcommented, Nov 22, 2022

BTW if .rtlspecific is within the current component (not a descendant) then you wouldn’t even need ::deep at all. The syntax would just be:

Yes, understood. Thing is I’m ‘composing’ a lot of things with components getting nested and therefore need the ::deep. For example, I have a TableOfContents component that has a <ul> list in an Accordion component and I need to target the <ul> from the TableOfContents CSS.

I’ve made the repo public now.

The [dir="rtl"] * ::deep .rtlspecific syntax works, so there is a way to get it working now.

However, I do still think it is strange I would need to do it like this when compared to the ‘normal’ LTR version. In the repo site I now have the CSS like this (I know I do not really need the ::deep in this case, but it illustrates the effect):

::deep .rtlspecific {
    color: green;
    border: 1px dotted green;
}
[dir="rtl"] * ::deep .rtlspecific {
    color: red;
    border: 1px dotted red;
}

Feels strange to have this difference, right?