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

bug(DragDrop): After cdk update to v17.3.7, tests fail with css parse error "Could not parse CSS stylesheet" #29053

Closed
1 task done
rubiesonthesky opened this issue May 15, 2024 · 4 comments · Fixed by #29056
Closed
1 task done

bug(DragDrop): After cdk update to v17.3.7, tests fail with css parse error "Could not parse CSS stylesheet" #29053

rubiesonthesky opened this issue May 15, 2024 · 4 comments · Fixed by #29056
Assignees
@crisbeto
Labels
area: cdk/drag-drop P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@rubiesonthesky
Copy link

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.3.6

Description

After updating to version 17.3.7, a lot of our unit tests fails with error "Could not parse CSS stylesheet".

Tests are using jest and jest-preset-angular. Some of these units tests are almost same what cli generates. The components testing are using DragDropModule with table, where you can drag and drop table rows.

Reproduction

I'd like to include StackBlitz example, but that link creates Angular 16 app and I'm having hard to time updating it to Angular 17. I'm mainly getting errors about zone.js even when it's added to polyfills in angular.json. (That harness link creates Angular 10 repo)

NG0908: In this configuration Angular requires Zone.js

But this bug manifest itself only in test setup (at least for now), so not sure if that Stackblitz would help.

I may be able to create whole repro repository later.

Expected Behavior

Tests should still pass after patch update.

Actual Behavior

Full stack trace:

Error: Could not parse CSS stylesheet
    at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
    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.getStyleElement (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:358:18)
    at _SharedStylesHost.addStyleToHost (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:363:30)
    at _SharedStylesHost.onStyleAdded (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:305:18)
    at _SharedStylesHost.addStyles (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:268:22)
    at NoneEncapsulationDomRenderer.applyStyles (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:742:31)
    at _DomRendererFactory2.createRenderer (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:466:22)
    at createRootComponentView (node_modules/@angular/core/fesm2022/core.mjs:15958:54)
    at ComponentFactory.create (node_modules/@angular/core/fesm2022/core.mjs:15845:39)
    at createComponent (node_modules/@angular/core/fesm2022/core.mjs:36380:20)
    at _DragDrop._loadResets (node_modules/@angular/cdk/fesm2022/drag-drop.mjs:2749:34)
    at _DragDrop.createDrag (node_modules/@angular/cdk/fesm2022/drag-drop.mjs:2734:14)
    at new _CdkDrag (node_modules/@angular/cdk/fesm2022/drag-drop.mjs:2920:34)
    at NodeInjectorFactory._CdkDrag_Factory [as factory] (ng:///_CdkDrag/ɵfac.js:5:10)
    at getNodeInjectable (node_modules/@angular/core/fesm2022/core.mjs:5984:44)
    at instantiateAllDirectives (node_modules/@angular/core/fesm2022/core.mjs:11907:27)
    at createDirectivesInstances (node_modules/@angular/core/fesm2022/core.mjs:11306:5)
    at ɵɵelementStart (node_modules/@angular/core/fesm2022/core.mjs:23045:9)
    at ConfigFormComponent_tr_16_Template (ng:///ConfigFormComponent.js:95:5)
    at executeTemplate (node_modules/@angular/core/fesm2022/core.mjs:11268:9)
    at renderView (node_modules/@angular/core/fesm2022/core.mjs:12470:13)
    at createAndRenderEmbeddedLView (node_modules/@angular/core/fesm2022/core.mjs:12540:9)
    at TemplateRef2.createEmbeddedViewImpl (node_modules/@angular/core/fesm2022/core.mjs:13393:31)
    at ViewContainerRef2.createEmbeddedView (node_modules/@angular/core/fesm2022/core.mjs:16191:37)
    at node_modules/@angular/common/fesm2022/common.mjs:3173:31
    at DefaultIterableDiffer.forEachOperation (node_modules/@angular/core/fesm2022/core.mjs:33351:17)
    at _NgForOf._applyChanges (node_modules/@angular/common/fesm2022/common.mjs:3168:17)
    at _NgForOf.ngDoCheck (node_modules/@angular/common/fesm2022/common.mjs:3163:22)
    at callHookInternal (node_modules/@angular/core/fesm2022/core.mjs:5136:14)
    at callHook (node_modules/@angular/core/fesm2022/core.mjs:5167:9)
    at callHooks (node_modules/@angular/core/fesm2022/core.mjs:5118:17)
    at executeInitAndCheckHooks (node_modules/@angular/core/fesm2022/core.mjs:5068:9)
    at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12806:21)
    at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
    at detectChangesInViewIfAttached (node_modules/@angular/core/fesm2022/core.mjs:12978:5)
    at detectChangesInComponent (node_modules/@angular/core/fesm2022/core.mjs:12967:5)
    at detectChangesInChildComponents (node_modules/@angular/core/fesm2022/core.mjs:13028:9)
    at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12841:13)
    at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
    at detectChangesInViewWhileDirty (node_modules/@angular/core/fesm2022/core.mjs:12732:5)
    at detectChangesInternal (node_modules/@angular/core/fesm2022/core.mjs:12714:9)
    at ViewRef$1.detectChanges (node_modules/@angular/core/fesm2022/core.mjs:13310:9)
    at node_modules/@angular/core/fesm2022/testing.mjs:352:36
    at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:412:32)
    at Object.onInvoke (node_modules/@angular/core/fesm2022/core.mjs:14882:33)
    at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:411:38)
    at ZoneImpl.run (node_modules/zone.js/bundles/zone.umd.js:147:47)
    at NgZone.run (node_modules/@angular/core/fesm2022/core.mjs:14733:28)
    at PseudoApplicationComponentFixture.detectChanges (node_modules/@angular/core/fesm2022/testing.mjs:351:22)
    at src/app/config-form.component.spec.ts:34:13
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  detail: '@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;color:inherit}}',
  type: 'css parsing'
}

