Add common browserslist configuration

[aduth]

Why:

• So that we can have a common and consistent source of truth for supported browsers, as interpreted by tools which detect and make use of it automatically (namely, Babel and Autoprefixer).
• To marginally reduce the size of CSS stylesheets by eliminating unnecessary browser prefixes (-0.1kb brotli'd).

Click to see stylesheet diff

3950d3949
<      -moz-appearance: none;
4296d4294
<      -moz-appearance: none;
4600d4597
<      -moz-appearance: none;
4621d4617
<        -moz-appearance: listbox;
4843d4838
<      -moz-appearance: none;
4971d4965
<      -moz-user-select: none;
5009d5002
<      -moz-appearance: none;
10057,10062c10050,10052
<     -moz-column-count: 2;
<          column-count: 2;
<     -moz-column-gap: 2rem;
<          column-gap: 2rem;
<     -moz-column-fill: balance;
<          column-fill: balance;
---
>     column-count: 2;
>     column-gap: 2rem;
>     column-fill: balance;
10067,10068c10057
<     -moz-column-count: 4;
<          column-count: 4;
---
>     column-count: 4;
10073,10074c10062
<   -moz-column-break-inside: avoid;
<        break-inside: avoid;
---
>   break-inside: avoid;
10201d10188
<      -moz-user-select: none;
10209d10195
<      -moz-user-select: text;
10403,10411d10388
< @-webkit-keyframes slidein-left {
<   from {
<     transform: translateX(15rem);
<   }
<   to {
<     transform: translateX(0);
<   }
< }
<
10443,10444c10420
<     -webkit-animation: slidein-left 0.3s ease-in-out;
<             animation: slidein-left 0.3s ease-in-out;
---
>     animation: slidein-left 0.3s ease-in-out;
11029d11004
<      -moz-user-select: none;
11221d11195
<      -moz-appearance: none;
13671d13644
<   position: -webkit-sticky;
14428,14439d14400
< @-webkit-keyframes spinner-dot-one {
<   0% {
<     transform: scale(0);
<   }
<   25% {
<     transform: scale(1);
<   }
<   50% {
<     transform: scale(0);
<   }
< }
<
14451,14464d14411
< @-webkit-keyframes spinner-dot-two {
<   0% {
<     transform: scale(0);
<   }
<   20% {
<     transform: scale(0);
<   }
<   45% {
<     transform: scale(1);
<   }
<   70% {
<     transform: scale(0);
<   }
< }
14479,14492d14425
< @-webkit-keyframes spinner-dot-three {
<   0% {
<     transform: scale(0);
<   }
<   40% {
<     transform: scale(0);
<   }
<   65% {
<     transform: scale(1);
<   }
<   90% {
<     transform: scale(0);
<   }
< }
14528,14535c14461,14464
<   -webkit-animation-duration: 1.25s;
<           animation-duration: 1.25s;
<   -webkit-animation-iteration-count: infinite;
<           animation-iteration-count: infinite;
<   -webkit-animation-timing-function: linear;
<           animation-timing-function: linear;
<   -webkit-animation-delay: 0.01s;
<           animation-delay: 0.01s;
---
>   animation-duration: 1.25s;
>   animation-iteration-count: infinite;
>   animation-timing-function: linear;
>   animation-delay: 0.01s;
14548,14549c14477
<   -webkit-animation-name: spinner-dot-one;
<           animation-name: spinner-dot-one;
---
>   animation-name: spinner-dot-one;
14552,14553c14480
<   -webkit-animation-name: spinner-dot-two;
<           animation-name: spinner-dot-two;
---
>   animation-name: spinner-dot-two;
14556,14557c14483
<   -webkit-animation-name: spinner-dot-three;
<           animation-name: spinner-dot-three;
---
>   animation-name: spinner-dot-three;
36162d36087
<   position: -webkit-sticky;

[zachmargolis]

LGTM

[zachmargolis]

would it make sense to define a targets so we can declare this once?

const targets = isTestEnv ? 'current node' : undefined;
...
      ['@babel/preset-env', { targets }],

[aduth]

Yeah, I was wondering if there might be a way to simplify / share some of this configuration.

The challenge comes from the other targets configuration below, targeting our modern polyfills:

identity-idp/babel.config.js

Line 20 in 4eba3d1

targets: isTestEnv ? 'current node' : '> 1% and supports es6-module',

So while isTestEnv ? 'current node' : undefined is sorta the "default" targets configuration, it's not the only one.

I also don't love how the "modern polyfills" configuration reimplements part of the .browserslistrc configuration. It would be nicer as something like...

`(${config}) and supports es6-module`

...but we don't want to include IE11 polyfills. It's hopefully a short-lived solution anyways, with us eventually (🤞 ) dropping support for IE11.

[aduth]

I think it's probably best to treat the "default" targets as the desirable (post-Internet Explorer) targets configuration, so consolidated in 86fe2bd.