"Unterminated template" thrown with CSS source map inside template literal #9956
Description
Bug Report
Current Behavior
I'm attempting to transpile a Svelte single file component (built as a custom element) with Babel. The Svelte compiler's dev mode includes a source map for CSS. When this option is turned on, it outputs an inline source map with the styles. This is all inside of a template literal.
That itself is valid code and it runs as expected in Chrome. When this is passed to Babel, however, to do further transformations, Babel errors with Unterminated template. We found that the following stopped Babel's error:
- Removing the newline before the source map.
- Removing the
/(note: invalid CSS).
Input Code
this.shadowRoot.innerHTML = `<style>div{display:block}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQuaHRtbCIsInNvdXJjZXMiOlsiZmllbGQuaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyI8c3ZlbHRlOm9wdGlvbnMgdGFnPVwiZGxzLWZpZWxkXCIgLz5cblxuPHN0eWxlPlxuICBkaXYgeyBkaXNwbGF5OiBibG9jazsgfVxuPC9zdHlsZT5cblxuPGRpdiBjbGFzcz1cImZpZWxkXCI+XG4gIDxkaXYgY2xhc3M9XCJfZmllbGRMYWJlbExheW91dFwiPlxuICAgIDxkaXYgY2xhc3M9XCJmaWVsZExhYmVsXCI+XG4gICAgICA8c2xvdCBuYW1lPVwiZmllbGQtbGFiZWxcIj48L3Nsb3Q+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImZpZWxkT3B0aW9uYWxcIiBjbGFzczpvcHRpb25hbD5cbiAgICAgIE9wdGlvbmFsXG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiZmllbGREZXRhaWxcIj5cbiAgICA8c2xvdCBuYW1lPVwiZmllbGQtZGV0YWlsXCI+PC9zbG90PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImZpZWxkQ29udHJvbFwiPlxuICAgIDxzbG90IG5hbWU9XCJmaWVsZC1jb250cm9sXCI+PC9zbG90PlxuICAgIDxzbG90Pjwvc2xvdD5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJmaWVsZE1lc3NhZ2VcIj5cbiAgICA8c2xvdCBuYW1lPVwiZmllbGQtbWVzc2FnZVwiPjwvc2xvdD5cbiAgPC9kaXY+XG48L2Rpdj5cblxuPHNjcmlwdD5cbiAgZXhwb3J0IGxldCB0aGVtZSA9ICcnO1xuICBleHBvcnQgbGV0IG9wdGlvbmFsID0gZmFsc2U7XG48L3NjcmlwdD5cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHRSxHQUFHLEFBQUMsQ0FBQyxBQUFDLE9BQU8sQ0FBRSxLQUFLLEFBQUUsQ0FBQyJ9 */</style>`;
Expected behavior/code
I expect this not to error.
Babel Configuration (.babelrc, package.json, cli command)
{
babelrc: false,
extensions: ['.html', '.js', '.mjs', '.svelte'],
include: ['**/*.html', '**/*.js', '**/*.mjs', '**/*.svelte'],
exclude: ['node_modules/@babel/runtime/**'],
plugins: [
'transform-custom-element-classes',
[
'@babel/plugin-transform-runtime',
{
regenerator: false,
useESModules: false
}
]
],
presets: [
[
'@babel/preset-env',
{
targets: {
// TODO: temporary
chrome: '70',
ie: '11'
}
}
]
],
runtimeHelpers: true
}Environment
- Babel version(s): [e.g. v6.0.0, v7.0.0-beta.34]
7.4.3 - Node/npm version: [e.g. Node 8/npm 5]
node.js v10.15.0, npm 6.9.0 - OS: [e.g. OSX 10.13.4, Windows 10]
OSX 10.14.4 - Monorepo: [e.g. yes/no/Lerna]
Lerna - How you are using Babel: [e.g.
cli,register,loader]
Lerna -> npm script -> Rollup -> https://github.com/rollup/rollup-plugin-babel
Click for 2-level Babel version info
├─┬ @babel/core@7.4.3 │ ├── @babel/code-frame@7.0.0 │ ├── @babel/generator@7.4.0 │ ├── @babel/helpers@7.4.3 │ ├── @babel/parser@7.4.3 │ ├── @babel/template@7.4.0 │ ├── @babel/traverse@7.4.3 │ ├── @babel/types@7.4.0 │ ├── convert-source-map@1.6.0 │ ├── debug@4.1.1 │ ├── json5@2.1.0 │ ├── lodash@4.17.11 │ ├── resolve@1.10.0 │ ├── semver@5.7.0 │ └── source-map@0.5.7 ├─┬ @babel/plugin-transform-runtime@7.4.3 │ ├── @babel/helper-module-imports@7.0.0 │ ├── @babel/helper-plugin-utils@7.0.0 │ ├── resolve@1.10.0 deduped │ └── semver@5.7.0 deduped ├─┬ @babel/polyfill@7.4.3 │ ├── core-js@2.6.5 │ └── regenerator-runtime@0.13.2 ├─┬ @babel/preset-env@7.4.3 │ ├── @babel/helper-module-imports@7.0.0 deduped │ ├── @babel/helper-plugin-utils@7.0.0 deduped │ ├── @babel/plugin-proposal-async-generator-functions@7.2.0 │ ├── @babel/plugin-proposal-json-strings@7.2.0 │ ├── @babel/plugin-proposal-object-rest-spread@7.4.3 │ ├── @babel/plugin-proposal-optional-catch-binding@7.2.0 │ ├── @babel/plugin-proposal-unicode-property-regex@7.4.0 │ ├── @babel/plugin-syntax-async-generators@7.2.0 │ ├── @babel/plugin-syntax-json-strings@7.2.0 │ ├── @babel/plugin-syntax-object-rest-spread@7.2.0 │ ├── @babel/plugin-syntax-optional-catch-binding@7.2.0 │ ├── @babel/plugin-transform-arrow-functions@7.2.0 │ ├── @babel/plugin-transform-async-to-generator@7.4.0 │ ├── @babel/plugin-transform-block-scoped-functions@7.2.0 │ ├── @babel/plugin-transform-block-scoping@7.4.0 │ ├── @babel/plugin-transform-classes@7.4.3 │ ├── @babel/plugin-transform-computed-properties@7.2.0 │ ├── @babel/plugin-transform-destructuring@7.4.3 │ ├── @babel/plugin-transform-dotall-regex@7.4.3 │ ├── @babel/plugin-transform-duplicate-keys@7.2.0 │ ├── @babel/plugin-transform-exponentiation-operator@7.2.0 │ ├── @babel/plugin-transform-for-of@7.4.3 │ ├── @babel/plugin-transform-function-name@7.4.3 │ ├── @babel/plugin-transform-literals@7.2.0 │ ├── @babel/plugin-transform-member-expression-literals@7.2.0 │ ├── @babel/plugin-transform-modules-amd@7.2.0 │ ├── @babel/plugin-transform-modules-commonjs@7.4.3 │ ├── @babel/plugin-transform-modules-systemjs@7.4.0 │ ├── @babel/plugin-transform-modules-umd@7.2.0 │ ├── @babel/plugin-transform-named-capturing-groups-regex@7.4.2 │ ├── @babel/plugin-transform-new-target@7.4.0 │ ├── @babel/plugin-transform-object-super@7.2.0 │ ├── @babel/plugin-transform-parameters@7.4.3 │ ├── @babel/plugin-transform-property-literals@7.2.0 │ ├── @babel/plugin-transform-regenerator@7.4.3 │ ├── @babel/plugin-transform-reserved-words@7.2.0 │ ├── @babel/plugin-transform-shorthand-properties@7.2.0 │ ├── @babel/plugin-transform-spread@7.2.2 │ ├── @babel/plugin-transform-sticky-regex@7.2.0 │ ├── @babel/plugin-transform-template-literals@7.2.0 │ ├── @babel/plugin-transform-typeof-symbol@7.2.0 │ ├── @babel/plugin-transform-unicode-regex@7.4.3 │ ├── @babel/types@7.4.0 deduped ├─┬ babel-plugin-transform-custom-element-classes@0.1.0
Possible Solution
Dunno.
Additional context/Screenshots
Simpler uses of CSS comments in template literals are fine, see this very reduced similar case that isn't a source map
this.innerHTML = `div {display: block}
/* some comment */`;
This is similar to #9790. Sounded different enough to me to file on its own, but do feel free to close if it's a duplicate.