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.

Angular 12 library, styles put in <head> element are in object

See original GitHub issue

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

Don’t known / other

Is this a regression?

Description

I have upgraded my library @AnnotationSro/ng-a-datepicker (https://github.com/AnnotationSro/ng-a-datepicker) to Angular 12.1.1.

While developing with ng build --watch and yarn link everything looks fine. After I build ng build --configuration production then yarn link my styles are broken.

Angular adds styles to <head> element, however, in the production version it looks like this:

<style>{"css":".ng-date-popup{position:absolute;z-index:99;left:0;right:0;bottom:-5px;transform:translateY(100%);padding:10px;background:#fff;border:2px solid #ced4da;border-radius:5px;width:300px;transition:opacity .05s}.ng-date-popup.position-bottom-hidden{opacity:0}.ng-date-popup.position-top{top:auto;bottom:100%}.ng-date-popup--header{display:flex;align-items:center}.ng-date-popup--next,.ng-date-popup--prev{color:#52b4f6;display:inline-block;text-decoration:none;cursor:pointer;background-color:transparent;border:2px solid transparent;border-radius:5px}.ng-date-popup--next[disabled],.ng-date-popup--prev[disabled]{color:#d8d8d8;cursor:default}.ng-date-popup--month{flex-basis:100px;flex-shrink:0;text-transform:capitalize;text-align:center}.ng-date-popup--year{width:100px;flex-basis:100px;flex-shrink:0;flex-grow:1;border:2px solid #ced4da;border-radius:5px;padding:4px 12px}.ng-date-popup--year:focus{color:#212529;background-color:#fff;border-color:#9fd6fa;outline:0;box-shadow:0 0 0 .25rem rgba(63,172,245,.25)}.ng-date-popup--date-row{display:flex;flex-wrap:wrap;border:1px solid #ced4da}.ng-date-popup--days{display:flex}.ng-date-popup--date-day,.ng-date-popup--days>*{flex-basis:calc(100% / 7);text-align:center}.ng-date-popup--date-day{border:1px solid #ced4da}.ng-date-popup--date-day:not(.ng-date-popup--date-disabled){cursor:pointer}.ng-date-popup--date-weekend{background:rgba(82,180,246,.15)}.ng-date-popup--date-disabled{background:rgba(206,212,218,.25);color:#212529}.ng-date-popup--date-active{background:#52b4f6;color:#fff}.ng-date-popup--relative-wrapper{position:relative}.ng-date-popup--time-row{display:flex;align-items:center}","warnings":[]}</style>

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 12.1.1
Node: 12.14.1
Package Manager: yarn 1.22.10
OS: win32 x64

Angular: 12.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.1
@angular-devkit/build-angular   12.1.1
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.1.1
@schematics/angular             12.1.1
ng-packagr                      12.1.0
rxjs                            6.6.3
typescript                      4.3.5