perf: allow html literals to be minified

minify-html-literals does not support tag-name interpolations yet

Author: bennypowers

.changeset/calm-cheetahs-burn.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-accordion": patch
+"@patternfly/pfe-primary-detail": patch
+---
+
+allow HTML literals to be optimized by aliasing static html tag

elements/pfe-accordion/pfe-accordion-header.ts

@@ -1,6 +1,6 @@
-import { LitElement, html as _html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { withStatic, unsafeStatic } from 'lit/static-html.js';
+import { unsafeStatic, html as staticH } from 'lit/static-html.js';
 
 import { ComposedEvent } from '@patternfly/pfe-core';
 import { pfelement, bound, observed, initializer } from '@patternfly/pfe-core/decorators.js';
@@ -13,8 +13,6 @@ import style from './pfe-accordion-header.scss';
 
 import '@patternfly/pfe-icon';
 
-const html = withStatic(_html);
-
 const isPorHeader =
   (el: Node): el is HTMLElement =>
     el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);
@@ -111,8 +109,8 @@ export class PfeAccordionHeader extends LitElement {
 
   override render() {
     const tag = unsafeStatic(this.headingTag);
-    return html`
-      <${tag} id="heading">
+    return staticH`
+      <${tag} id="heading">${html`
         <button id="button"
           aria-expanded="${this.ariaExpandedState}"
           class="pf-c-accordion__toggle">
@@ -134,7 +132,7 @@ export class PfeAccordionHeader extends LitElement {
               part="icon"
               class="pf-c-accordion__toggle-icon"
           ></pfe-icon>
-        </button>
+        </button>`}
       </${tag}>
     `;
   }

elements/pfe-primary-detail/pfe-primary-detail.ts

@@ -2,7 +2,7 @@ import type { TemplateResult } from 'lit';
 
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { html as statichtml, unsafeStatic } from 'lit/static-html.js';
+import { html as staticH, unsafeStatic } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -610,7 +610,7 @@ export class PfePrimaryDetail extends LitElement {
       // If wasTag isn't a headline, use strong
       const tag = unsafeStatic(wasTag?.match(/^H/i) ? wasTag : 'strong');
 
-      return statichtml`
+      return staticH`
         <${tag} id="details-wrapper__heading">
           ${this.expandedSectionTitle}
         </${tag}>`;