Add default P3 post-process config to use html-tag

[web-padawan]

Description

As a developer, I want to use the tagged template literals (instead of usual template literals) when converting to Polymer 3, in order to get the proper support for modern tools and plugins.
Requested in Polymer/polymer-modulizer#449 but I was unable to quickly implement it there.

Current

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<custom-style>
  <style>
    html {
      --lumo-size-xs: 1.625rem;
      --lumo-size-s: 1.875rem;
      --lumo-size-m: 2.25rem;
      --lumo-size-l: 2.75rem;
      --lumo-size-xl: 3.5rem;

      /* Icons */
      --lumo-icon-size-s: 1.25em;
      --lumo-icon-size-m: 1.5em;
      --lumo-icon-size-l: 2.25em;
      /* For backwards compatibility */
      --lumo-icon-size: var(--lumo-icon-size-m);
    }
  </style>
</custom-style>`;

document.head.appendChild($_documentContainer.content);

Expected

import { html } from '@polymer/polymer/lib/utils/html-tag.js';

const $_documentContainer = html`<custom-style>
  <style>
    html {
      --lumo-size-xs: 1.625rem;
      --lumo-size-s: 1.875rem;
      --lumo-size-m: 2.25rem;
      --lumo-size-l: 2.75rem;
      --lumo-size-xl: 3.5rem;

      /* Icons */
      --lumo-icon-size-s: 1.25em;
      --lumo-icon-size-m: 1.5em;
      --lumo-icon-size-l: 2.25em;
      /* For backwards compatibility */
      --lumo-icon-size: var(--lumo-icon-size-m);
    }
  </style>
</custom-style>`;

document.head.appendChild($_documentContainer.content);

Possible benefits

• support for babel-plugin-template-html-minifier: easy to minify CSS, especially remove comments from the above code
• support for VSCode plugin syntax highlighting

Possible negative effects

• code transpiled by Babel will get larger because of how it transpiles tagged template literals, but the outcome does not seem noticeable, especially when compared with benefit of CSS minifying

Note

We will have to make sure we do not have duplicate @polymer/polymer/lib/utils/html-tag.js import, happens at least in dropdown-menu.

---

This change is 

[web-padawan]

Updated the PR to only use the suggested config for theme/**/*-styles.js as those files contain most of CSS and especially because it is safe to replace the $_documentContainer occurrences there.

For the files in src it is not safe, as we would end up with duplicate imports in cases then they also contain both component template and icons (happens for vaadin-select, vaadin-grid-sorter, vaadin-grid-tree-toggle etc) and the html tag is already added by modulizer.

[limonte]

🎉 This PR is included in version 0.16.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