Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem with @layer css option #420

Closed
DominikPieper opened this issue Nov 16, 2023 · 1 comment
Closed

Problem with @layer css option #420

DominikPieper opened this issue Nov 16, 2023 · 1 comment

Comments

@DominikPieper
Copy link

Hey everyone,

we have an strange error with the testing-library together with the latest PrimeNG versions. (Everything higher PrimeNG 16.3.x causes this error).

I'm not sure this if is a testing-library or jsdom problem? Seems like the usage of @layer is new in PrimeNG and that causes an error. Any ideas about how to get this working or what to do?

Error:

console.error
             Error: Could not parse CSS stylesheet
                 at exports.createStylesheet (...frontend/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
                 at HTMLStyleElementImpl._updateAStyleBlock (...frontend/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
                 at HTMLStyleElementImpl._attach (...frontend/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:19:12)
                 at HTMLHeadElementImpl._insert (...frontend/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:835:14)
                 at HTMLHeadElementImpl._preInsert (...frontend/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:756:10)
                 at HTMLHeadElementImpl._append (...frontend/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:862:17)
                 at HTMLHeadElementImpl.appendChild (...frontend/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:598:17)
                 at HTMLHeadElement.appendChild (...frontend/node_modules/jsdom/lib/jsdom/living/generated/Node.js:411:60)
                 at _SharedStylesHost.addStyleToHost (...frontend/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:359:14)
                 at _SharedStylesHost.onStyleAdded (...frontend/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:301:18)
                 at _SharedStylesHost.addStyles (...frontend/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:264:22)
                 at NoneEncapsulationDomRenderer.applyStyles (...frontend/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:728:31)
                 at _DomRendererFactory2.createRenderer (...frontend/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:462:22)
                 at _AnimationRendererFactory.createRenderer (...frontend/node_modules/@angular/platform-browser/fesm2022/animations.mjs:138:40)
                 at addComponentLogic (...frontend/node_modules/@angular/core/fesm2022/core.mjs:12811:133)
                 at instantiateAllDirectives (...frontend/node_modules/@angular/core/fesm2022/core.mjs:12603:9)
                 at createDirectivesInstances (...frontend/node_modules/@angular/core/fesm2022/core.mjs:12028:5)
                 at ɵɵelementStart (...frontend/node_modules/@angular/core/fesm2022/core.mjs:16319:9)
                 at KassenbuchComponent_Template (ng:///KassenbuchComponent.js:210:9)
                 at executeTemplate (...frontend/node_modules/@angular/core/fesm2022/core.mjs:11986:13)
                 at renderView (...frontend/node_modules/@angular/core/fesm2022/core.mjs:13184:13)
                 at renderComponent (...frontend/node_modules/@angular/core/fesm2022/core.mjs:13131:5)
                 at renderChildComponents (...frontend/node_modules/@angular/core/fesm2022/core.mjs:13229:9)
                 at renderView (...frontend/node_modules/@angular/core/fesm2022/core.mjs:13209:13)
                 at ComponentFactory.create (...frontend/node_modules/@angular/core/fesm2022/core.mjs:14121:13)
                 at initComponent (...frontend/node_modules/@angular/core/fesm2022/testing.mjs:27475:51)
                 at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (...frontend/node_modules/zone.js/bundles/zone.umd.js:411:30)
                 at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (...frontend/node_modules/zone.js/bundles/zone-testing.umd.js:300:43)
                 at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (...frontend/node_modules/zone.js/bundles/zone.umd.js:410:56)
                 at Object.onInvoke (...frontend/node_modules/@angular/core/fesm2022/core.mjs:11061:33)
                 at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (...frontend/node_modules/zone.js/bundles/zone.umd.js:410:56)
                 at Zone.Object.<anonymous>.Zone.run (...frontend/node_modules/zone.js/bundles/zone.umd.js:165:47)
                 at NgZone.run (...frontend/node_modules/@angular/core/fesm2022/core.mjs:10912:28)
                 at _TestBedImpl.createComponent (...frontend/node_modules/@angular/core/fesm2022/testing.mjs:27478:41)
                 at Function.createComponent (...frontend/node_modules/@angular/core/fesm2022/testing.mjs:27285:37)
                 at Function.<anonymous> (...frontend/node_modules/ng-mocks/webpack:/ng-mocks/libs/ng-mocks/src/lib/common/ng-mocks-global-overrides.ts:343:5)
                 at ...frontend/node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs:212:20
                 at Generator.next (<anonymous>)
                 at fulfilled (...frontend/node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs:61:24)
                 at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (...frontend/node_modules/zone.js/bundles/zone.umd.js:411:30)
                 at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (...frontend/node_modules/zone.js/bundles/zone-testing.umd.js:300:43)
                 at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (...frontend/node_modules/zone.js/bundles/zone.umd.js:410:56)
                 at Zone.Object.<anonymous>.Zone.run (...frontend/node_modules/zone.js/bundles/zone.umd.js:165:47)
                 at ...frontend/node_modules/zone.js/bundles/zone.umd.js:1314:38
                 at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (...frontend/node_modules/zone.js/bundles/zone.umd.js:445:35)
                 at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (...frontend/node_modules/zone.js/bundles/zone-testing.umd.js:331:43)
                 at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (...frontend/node_modules/zone.js/bundles/zone.umd.js:444:64)
                 at Zone.Object.<anonymous>.Zone.runTask (...frontend/node_modules/zone.js/bundles/zone.umd.js:210:51)
                 at drainMicroTaskQueue (...frontend/node_modules/zone.js/bundles/zone.umd.js:634:39) {
               detail: '@layer primeng{.p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-draggable .p-dialog-header{cursor:move}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}}\n',
               type: 'css parsing'
             }

             at VirtualConsole.<anonymous> (../../../node_modules/jest-environment-jsdom/build/index.js:60:23)
             at exports.createStylesheet (../../../node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:38:63)
             at HTMLStyleElementImpl._updateAStyleBlock (../../../node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
             at HTMLStyleElementImpl._attach (../../../node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:19:12)
             at HTMLHeadElementImpl._insert (../../../node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:835:14)
             at HTMLHeadElementImpl._preInsert (../../../node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:756:10)
             at HTMLHeadElementImpl._append (../../../node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:862:17)
             at HTMLHeadElementImpl.appendChild (../../../node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:598:17)
             at HTMLHeadElement.appendChild (../../../node_modules/jsdom/lib/jsdom/living/generated/Node.js:411:60)
             at _SharedStylesHost.addStyleToHost (../../../node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:359:14)
             at _SharedStylesHost.onStyleAdded (../../../node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:301:18)
             at _SharedStylesHost.addStyles (../../../node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:264:22)
             at NoneEncapsulationDomRenderer.applyStyles (../../../node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:728:31)
             at _DomRendererFactory2.createRenderer (../../../node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:462:22)
             at _AnimationRendererFactory.createRenderer (../../../node_modules/@angular/platform-browser/fesm2022/animations.mjs:138:40)
             at addComponentLogic (../../../node_modules/@angular/core/fesm2022/core.mjs:12811:133)
             at instantiateAllDirectives (../../../node_modules/@angular/core/fesm2022/core.mjs:12603:9)
             at createDirectivesInstances (../../../node_modules/@angular/core/fesm2022/core.mjs:12028:5)
             at ɵɵelementStart (../../../node_modules/@angular/core/fesm2022/core.mjs:16319:9)
             at KassenbuchComponent_Template (../../../ng:/KassenbuchComponent.js:210:9)
             at executeTemplate (../../../node_modules/@angular/core/fesm2022/core.mjs:11986:13)
             at renderView (../../../node_modules/@angular/core/fesm2022/core.mjs:13184:13)
             at renderComponent (../../../node_modules/@angular/core/fesm2022/core.mjs:13131:5)
             at renderChildComponents (../../../node_modules/@angular/core/fesm2022/core.mjs:13229:9)
             at renderView (../../../node_modules/@angular/core/fesm2022/core.mjs:13209:13)
             at ComponentFactory.create (../../../node_modules/@angular/core/fesm2022/core.mjs:14121:13)
             at initComponent (../../../node_modules/@angular/core/fesm2022/testing.mjs:27475:51)
             at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone.umd.js:411:30)
             at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../../node_modules/zone.js/bundles/zone-testing.umd.js:300:43)
             at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone.umd.js:410:56)
             at Object.onInvoke (../../../node_modules/@angular/core/fesm2022/core.mjs:11061:33)
             at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone.umd.js:410:56)
             at Zone.Object.<anonymous>.Zone.run (../../../node_modules/zone.js/bundles/zone.umd.js:165:47)
             at NgZone.run (../../../node_modules/@angular/core/fesm2022/core.mjs:10912:28)
             at _TestBedImpl.createComponent (../../../node_modules/@angular/core/fesm2022/testing.mjs:27478:41)
             at Function.createComponent (../../../node_modules/@angular/core/fesm2022/testing.mjs:27285:37)
             at Function.<anonymous> (../../../node_modules/ng-mocks/webpack:/ng-mocks/libs/ng-mocks/src/lib/common/ng-mocks-global-overrides.ts:343:5)
             at ../../../node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs:212:20
             at fulfilled (../../../node_modules/@testing-library/angular/fesm2022/testing-library-angular.mjs:61:24)
             at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone.umd.js:411:30)
             at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../../node_modules/zone.js/bundles/zone-testing.umd.js:300:43)
             at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone.umd.js:410:56)
             at Zone.Object.<anonymous>.Zone.run (../../../node_modules/zone.js/bundles/zone.umd.js:165:47)
             at ../../../node_modules/zone.js/bundles/zone.umd.js:1314:38
             at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (../../../node_modules/zone.js/bundles/zone.umd.js:445:35)
             at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (../../../node_modules/zone.js/bundles/zone-testing.umd.js:331:43)
             at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (../../../node_modules/zone.js/bundles/zone.umd.js:444:64)
             at Zone.Object.<anonymous>.Zone.runTask (../../../node_modules/zone.js/bundles/zone.umd.js:210:51)
             at drainMicroTaskQueue (../../../node_modules/zone.js/bundles/zone.umd.js:634:39)
@timdeschryver
Copy link
Member

Hi @DominikPieper we also experience that problem 😅
You're right about this being about the @layer that's recently added within PrimeNG.

For what it's worth, we followed primefaces/primeng#14085 (comment) as a workaround till it's been resolved in jsdom.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@DominikPieper @timdeschryver