Environment

Angular CLI: 17.3.7
Node: 20.12.2
Package Manager: npm 10.5.0
OS: darwin arm64

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

Package Version

@angular-devkit/architect 0.1703.7
@angular-devkit/build-angular 17.3.7
@angular-devkit/core 17.3.7
@angular-devkit/schematics 17.3.7
@angular/cdk 17.3.7
@angular/cdk-experimental 17.3.7
@angular/cli 17.3.7
@schematics/angular 17.3.7
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.5

"jest": "29.7.0",
"jest-preset-angular": "14.0.4",
@rubiesonthesky rubiesonthesky added the needs triage This issue needs to be triaged by the team label May 15, 2024
@crisbeto
Copy link
Member

This is likely the same root cause as primefaces/primereact#5156.

@rubiesonthesky
Copy link
Author

@crisbeto Yeah, I just figured out that it's probably because of jsdom etc.

And the fix for failing tests is to not fail them, if the error is just this stylesheet error -> jsdom/jsdom#2177 (comment)

@crisbeto
Copy link
Member

Ideally JSDom would be updated to account for @layer since it's a standard supported in all browsers. For now I think we can add a try/catch around it only in test environments.

@crisbeto crisbeto self-assigned this May 15, 2024
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: cdk/drag-drop and removed needs triage This issue needs to be triaged by the team labels May 15, 2024
crisbeto added a commit to crisbeto/material2 that referenced this issue May 16, 2024
@crisbeto
fix(cdk/drag-drop): defer loading reset styles
69b6966 
Currently we load the reset styles for the preview up-front which seems to break some Jest tests since Jest's CSS parser does't understand layers.

These changes switch to loading the styles only once dragging has started.

Fixes angular#29053.
@crisbeto crisbeto mentioned this issue May 16, 2024
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue May 16, 2024
@crisbeto
fix(cdk/drag-drop): defer loading reset styles
8d53f43 
Currently we load the reset styles for the preview up-front which seems to break some Jest tests since Jest's CSS parser does't understand layers.

These changes switch to loading the styles only once dragging has started.

Fixes angular#29053.
crisbeto added a commit that referenced this issue May 16, 2024
@crisbeto
fix(cdk/drag-drop): defer loading reset styles (#29056)
a3cdb16 
Currently we load the reset styles for the preview up-front which seems to break some Jest tests since Jest's CSS parser does't understand layers.

These changes switch to loading the styles only once dragging has started.

Fixes #29053.
crisbeto added a commit that referenced this issue May 16, 2024
@crisbeto
fix(cdk/drag-drop): defer loading reset styles (#29056)
d80afa9 
Currently we load the reset styles for the preview up-front which seems to break some Jest tests since Jest's CSS parser does't understand layers.

These changes switch to loading the styles only once dragging has started.

Fixes #29053.

(cherry picked from commit a3cdb16)
crisbeto added a commit that referenced this issue May 16, 2024
@crisbeto
fix(cdk/drag-drop): defer loading reset styles (#29056)
a22b29b 
Currently we load the reset styles for the preview up-front which seems to break some Jest tests since Jest's CSS parser does't understand layers.

These changes switch to loading the styles only once dragging has started.

Fixes #29053.

(cherry picked from commit a3cdb16)
shamoon added a commit to paperless-ngx/paperless-ngx that referenced this issue May 23, 2024
@shamoon
Bump @angular/cdk to 17.3.10
02ebcd2 
Fixes angular/components#29053
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: cdk/drag-drop P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/drag-drop): defer loading reset styles crisbeto/material2
2 participants
@rubiesonthesky @crisbeto