Issue 1:
Consolidates #170 and #168

Currently let variables will only be renamed if there's a duplicate variable with the same name in an upper scope. This needs to be extended to include references that appear in the same function scope.

Issue 2:
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

REPL link to reproduction

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.

Previously filed as

rollup/rollup-plugin-babel#307

sveltejs/svelte#2704