Update browserlist

[jorg-vr]

This pull request updates the .browserslist file to the browser versions we're going to support this year.

Before

Autoprefixer

Browsers:
  Chrome for Android: 116
  UC for Android: 15.5
  Chrome: 116, 115, 114, 113, 112, 111, 110, 109, 108, 107, 106, 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86
  Edge: 116, 115
  Firefox: 117, 116, 115, 114, 113, 112, 111, 110, 109, 108, 107, 106, 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86, 85, 84, 83, 82, 81
  iOS Safari: 16.5, 16.4, 16.3, 16.2, 16.1, 16.0, 15.6-15.7, 15.5, 15.4, 15.2-15.3, 15.0-15.1, 14.5-14.8, 14.0-14.4
  Opera Mini: all
  Safari: 16.5, 16.4, 16.3, 16.2, 16.1, 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.1, 15, 14.1, 14

These browsers account for 82.17% of all users globally

Rules

At-Rules:
  @resolution: webkit
  @viewport: o

Selectors:
  ::file-selector-button: webkit
  :autofill: webkit
  :fullscreen: webkit

Properties:
  appearance: webkit
  backdrop-filter: webkit
  backface-visibility: webkit
  background-clip: webkit
  border-image: o
  box-decoration-break: webkit
  color-adjust: webkit, moz
  hyphens: webkit
  mask-border-outset: webkit
  mask-border-repeat: webkit
  mask-border-slice: webkit
  mask-border-source: webkit
  mask-border-width: webkit
  mask-border: webkit
  mask-clip: webkit
  mask-composite: webkit
  mask-image: webkit
  mask-origin: webkit
  mask-position: webkit
  mask-repeat: webkit
  mask-size: webkit
  mask: webkit
  object-fit: o
  object-position: o
  print-color-adjust: webkit, moz
  tab-size: moz, o
  text-decoration-skip-ink: webkit
  text-decoration-skip: webkit
  text-decoration: webkit
  text-emphasis-color: webkit
  text-emphasis-position: webkit
  text-emphasis-style: webkit
  text-emphasis: webkit
  text-size-adjust: webkit
  user-select: webkit

Values:
  cross-fade: webkit
  element: moz
  fill-available: webkit
  fill: webkit
  fit-content: moz
  image-set: webkit
  stretch: webkit, moz

Babel

Using targets:
{
  "chrome": "86",
  "edge": "114",
  "firefox": "81",
  "ios": "14",
  "opera": "99",
  "safari": "14",
  "samsung": "21"
}

Rules

Using plugins:
  transform-unicode-sets-regex { chrome < 112, firefox < 116, ios, safari, samsung }
  proposal-class-static-block { chrome < 94, firefox < 93, ios < 16.4, safari < 16.4 }
  proposal-private-property-in-object { chrome < 91, firefox < 90, ios < 15, safari < 15 }
  proposal-class-properties { firefox < 90, ios < 14.5, safari < 14.1 }
  proposal-private-methods { firefox < 90, ios < 15, safari < 15 }
  syntax-numeric-separator
  syntax-nullish-coalescing-operator
  syntax-optional-chaining
  syntax-json-strings
  syntax-optional-catch-binding
  syntax-async-generators
  syntax-object-rest-spread
  proposal-export-namespace-from { ios < 14.5, safari < 14.1 }
  bugfix/transform-safari-id-destructuring-collision-in-function-expression { ios < 16.3, safari < 16.3 }
  bugfix/transform-v8-spread-parameters-in-optional-chaining { chrome < 91 }
  syntax-top-level-await
  syntax-import-meta

[/home/jorg/Documents/dodona/app/javascript/packs/frame.js]
The corejs3 polyfill entry has been replaced with the following polyfills:
  es.array.includes { "firefox":"81" }
  es.reflect.to-string-tag { "firefox":"81" }
  es.regexp.flags { "chrome":"86", "samsung":"21" }
  es.typed-array.fill { "ios":"14", "safari":"14" }
  es.typed-array.set { "chrome":"86", "ios":"14", "safari":"14" }
  es.typed-array.sort { "ios":"14", "safari":"14" }
  web.immediate { "chrome":"86", "edge":"114", "firefox":"81", "ios":"14", "opera":"99", "safari":"14", "samsung":"21" }


[/home/jorg/Documents/dodona/app/javascript/packs/application_pack.js]
The corejs3 polyfill entry has been replaced with the following polyfills:
  es.array.includes { "firefox":"81" }
  es.reflect.to-string-tag { "firefox":"81" }
  es.regexp.flags { "chrome":"86", "samsung":"21" }
  es.typed-array.fill { "ios":"14", "safari":"14" }
  es.typed-array.set { "chrome":"86", "ios":"14", "safari":"14" }
  es.typed-array.sort { "ios":"14", "safari":"14" }
  web.immediate { "chrome":"86", "edge":"114", "firefox":"81", "ios":"14", "opera":"99", "safari":"14", "samsung":"21" }

Size before mimification

After

