fix(cdk/drag-drop): defer loading reset styles (#29056)

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)

Author: crisbeto

src/cdk/drag-drop/drag-drop-registry.ts

@@ -6,7 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, NgZone, OnDestroy, Inject} from '@angular/core';
+import {
+  Injectable,
+  NgZone,
+  OnDestroy,
+  Inject,
+  inject,
+  ApplicationRef,
+  EnvironmentInjector,
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  createComponent,
+} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {merge, Observable, Observer, Subject} from 'rxjs';
@@ -17,6 +29,23 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({
   capture: true,
 });
 
+/** Keeps track of the apps currently containing drag items. */
+const activeApps = new Set<ApplicationRef>();
+
+/**
+ * Component used to load the drag&drop reset styles.
+ * @docs-private
+ */
+@Component({
+  standalone: true,
+  styleUrl: 'resets.css',
+  encapsulation: ViewEncapsulation.None,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {'cdk-drag-resets-container': ''},
+})
+export class _ResetsLoader {}
+
 /**
  * Service that keeps track of all the drag item and drop container
  * instances, and manages global event listeners on the `document`.
@@ -28,6 +57,8 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({
 @Injectable({providedIn: 'root'})
 export class DragDropRegistry<I extends {isDragging(): boolean}, C> implements OnDestroy {
   private _document: Document;
+  private _appRef = inject(ApplicationRef);
+  private _environmentInjector = inject(EnvironmentInjector);
 
   /** Registered drop container instances. */
   private _dropInstances = new Set<C>();
@@ -136,6 +167,7 @@ export class DragDropRegistry<I extends {isDragging(): boolean}, C> implements O
       return;
     }
 
+    this._loadResets();
     this._activeDragInstances.push(drag);
 
     if (this._activeDragInstances.length === 1) {
@@ -276,4 +308,23 @@ export class DragDropRegistry<I extends {isDragging(): boolean}, C> implements O
 
     this._globalListeners.clear();
   }
+
+  // TODO(crisbeto): abstract this away into something reusable.
+  /** Loads the CSS resets needed for the module to work correctly. */
+  private _loadResets() {
+    if (!activeApps.has(this._appRef)) {
+      activeApps.add(this._appRef);
+
+      const componentRef = createComponent(_ResetsLoader, {
+        environmentInjector: this._environmentInjector,
+      });
+
+      this._appRef.onDestroy(() => {
+        activeApps.delete(this._appRef);
+        if (activeApps.size === 0) {
+          componentRef.destroy();
+        }
+      });
+    }
+  }
 }

src/cdk/drag-drop/drag-drop.ts

@@ -6,19 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Injectable,
-  Inject,
-  NgZone,
-  ElementRef,
-  Component,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ApplicationRef,
-  inject,
-  createComponent,
-  EnvironmentInjector,
-} from '@angular/core';
+import {Injectable, Inject, NgZone, ElementRef} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {DragRef, DragRefConfig} from './drag-ref';
@@ -31,31 +19,11 @@ const DEFAULT_CONFIG = {
   pointerDirectionChangeThreshold: 5,
 };
 
-/** Keeps track of the apps currently containing badges. */
-const activeApps = new Set<ApplicationRef>();
-
-/**
- * Component used to load the drag&drop reset styles.
- * @docs-private
- */
-@Component({
-  standalone: true,
-  styleUrl: 'resets.css',
-  encapsulation: ViewEncapsulation.None,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {'cdk-drag-resets-container': ''},
-})
-export class _ResetsLoader {}
-
 /**
  * Service that allows for drag-and-drop functionality to be attached to DOM elements.
  */
 @Injectable({providedIn: 'root'})
 export class DragDrop {
-  private _appRef = inject(ApplicationRef);
-  private _environmentInjector = inject(EnvironmentInjector);
-
   constructor(
     @Inject(DOCUMENT) private _document: any,
     private _ngZone: NgZone,
@@ -72,7 +40,6 @@ export class DragDrop {
     element: ElementRef<HTMLElement> | HTMLElement,
     config: DragRefConfig = DEFAULT_CONFIG,
   ): DragRef<T> {
-    this._loadResets();
     return new DragRef<T>(
       element,
       config,
@@ -96,23 +63,4 @@ export class DragDrop {
       this._viewportRuler,
     );
   }
-
-  // TODO(crisbeto): abstract this away into something reusable.
-  /** Loads the CSS resets needed for the module to work correctly. */
-  private _loadResets() {
-    if (!activeApps.has(this._appRef)) {
-      activeApps.add(this._appRef);
-
-      const componentRef = createComponent(_ResetsLoader, {
-        environmentInjector: this._environmentInjector,
-      });
-
-      this._appRef.onDestroy(() => {
-        activeApps.delete(this._appRef);
-        if (activeApps.size === 0) {
-          componentRef.destroy();
-        }
-      });
-    }
-  }
 }

src/cdk/drag-drop/public-api.ts

@@ -14,7 +14,7 @@ export {CDK_DRAG_PARENT} from './drag-parent';
 export * from './drag-events';
 export * from './drag-utils';
 export * from './drag-drop-module';
-export * from './drag-drop-registry';
+export {DragDropRegistry} from './drag-drop-registry';
 
 export {CdkDropList} from './directives/drop-list';
 export * from './directives/config';