From dfd6b1683c5e5c1e514e09b195eeff969c955afd Mon Sep 17 00:00:00 2001
From: ghiscoding <Ghislain.Beaulac@se.com>
Date: Thu, 26 Oct 2023 18:08:03 -0400
Subject: [PATCH 1/2] fix: dynamically create CSS rules via JS instead of
 innerHTML - potentially fixes #878, not sure

---
 src/slick.grid.ts | 40 +++++++++++++++++-----------------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index 833c61e0..64eaebdb 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -2299,33 +2299,27 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
   protected createCssRules() {
-    const template = Utils.createDomElement('template', { innerHTML: '<style type="text/css" rel="stylesheet" />' });
-    this._style = template.content.firstChild;
+    this._style = document.createElement('style');
     document.head.appendChild(this._style);
 
-    const rowHeight = (this._options.rowHeight! - this.cellHeightDiff);
-    const rules = [
-      `.${this.uid} .slick-group-header-column { left: 1000px; }`,
-      `.${this.uid} .slick-header-column { left: 1000px; }`,
-      `.${this.uid} .slick-top-panel { height: ${this._options.topPanelHeight}px; }`,
-      `.${this.uid} .slick-preheader-panel { height: ${this._options.preHeaderPanelHeight}px; }`,
-      `.${this.uid} .slick-headerrow-columns { height: ${this._options.headerRowHeight}px; }`,
-      `.${this.uid} .slick-footerrow-columns { height: ${this._options.footerRowHeight}px; }`,
-      `.${this.uid} .slick-cell { height: ${rowHeight}px; }`,
-      `.${this.uid} .slick-row { height: ${this._options.rowHeight}px; }`
-    ];
+    const sheet = this._style.sheet;
+    if (sheet) {
+      const rowHeight = (this._options.rowHeight! - this.cellHeightDiff);
+      sheet.insertRule(`.${this.uid} .slick-group-header-column { left: 1000px; }`);
+      sheet.insertRule(`.${this.uid} .slick-header-column { left: 1000px; }`);
+      sheet.insertRule(`.${this.uid} .slick-top-panel { height: ${this._options.topPanelHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-preheader-panel { height: ${this._options.preHeaderPanelHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-headerrow-columns { height: ${this._options.headerRowHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-footerrow-columns { height: ${this._options.footerRowHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-cell { height: ${rowHeight}px; }`);
+      sheet.insertRule(`.${this.uid} .slick-row { height: ${this._options.rowHeight}px; }`);
 
-    for (let i = 0; i < this.columns.length; i++) {
-      if (!this.columns[i] || this.columns[i].hidden) { continue; }
-
-      rules.push(`.${this.uid} .l${i} { }`);
-      rules.push(`.${this.uid} .r${i} { }`);
-    }
+      for (let i = 0; i < this.columns.length; i++) {
+        if (!this.columns[i] || this.columns[i].hidden) { continue; }
 
-    if (this._style.styleSheet) { // IE
-      this._style.styleSheet.cssText = rules.join(' ');
-    } else {
-      this._style.appendChild(document.createTextNode(rules.join(' ')));
+        sheet.insertRule(`.${this.uid} .l${i} { }`);
+        sheet.insertRule(`.${this.uid} .r${i} { }`);
+      }
     }
   }
 

From 57ac213ed54be0fb9d06906cb79a9edc26256354 Mon Sep 17 00:00:00 2001
From: ghiscoding <Ghislain.Beaulac@se.com>
Date: Fri, 27 Oct 2023 09:40:32 -0400
Subject: [PATCH 2/2] chore: apply nonce property on dynamic style

---
 src/slick.grid.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index 64eaebdb..fd0727d9 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -350,7 +350,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   protected _topPanels!: HTMLDivElement[];
   protected _viewport!: HTMLDivElement[];
   protected _canvas!: HTMLDivElement[];
-  protected _style: any;
+  protected _style?: HTMLStyleElement;
   protected _boundAncestors: HTMLElement[] = [];
   protected stylesheet?: { cssRules: Array<{ selectorText: string; }>; rules: Array<{ selectorText: string; }>; } | null;
   protected columnCssRulesL?: Array<{ selectorText: string; }>;
@@ -2300,6 +2300,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
   protected createCssRules() {
     this._style = document.createElement('style');
+    this._style.nonce = 'random-string';
     document.head.appendChild(this._style);
 
     const sheet = this._style.sheet;
@@ -2363,7 +2364,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
   protected removeCssRules() {
-    this._style.remove();
+    this._style?.remove();
     this.stylesheet = null;
   }