Changing color of Highlighted words of search results work locally but not in higher environment after deployment

Describe the bug Changes applied to styles are working in local but not working in higher environments. When inspecting the CSS on dev tools, the newly added color is not being picked up by the browser at all. Testing ::ng-deep with other components and they work fine but not with ngx-extended-pdf-viewer. Project uses SCSS.

Version info

• Version ^15.0.5

Desktop (please complete the following information):

• Browser - Chrome

Smartphone (please complete the following information):

• Device: N/A

To Reproduce If you really can’t provide me a reproducer, please tell me how to reproduce the behavior:

1. Go to component where ngx-extended-pdf-viewer is used.
2. Open imported SCSS file and include code snippet below:

::ng-deep ngx-extended-pdf-viewer div.textLayer > span > .highlight.color0.selected {
  background: #ffda26 !important;
  border: 1px solid grey;
  opacity: 1;
}

1. Code above will work when project is served locally but does not work on deployed environment.
2. You’ll see that the code above is nowhere to be found in dev tools on higher environment.

Demo PDF file Searching within any PDF file.

Thank you! Thank you for all your support in providing such an awesome package!

[Huey-H]

Got it. Once again, thank you for all your guidance and this awesome package! 😃

[stephanrauh]

Thanks for sending me the screenshot. Now I know I’ve misunderstood your question.

Maybe it’s a good idea to drop ::ng-deep and to move your CSS rule to your global styles.scss. At the end of the day, both approaches result in identical code (at least I think so), but the styles.scss approach is easier to understand. It’s just a global CSS rules, without any Angular magic. After finishing your bug-hunting session, you can move your CSS rule back to the component, or you can leave it globally. Use the approach offering better maintainability, there’s no general advice, it depends on your application.

That said, I suspect you’ve run into one of two error scenarios:

• Your CSS selector is wrong. Such as a missing or superfluous space. That happens to me all the time.
• Your CSS selector priority isn’t high enough. I don’t think so, because you say your CSS rules don’t appear on the right-hand side of the screenshot, but that’s the problem most people encounter.

It’s a bit weird your CSS rule works in developer mode, but fails to work in production (or staging, or whatever). When Angular was younger, these things happened frequently. It took some time to make sure the optimizer doesn’t break any logic. But nowadays, that’s unlikely. But it’s not impossible. So I suggest you find out which CSS rule highlights the search result in your local build. Copy it to notepad, so you can compare it later to the same CSS rule in your production environment.

In any case, I suggest reading my article https://www.beyondjava.net/gentle-introduction-css. Chances are you don’t need it, because you’re already speaking CSS fluently, but it’s one of those once-in-a-lifetime opportunities to do some self-advertising without feeling shame. 😃