[TASK] Update vulnerable build dependencies

Update (most) vulnerable dependencies/packages found by
`npm audit fix --force --dry-run`.

Notes redarding package changes:

 * The outdated grunt-postcss plugin is replaced by a (maintained)
   fork for compatibility with newer grunt versions.

 * karma is updated to v6 and pulls in @types/node which conflicts with
   TypeScript type definitions by @types/requirejs. Therefore 3rd party
   type declarations from packages (@types/*) are now explicitly
   enabled in tsconfig.json – note that there is no other way to exclude
   from typeRoots:
   microsoft/TypeScript#18588

 * grunt-lintspaces and grunt-contrib-imagemin are replaced
   as these packages have been not been updated to not depend
   on vulnerabe dependencies, while grunt-lintspaces and
   grunt-contrib-imagemin would cause downgrades to older
   version when running `npm audit fix --force` (because only
   the older versions do not depend on vulnerable software).

 * (grunt-contrib-)imagemin is replaced by squoosh (by google) as
   a) imagemin dependencies ("bin-build" > "download") rely on vulnerable
      versions of "got".
      Neither of these packages is currently updated,see
      kevva/download#224
   b) imagemin is unmaintained:
      imagemin/imagemin#385
      and suggests squoosh as replacement

 * stylefmt is replaced by a maintained fork.

There is one remaining packages that pulls in a vulnerability alerts:

  * jquery-ui is marked as vulnerable (severity: high), but worked on
    in a separate patch #96497.
    (We don't actually use the vulnerable library parts though).

Vulnerability report before this patch:

    74 vulnerabilities (1 low, 30 moderate, 38 high, 5 critical)

Vulnerability report after this patch:

    1 high severity vulnerability
    (this is jquery-ui)

Commands executed:

  # Supposed to be non breaking, but broke grunt-css
  npm audit fix
  npm remove grunt-postcss
  npm install @lodder/grunt-postcss

  # Preparation for `npm audit fix --force` (breaking changes)
  npm install grunt@^1.5
  npm install grunt-lintspaces@^0.10.0
  npm remove grunt-lintspaces
  npm install --save-dev lintspaces-cli
  npm remove grunt-contrib-imagemin
  npm install --save-dev
  npm remove stylefmt
  npm install --save-dev @ronilaukkarinen/stylefmt
  npm audit fix --force

Releases: main
Resolves: #98198
Change-Id: I09df87fe131a499790e6c5f95f1c51e9216b71c2
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/75539
Tested-by: core-ci <[email protected]>
Tested-by: Georg Ringer <[email protected]>
Tested-by: Stefan Bürk <[email protected]>
Tested-by: Benjamin Franzke <[email protected]>
Reviewed-by: Georg Ringer <[email protected]>
Reviewed-by: Stefan Bürk <[email protected]>
Reviewed-by: Benjamin Franzke <[email protected]>

Resources/Public/JavaScript/action-button/deferred-action.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-import{AbstractAction}from"@typo3/backend/action-button/abstract-action.js";import Icons from"@typo3/backend/icons.js";class DeferredAction extends AbstractAction{async execute(t){return Icons.getIcon("spinner-circle-light",Icons.sizes.small).then(e=>{t.innerHTML=e}),await this.executeCallback()}async executeCallback(){return await this.callback()}}export default DeferredAction;
+import{AbstractAction}from"@typo3/backend/action-button/abstract-action.js";import Icons from"@typo3/backend/icons.js";class DeferredAction extends AbstractAction{async execute(t){return Icons.getIcon("spinner-circle-light",Icons.sizes.small).then((e=>{t.innerHTML=e})),await this.executeCallback()}async executeCallback(){return await this.callback()}}export default DeferredAction;

Resources/Public/JavaScript/clipboard-panel.js

@@ -18,18 +18,18 @@ var ClipboardPanel_1,CopyMode,__decorate=function(t,e,i,a){var o,n=arguments.len
       <div class="clipboard-panel">
         ${until(this.renderPanel(),ClipboardPanel_1.renderLoader())}
       </div>
-    `}renderPanel(){return new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl).withQueryArguments({action:"getClipboardData"}).post({table:this.table}).then(async t=>{const e=await t.resolve();if(!0===e.success&&e.data){const t=e.data;return html`
+    `}renderPanel(){return new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl).withQueryArguments({action:"getClipboardData"}).post({table:this.table}).then((async t=>{const e=await t.resolve();if(!0===e.success&&e.data){const t=e.data;return html`
             <div class="panel panel-default">
               <div class="panel-heading">
                 ${t.labels.clipboard}
               </div>
               <table class="table">
                 <tbody>
-                  ${t.tabs.map(e=>this.renderTab(e,t))}
+                  ${t.tabs.map((e=>this.renderTab(e,t)))}
                 </tbody>
               </tabel>
             </div>
-          `}return Notification.error("Clipboard data could not be fetched"),html``}).catch(()=>(Notification.error("An error occurred while fetching clipboard data"),html``))}renderTab(t,e){return html`
+          `}return Notification.error("Clipboard data could not be fetched"),html``})).catch((()=>(Notification.error("An error occurred while fetching clipboard data"),html``)))}renderTab(t,e){return html`
       <tr>
         <td colspan="2" class="nowrap">
           <button type="button" class="btn btn-link p-0" title="${t.description}" data-action="setP" @click="${e=>this.updateClipboard(e,{CB:{setP:t.identifier}})}">
@@ -67,7 +67,7 @@ var ClipboardPanel_1,CopyMode,__decorate=function(t,e,i,a){var o,n=arguments.len
           `}
         </td>
       </tr>
-      ${e.current===t.identifier&&t.items?t.items.map(i=>this.renderTabItem(i,t.identifier,e)):html``}
+      ${e.current===t.identifier&&t.items?t.items.map((i=>this.renderTabItem(i,t.identifier,e))):html``}
     `}renderTabItem(t,e,i){return html`
       <tr>
         <td class="col-icon nowrap ${classMap({"ps-4":!t.identifier})}">
@@ -97,4 +97,4 @@ var ClipboardPanel_1,CopyMode,__decorate=function(t,e,i,a){var o,n=arguments.len
             `:html``}
           </div>
         </td>
-      </tr>`}updateClipboard(t,e){t.preventDefault();const i=t.currentTarget;new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl).post(e).then(async t=>{const a=await t.resolve();!0===a.success?(i.dataset.action&&i.dispatchEvent(new CustomEvent("typo3:clipboard:"+i.dataset.action,{detail:{payload:e,response:a},bubbles:!0,cancelable:!1})),this.reloadModule()):Notification.error("Clipboard data could not be updated")}).catch(()=>{Notification.error("An error occurred while updating clipboard data")})}reloadModule(){this.returnUrl?this.ownerDocument.location.href=this.returnUrl:this.ownerDocument.location.reload()}};__decorate([property({type:String,attribute:"return-url"})],ClipboardPanel.prototype,"returnUrl",void 0),__decorate([property({type:String})],ClipboardPanel.prototype,"table",void 0),ClipboardPanel=ClipboardPanel_1=__decorate([customElement("typo3-backend-clipboard-panel")],ClipboardPanel);export{ClipboardPanel};
+      </tr>`}updateClipboard(t,e){t.preventDefault();const i=t.currentTarget;new AjaxRequest(top.TYPO3.settings.Clipboard.moduleUrl).post(e).then((async t=>{const a=await t.resolve();!0===a.success?(i.dataset.action&&i.dispatchEvent(new CustomEvent("typo3:clipboard:"+i.dataset.action,{detail:{payload:e,response:a},bubbles:!0,cancelable:!1})),this.reloadModule()):Notification.error("Clipboard data could not be updated")})).catch((()=>{Notification.error("An error occurred while updating clipboard data")}))}reloadModule(){this.returnUrl?this.ownerDocument.location.href=this.returnUrl:this.ownerDocument.location.reload()}};__decorate([property({type:String,attribute:"return-url"})],ClipboardPanel.prototype,"returnUrl",void 0),__decorate([property({type:String})],ClipboardPanel.prototype,"table",void 0),ClipboardPanel=ClipboardPanel_1=__decorate([customElement("typo3-backend-clipboard-panel")],ClipboardPanel);export{ClipboardPanel};

Resources/Public/JavaScript/color-picker.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-import $ from"jquery";import"jquery/minicolors.js";class ColorPicker{initialize(e){if(void 0===e)return console.warn("Initializing all color pickers globally has been marked as deprecated. Please pass a specific element to ColorPicker.initialize()."),void document.querySelectorAll(".t3js-color-picker").forEach(e=>{this.initialize(e)});if(!(e instanceof HTMLInputElement)||e.parentElement?.classList.contains("minicolors"))return;$(e).minicolors({format:"hex",position:"bottom left",theme:"bootstrap"});const t=e.closest(".t3js-formengine-field-item")?.querySelector('input[type="hidden"]');t&&(t.addEventListener("change",()=>$(e).trigger("paste")),e.addEventListener("blur",e=>{e.stopImmediatePropagation();const i=e.target;t.value=i.value,""===i.value&&$(i).trigger("paste"),i.dispatchEvent(new Event("formengine.cp.change"))}))}}export default new ColorPicker;
+import $ from"jquery";import"jquery/minicolors.js";class ColorPicker{initialize(e){if(void 0===e)return console.warn("Initializing all color pickers globally has been marked as deprecated. Please pass a specific element to ColorPicker.initialize()."),void document.querySelectorAll(".t3js-color-picker").forEach((e=>{this.initialize(e)}));if(!(e instanceof HTMLInputElement)||e.parentElement?.classList.contains("minicolors"))return;$(e).minicolors({format:"hex",position:"bottom left",theme:"bootstrap"});const t=e.closest(".t3js-formengine-field-item")?.querySelector('input[type="hidden"]');t&&(t.addEventListener("change",(()=>$(e).trigger("paste"))),e.addEventListener("blur",(e=>{e.stopImmediatePropagation();const i=e.target;t.value=i.value,""===i.value&&$(i).trigger("paste"),i.dispatchEvent(new Event("formengine.cp.change"))})))}}export default new ColorPicker;