Autoprefixer

Browsers:
  Chrome for Android: 116
  UC for Android: 15.5
  Chrome: 116, 115, 114, 113, 112, 111, 110, 109, 108, 107, 106, 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94
  Edge: 116, 115
  Firefox: 117, 116, 115, 114, 113, 112, 111, 110, 109, 108, 107, 106, 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92
  iOS Safari: 16.5, 16.4, 16.3, 16.2, 16.1, 16.0, 15.6-15.7, 15.5, 15.4, 15.2-15.3, 15.0-15.1
  Opera Mini: all
  Safari: 16.5, 16.4, 16.3, 16.2, 16.1, 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.1, 15

These browsers account for 80.84% of all users globally

Rules

only ::file-selector-button: webkit gets removed compared to before

At-Rules:
  @resolution: webkit
  @viewport: o

Selectors:
  :autofill: webkit
  :fullscreen: webkit

Properties:
  appearance: webkit
  backdrop-filter: webkit
  backface-visibility: webkit
  background-clip: webkit
  border-image: o
  box-decoration-break: webkit
  color-adjust: webkit, moz
  hyphens: webkit
  mask-border-outset: webkit
  mask-border-repeat: webkit
  mask-border-slice: webkit
  mask-border-source: webkit
  mask-border-width: webkit
  mask-border: webkit
  mask-clip: webkit
  mask-composite: webkit
  mask-image: webkit
  mask-origin: webkit
  mask-position: webkit
  mask-repeat: webkit
  mask-size: webkit
  mask: webkit
  object-fit: o
  object-position: o
  print-color-adjust: webkit, moz
  tab-size: o
  text-decoration-skip-ink: webkit
  text-decoration-skip: webkit
  text-decoration: webkit
  text-emphasis-color: webkit
  text-emphasis-position: webkit
  text-emphasis-style: webkit
  text-emphasis: webkit
  text-size-adjust: webkit
  user-select: webkit

Values:
  cross-fade: webkit
  element: moz
  fill-available: webkit
  fill: webkit
  fit-content: moz
  image-set: webkit
  stretch: webkit, moz

Babel

Using targets:
{
  "chrome": "94",
  "edge": "114",
  "firefox": "92",
  "ios": "15",
  "opera": "99",
  "safari": "15",
  "samsung": "21"
}

Rules

Using plugins:
  transform-unicode-sets-regex { chrome < 112, firefox < 116, ios, safari, samsung }
  proposal-class-static-block { firefox < 93, ios < 16.4, safari < 16.4 }
  syntax-private-property-in-object
  syntax-class-properties
  syntax-numeric-separator
  syntax-nullish-coalescing-operator
  syntax-optional-chaining
  syntax-json-strings
  syntax-optional-catch-binding
  syntax-async-generators
  syntax-object-rest-spread
  bugfix/transform-safari-id-destructuring-collision-in-function-expression { ios < 16.3, safari < 16.3 }
  syntax-export-namespace-from
  syntax-top-level-await
  syntax-import-meta

[/home/jorg/Documents/dodona/app/javascript/packs/frame.js]
The corejs3 polyfill entry has been replaced with the following polyfills:
  es.array.includes { "firefox":"92" }
  es.regexp.flags { "chrome":"94", "samsung":"21" }
  es.typed-array.set { "chrome":"94" }
  web.immediate { "chrome":"94", "edge":"114", "firefox":"92", "ios":"15", "opera":"99", "safari":"15", "samsung":"21" }

[/home/jorg/Documents/dodona/app/javascript/packs/application_pack.js]
The corejs3 polyfill entry has been replaced with the following polyfills:
  es.array.includes { "firefox":"92" }
  es.regexp.flags { "chrome":"94", "samsung":"21" }
  es.typed-array.set { "chrome":"94" }
  web.immediate { "chrome":"94", "edge":"114", "firefox":"92", "ios":"15", "opera":"99", "safari":"15", "samsung":"21" }

Size before mimification

closes #4904

[jorg-vr]

I would suggest skipping this, this year
The change in non compressed files size is negligible:
0.15kb in application_pack.js and 0,13kb in frame.js

We might as well keep supporting older browsers if there is no advantage in ditching them.

Also to note is that poly fills are only present in these two files. For all other files I get the notice The entry point for the corejs3 polyfill has not been found. which suggest no polyfills are present. I find this odd and will invetsigate further

[jorg-vr]

Also to note is that poly fills are only present in these two files. For all other files I get the notice The entry point for the corejs3 polyfill has not been found. which suggest no polyfills are present. I find this odd and will invetsigate further

Adding import "core-js/stable"; to the top of each package makes them a corejs entry point
But the polyfills included are the same everywhere. So we might as well only include them in the application_pack and frame files, because one of those is loaded on every page.

I had the incorrect assumption that the poly fills included were based on what was required after inspection of relevant code. But I have now been corrected.

[bmesuere]

I would update the browser list since this is our policy and we might start using newer features in the next year (switching to vite and their bundle system might have some impact).