Regression in 2.1.2: incorrect argument passed to babelHelpers.taggedTemplateLiteral

[web-padawan]

Code minified with 2.1.2 below, note [void 0] being passed as first argument:

var e = babelHelpers.taggedTemplateLiteral([void 0], ['<style>:host{display:inline-block;position:relative;outline:0;white-space:nowrap}:host([hidden]){display:none!important}.vaadin-button-container::before{content:"\\\\2003";display:inline-block;width:0}.vaadin-button-container{display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;min-height:inherit;text-shadow:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part=prefix],[part=suffix]{flex:none}[part=label]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#button{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:inherit}</style><div class="vaadin-button-container"><div part="prefix"><slot name="prefix"></slot></div><div part="label"><slot></slot></div><div part="suffix"><slot name="suffix"></slot></div></div><button id="button" type="button"></button>']);

Not minified code does not contain this, but contains both strings and raw:

var e = babelHelpers.taggedTemplateLiteral(['\n    <style>\n      :host {\n        display: inline-block;\n        position: relative;\n        outline: none;\n        white-space: nowrap;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n\n      /* Ensure the button is always aligned on the baseline */\n      .vaadin-button-container::before {\n        content: "\\2003";\n        display: inline-block;\n        width: 0;\n      }\n\n      .vaadin-button-container {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        width: 100%;\n        height: 100%;\n        min-height: inherit;\n        text-shadow: inherit;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        user-select: none;\n      }\n\n      [part="prefix"],\n      [part="suffix"] {\n        flex: none;\n      }\n\n      [part="label"] {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      #button {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        cursor: inherit;\n      }\n    </style>\n    <div class="vaadin-button-container">\n      <div part="prefix">\n        <slot name="prefix"></slot>\n      </div>\n      <div part="label">\n        <slot></slot>\n      </div>\n      <div part="suffix">\n        <slot name="suffix"></slot>\n      </div>\n    </div>\n    <button id="button" type="button"></button>\n'], ['\n    <style>\n      :host {\n        display: inline-block;\n        position: relative;\n        outline: none;\n        white-space: nowrap;\n      }\n\n      :host([hidden]) {\n        display: none !important;\n      }\n\n      /* Ensure the button is always aligned on the baseline */\n      .vaadin-button-container::before {\n        content: "\\\\2003";\n        display: inline-block;\n        width: 0;\n      }\n\n      .vaadin-button-container {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        width: 100%;\n        height: 100%;\n        min-height: inherit;\n        text-shadow: inherit;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        user-select: none;\n      }\n\n      [part="prefix"],\n      [part="suffix"] {\n        flex: none;\n      }\n\n      [part="label"] {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      #button {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n        cursor: inherit;\n      }\n    </style>\n    <div class="vaadin-button-container">\n      <div part="prefix">\n        <slot name="prefix"></slot>\n      </div>\n      <div part="label">\n        <slot></slot>\n      </div>\n      <div part="suffix">\n        <slot name="suffix"></slot>\n      </div>\n    </div>\n    <button id="button" type="button"></button>\n']);

Looks like both "strings" and "raw" should be passed to babelHelpers.taggedTemplateLiteral: https://github.com/babel/babel/blob/bc347bab7aeb2a1d14c22443648134ba124311db/packages/babel-helpers/src/helpers.js#L761

[coreyfarrell]

Thanks for this report. Could you link an example babelrc which exposes this problem? I'm guessing this happens when transpiling for legacy browsers without support for JS template literals?

[web-padawan]

Yes, happens in ES5 build for IE11, will share a link to the branch in my webpack starter with a reproduction

[web-padawan]

Sorry for the delay, the configuration I am using is here web-padawan/polymer3-webpack-starter#22

Especially, it relies on webpack-babel-multi-target-plugin and the relevant part of config is here: https://github.com/web-padawan/polymer3-webpack-starter/blob/ca2c579c6026a94e62e6fbc73335a07bde33043f/webpack.config.js#L89

Steps to reproduce:

1. npm i
2. npm run build
3. npm start
4. Open the page in IE11 and see "undefined" (instead of button)