opt in IE11 / legacy browsers support for polyfills and browserslist (differential loading)

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

As part of #187 and #9 Greenwood provided support for programmatically adding Polyfills. However, the next step would be to able to make IE11 opt-in and allow for other browser configurations.

Details

1. To start with, it would be great to make IE11 support in browserslist opt-in, to keep Polyfills Plugin as close to evergreen by default.
2. From there, additional review of the default configuration should also be reviewed, to make sure it is doing the best work for those with or without older browsers to maintain.
3. Review / track status of babel/preset-modules? Also this Twitter thread has some good conversations around @babel/preset-env and .browserslistrc
4. Allow custom user babel or postcss config overrides?
5. Make sure the website works
   • greenwood website home page loading has syntax error with internet explorer 11 (also causing no logo fade?) #198
   • website home page button is not colored blue in Microsoft Edge / IE11 (CSS variables support?) #196

[thescientist13]

IE11 also might need additional shims. This is what we have in Create Evergreen App docs.

ES5 Adapter

However, if transpiling down to ES5 and because Custom Elements v1 must be class based,
transpiling these v0 Custom Elements will break in modern browsers. This means a shim must be put in > place to wrap these Custom Elements so they will This

<!-- Add forwards compatibility for ES5 transpiled web components, e.g. for Chrome, Safari -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-
adapter.js"></script>

[thescientist13]

This could help from the PostCSS side of things: edgie.

[thescientist13]

I don't think IE11 is really relevant these days, and if it, we have a Babel plugin, or someone could create a esbuild plugin, etc.