Stops minifying if there's a style element in the template literal?

[morewry]

Is this intentional?

I am trying this out and find it only works if my tagged template literals don't have a <style> element inside them. If I add <style>, I end up with \n and spaces in my bundle. If I remove it, \n and spaces go away. Add it back, they come back. It repeats reliably.

But the documentation of https://github.com/asyncLiz/minify-html-literals shows an example that minifies and includes <style>...?

PS: This is different from the CSS inside the <style> being minified or not. I mean the whole template literal, not the CSS. (My CSS is minified, but by PostCSS+cssnano, so that's tangential.)

[morewry]

In fact, it stops minifying if I have a template literal with a <style> tag anywhere in the file. I tried working around it by breaking them into two different template strings and joining those together.

[morewry]

It works again if I avoid putting <style> in a template literal, e.g. if I do this,

import * as styles from './my-styles.css';

function _getTemplate() {
  const template = html`<section>other stuff</section>`;
  return [template, '<style>', styles.styles, '</style>'].join('');
}

[asyncLiz]

Hey @morewry! Thanks for the issue. Can you let me know what version of this module you are using? I'm unable to replicate on the latest version 1.0.7. Template literals with <style> are minified correctly for me.

[morewry]

I noticed it looked like your unit tests should catch it, but then why the heck...?

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-custom-element-classes": "^0.1.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "cssnano": "^4.0.3",
    "modular-css-rollup": "^14.1.0",
    "npm-run-all": "^4.1.2",
    "postcss-calc": "^6.0.1",
    "postcss-cli": "^6.0.0",
    "postcss-modular-css": "^14.1.0",
    "postcss-preset-env": "^5.2.3",
    "rollup": "^0.62.0",
    "rollup-node-externals": "0.0.1-2",
    "rollup-plugin-babel": "^3.0.7",
    "rollup-plugin-minify-html-literals": "^1.0.7",
    "rollup-plugin-node-resolve": "^3.3.0"
}

import babel from 'rollup-plugin-babel';
import cssnano from 'cssnano';
import minifyHTML from 'rollup-plugin-minify-html-literals';
import modularcss from 'modular-css-rollup';
import nodeExternal from 'rollup-node-externals';
import nodeResolve from 'rollup-plugin-node-resolve';
import postcssCalc from 'postcss-calc';
import postcssPresetEnv from 'postcss-preset-env';

const sharedConfig = {
  external: nodeExternal(),
  input: 'index.js',
  plugins: [
    minifyHTML(),
    nodeResolve(),
    babel({
      babelrc: false,
      include: '**/*.js',
      plugins: [
        'transform-custom-element-classes',
        [
          'transform-runtime',
          {
            regenerator: false
          }
        ]
      ],
      presets: [
        [
          'env',
          {
            modules: false
          }
        ]
      ],
      runtimeHelpers: true
    }),
    modularcss({
      processing: [cssnano(), postcssCalc(), postcssPresetEnv()],
      styleExport: true
    })
  ]
};

const esModuleOutput = Object.assign({}, sharedConfig, {
  output: {
    file: 'dist/index.es.js',
    format: 'es'
  }
});

const umdOutput = Object.assign({}, sharedConfig, {
  output: {
    file: 'dist/index.umd.js',
    format: 'umd',
    name: 'dlsMemberPages'
  }
});

export default [esModuleOutput, umdOutput];

import * as page from './page.css';
import { default as html } from 'tagged-template-noop';

function _getFullTemplate() {
  const template = html`
    <section id="page"
        class="${page.page}">
      <div class="${
        page.pageWarn
      }" role="complementary" aria-label="Service Warning">
        <slot name="page-warn"></slot>
      </div>
      <header class="${page.pageHead}" role="banner">
        <svg class="${page.pageHeadLogo}"></svg>
        <nav class="${page.pageHeadMenu}" aria-label="TODO">
          <slot name="page-head-menu"></slot>
        </nav>
      </header>
      <nav class="${page.pageMenu}" aria-label="TODO">
        <slot name="page-menu"></slot>
      </nav>
      <main class="${page.pageMain}">
        <slot name="page-main">
          <slot></slot>
        </slot>
      </main>
      <footer class="${page.pageFoot}" role="contentinfo">
        <slot name="page-foot"></slot>
      </footer>
    </section>
  `;
  // TODO: workaround for https://github.com/asyncLiz/rollup-plugin-minify-html-literals/issues/1
  return [template, '<style>', page.styles, '</style>'].join('');
}

Confirmed the installed versions match the requested.

sha512-SaY7LxgySg0yVlsZCO3ehj22SSyOAt/UeYLYoCb9Ld+x3mOr3zQXaV2I3QaGsNkIcgmS910ntazr2V1OpPXr3A==

[asyncLiz]

When I run minifyHTMLLiterals on that string (plus a