asyncLiz / minify-html-literals

Minify HTML template literal strings
MIT License
68 stars 14 forks source link

Unable to minify templates with static tag literals #37

Open TimvdLippe opened 3 years ago

TimvdLippe commented 3 years ago

I am working on integrating this package into Chrome DevTools. The following test appears to be failing, since <@TEMPLATE_EXPRESSION(); is invalid HTML. The @ and (); are invalid characters as part of the tag name.

const STATIC_LITERAL_IN_TAG_NAME = `
  function nested() {
    return LitHtml.html\`<\${Component.litTagName} id="container">
      <span>Some content here</span>
    </\${Component.litTagName}>
    \`;
  }
`;

const STATIC_LITERAL_IN_TAG_NAME_MIN = `
  function nested() {
    return LitHtml.html\`<\${Component.litTagName} id="container"><span>Some content here</span></\${Component.litTagName}>\`;
  }
`;

I am currently attempting to write a custom strategy to handle this case and disabling CSS minification (since that's what the @ and (); appear to be used for), but no dice thus far.

TimvdLippe commented 3 years ago

I seem to gotten it to work with the following configuration:

minifyHTML({
  options: {
    strategy: {
      getPlaceholder() {
        return 'TEMPLATE_EXPRESSION';
      },
      combineHTMLStrings(parts, placeholder) {
        return defaultStrategy.combineHTMLStrings(parts, placeholder);
      },
      minifyHTML(html, options) {
        return defaultStrategy.minifyHTML(html, options);
      },
      minifyCSS(css, options) {
        return css;
      },
      splitHTMLByPlaceholder(html, placeholder) {
        console.log(html);
        return defaultStrategy.splitHTMLByPlaceholder(html, placeholder);
      }
    },
    minifyOptions: {
      minifyCSS: false,
    },
  },
}),

It doesn't minify the CSS for now, but at least it is no longer throwing on the HTML parser. Currently trying to figure out how I can reenable CSS formatting, but this is a good first step.

bennypowers commented 2 years ago

🤦 went to the trouble of producing this repro only to find that Mr @TimvdLippe beat me to it 😄

In any event, to illustrate the issue:

git clone https://github.com/bennypowers/minify-html-literals-static-html-repro.git
cd minify-html-literals-static-html-repro
node index.js