Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Unterminated template" thrown with CSS source map inside template literal #9956

Open
morewry opened this issue May 7, 2019 · 1 comment

Comments

Projects
None yet
3 participants
@morewry
Copy link

commented May 7, 2019

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:

  1. Removing the newline before the source map.
  2. 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>`;

Screen Shot 2019-05-07 at 12 48 33 PM

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 */`;

Screen Shot 2019-05-07 at 12 48 39 PM

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.

Previously filed as

rollup/rollup-plugin-babel#307
sveltejs/svelte#2704

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented May 7, 2019

Hey @morewry! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.