Parcel: Browserslist possibly being ignored

[lottspot]

🐛 bug report

I'm using TypeScript with parcel which I need to transpile to a more recent EMCAScript version (emca2015+) and after some searching/reading around found that the only way to do this currently in parcel is to setup a .browserslistrc or a browserslist parameter in package.json, since everything is fed through @babel/preset-env. Ok, fine. So I setup a browserslistrc:

🎛 Configuration (.babelrc, package.json, cli command)

$ cat .browserslistrc 
last 1 Chrome version
$ node_modules/.bin/browserslist 
chrome 75

The only other config I have setup is a .posthtmlrc, which for completeness sake, is included below

{
    "plugins": {
        "posthtml-include": {
            "root": "./src"
        }
    }
}

The part of my script I'm paying particular attention to is this class:

// component-base.ts
export default class ComponentBase extends HTMLElement { /* ... */ }

So with my browserslist set, I kick off the transpile:

$ yarn test  # parcel src/index.html
yarn run v1.17.3
$ parcel src/index.html
Server running at http://localhost:1234 
✨  Built in 340ms.

🤔 Expected Behavior

The transpiled result should be modern EMCAScript (specifically, I'm expecting it to retain ES2015 native class declarations).

😯 Current Behavior

It transpiles to ES5:

exports.__esModule = true;

var ComponentBase =
/** @class */
function (_super) {
  __extends(ComponentBase, _super);

  function ComponentBase() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
// ...
}

💁 Possible Solution

954

🔦 Context

It should be noted that this works as expeted when the source file is native JS rather than TypeScript

$ cat src/modern.js 
export class NativComponentBase extends HTMLElement {}
$ grep ^class dist/modern.2f6ecb3b.js
class NativComponentBase extends HTMLElement {}

The greater context here is that I'm trying to build Web Components, which require extending native DOM classes, and specifically require ES2015 class inheritance syntax in order to do so.

💻 Code Sample

Above

🌍 Your Environment

• package-lock.json
• Chrome version: 75.0.3770.100
• OS: Arch linux

[mischnic]

Your code first gets transpiled by the Typescript compiler, so you need a tsconfig.json with

{
  "compilerOptions": {
    "target": "ESNext"
  }
}

After that, your browerslist will work fine to keep babel-preset-env in check as well.

[lottspot]

Ahh, that ties it all together... that solved it for me, Thank you!