CSS styles not applied if using attribute HostBinding and styling a DIV with the direct child selector in a production build

[Marcarrian]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

If using attribute HostBinding and styling a DIV element with the direct child selector, the styles are not applied.
This happens only in a producton build.

Reproduction:
app.component.html

<div class="example-1">
  Example 1 (css: > div)
</div>
<div class="example-2">
  Example 2 (css: div)
</div>
<section class="example-3">
  Example 3 (css: > section)
</section>
<section class="example-4">
  Example 4 (css: section)
</section>

app.component.ts

import {Component, HostBinding} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  @HostBinding('attr.data-foo')
  public foo = 'bar';
}

app.component.scss

:host {
  &[data-foo="bar"] {
    > div.example-1 {
      background-color: cyan; // not working
    }

    div.example-2 {
      background-color: yellow; // working
    }

    > section.example-3 {
      background-color: red; // working
    }

    section.example-4 {
      background-color: green; // working
    }
  }
}

In the transpiled CSS we noticed various issues:

Example 1:

• "nghost" attribute is missing after the attribute selector [data-foo=bar]
• "nghost" attribute after div.example-1 should instead be "ngcontent"

Example 2:

• "ngcontent" attribute is missing after div.example-2. IMPORTANT! This is not the cause of this problem, but causes the styles to leak into child components. Please let me know if I should file a separate issue for this case.

Please provide a link to a minimal reproduction of the bug

https://github.com/Marcarrian/angular-15-attribute-host-binding-issue

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.1.5        
Node: 16.16.0              
Package Manager: npm 8.11.0
OS: win32 x64              
                           
Angular: 15.1.4            
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.5
@angular-devkit/build-angular   15.1.5
@angular-devkit/core            15.1.5
@angular-devkit/schematics      15.1.5
@angular/cli                    15.1.5
@schematics/angular             15.1.5
rxjs                            7.8.0
typescript                      4.9.5

Anything else?

No response

[JeanMeche]

I looks like that it was a regression introduced in 15.1.2. I suspect my fix #48558 to be the cause. I will look into it.

Thanks for the report 👍

[JeanMeche]

@dario-piotrowicz. It definitely looks like my change is at the root of this issue (any hex character after the > will break the shimming) but I was not able to reproduce it in the unit tests.

In host_and_host_context_spec.ts:
expect(shim(':host[foo] > div {}', 'contenta', 'a-host')).toEqualCss(('[foo][a-host] > div[contenta] {}'))
Is valid.

Any idea why ?

[dario-piotrowicz]

@JeanMeche I'm not too sure, but if the test is valid I suspect that that's not the text that the shim function is receiving in production (since shimming happens are the processing styles and whatnot), as a first step I would make absolutely sure to know what the shim function is actually receiving when it is breaking (by dropping at its start a console log or a breakpoint)

have you tried that?

[JeanMeche]

Thanks for the heads up. Just found the difference: Selectors had no space on prod builds !

I've opened #49118 for review

[Marcarrian]

Hey @JeanMeche, thank you for the analysis and the potential fix. We worked around this issue by using the CSS "is" selector:

:host {
  &:is([data-foo="bar"]) {
    > div.example-5 {
      background-color: lightskyblue; // working in dev and prod build
    }
  }
}

In the constellation of using two attribute selectors, we noticed a similar issue. This time, the styles are applied only in a production build.

:host {
  &:is([data-foo="bar"], [data-foo-2="bar-2"]) {
    > div.example-6 {
      background-color: violet; // ONLY working in prod build
    }
  }
}

Please let me know if I should file a separate issue or if this is sufficient.

I have updated my reproduction repository with examples 5 and 6.

[JeanMeche]

Nice finding, Could you open a separate issue ? It wasn't working even before the regression was introduced !

[Marcarrian]

I have created a separate issue #49157

[hisham]

any update on the fix for this issue? We're affected by it as well.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}