Merge pull request #2852 from iongroup/fix/style-detach

Support gridstack element node reparenting without losing the stylesheets

Author: adumesny

spec/gridstack-spec.ts

@@ -1982,4 +1982,24 @@ describe('gridstack >', function() {
     });
     */
   });
+
+  describe('stylesheet', function() {
+    let grid: GridStack;
+    let root: HTMLElement;
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+      grid = GridStack.init({ cellHeight: 30 });
+      root = document.getElementById('gs-cont')!;
+    });
+    afterEach(function() {
+      document.body.removeChild(root);
+    });
+    it('not getting lost in case of node detach/attach', function() {
+      expect(window.getComputedStyle(grid.el.querySelector("#item1")!).height).toBe("60px");
+      const oldParent = root.parentElement;
+      root.remove();
+      oldParent!.appendChild(root);
+      expect(window.getComputedStyle(grid.el.querySelector("#item1")!).height).toBe("60px");
+    });
+  });
 });

src/gridstack.ts

@@ -51,7 +51,7 @@ export interface CellPosition {
   y: number;
 }
 
-interface GridCSSStyleSheet extends CSSStyleSheet {
+interface GridHTMLStyleElement extends HTMLStyleElement {
   _max?: number; // internal tracker of the max # of rows we created
 }
 
@@ -251,7 +251,7 @@ export class GridStack {
   /** @internal */
   public _gsEventHandler = {};
   /** @internal */
-  protected _styles: GridCSSStyleSheet;
+  protected _styles: GridHTMLStyleElement;
   /** @internal flag to keep cells square during resize */
   protected _isAutoCellHeight: boolean;
   /** @internal limit auto cell resizing method */

src/utils.ts

@@ -196,7 +196,7 @@ export class Utils {
    * @param parent to insert the stylesheet as first child,
    * if none supplied it will be appended to the document head instead.
    */
-  static createStylesheet(id: string, parent?: HTMLElement, options?: { nonce?: string }): CSSStyleSheet {
+  static createStylesheet(id: string, parent?: HTMLElement, options?: { nonce?: string }): HTMLStyleElement {
     const style: HTMLStyleElement = document.createElement('style');
     const nonce = options?.nonce
     if (nonce) style.nonce = nonce
@@ -216,7 +216,7 @@ export class Utils {
     } else {
       parent.insertBefore(style, parent.firstChild);
     }
-    return style.sheet as CSSStyleSheet;
+    return style;
   }
 
   /** removed the given stylesheet id */
@@ -227,12 +227,10 @@ export class Utils {
   }
 
   /** inserts a CSS rule */
-  static addCSSRule(sheet: CSSStyleSheet, selector: string, rules: string): void {
-    if (typeof sheet.addRule === 'function') {
-      sheet.addRule(selector, rules);
-    } else if (typeof sheet.insertRule === 'function') {
-      sheet.insertRule(`${selector}{${rules}}`);
-    }
+  static addCSSRule(sheet: HTMLStyleElement, selector: string, rules: string): void {
+    // Rather than using sheet.insertRule, use text since it supports 
+    // gridstack node reparenting around in the DOM
+    sheet.textContent += `${selector} { ${rules} } `;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any