babel-plugin-html-tag

Statically evaluates and minifies tagged html`<..>` template literals into strings

What it does:

Minifies tagged template literals (by default using html tag) via html-minifier then removes the tag:

In:

const a = html`<p class="zoom center justify">
    This is paragraph with ${b} subsitutions 
    at several lines: ${1 + 2}
</p>`;

const z = html`<table class="center">
    <tr class='left'>
        <td>HTML without substitutions</td>
    </tr>
</table>`;

Out:

const a = `<p class="zoom center justify">This is paragraph with ${b} subsitutions at several lines: ${1 +
  2}</p>`;

// becomes static one line string if there is no substitutions
const z =
  '<table class="center"><tr class="left"><td>HTML without substitutions</td></tr></table>';

Tip

Try it with Visual Studio Code bierner.lit-html plugin for beautiful syntax highlight and HTML autocomplete inside tagged HTML string.

Credits

Inspired by babel-plugin-template-html-minifier and babel-plugin-graphql-tag

jeetiss/babel-plugin-html-tag

babel-plugin-html-tag

What it does:

Tip

Credits