Once we migrated to yarn we found that during our build a large number of our CSS and JS files were changing.
The changes included
Adding -ms- prefixes to all flexbox rules
Adding the Object.prototype.toString core-js module to a number of JS files
Reordering the exports inside of the dist files.
We found this was down to how the build script differed depending on if it was run using NPM or Yarn. We noticed these changes were there to support some of the outlying browser versions still covered under our .browserlistrc file.
Solution
We decided to lock down our browserlist support that is more inline with what we state here in our support list
We experiemented with a number of queries but found the best way was to be quite specifc in our queries. So we ended up on the following
last 3 Chrome versions and not <= 0.2% in GB
last 3 Firefox versions and not <= 0.2% in GB
last 3 Safari versions and not <= 0.2% in GB
last 3 Edge versions and not <= 0.2% in GB
last 3 Samsung versions and not <= 0.2% in GB
last 3 iOS version and not <= 0.2% in GB
last 3 ChromeAndroid versions and not <= 0.2% in GB
last 3 FirefoxAndroid versions and not <= 0.2% in GB
ie 11
This combination will ensure we always support the latest 2 versions but as a new versions comes out, adoption is not always instant. So we retain the last 3 until the usage transitions across to the latest 2. Once the third version drops below 0.2% usage we drop support.
IE 11 is also called out here as its own query, this will make it easier to remove it as we decide to drop support from our packages.
Next steps.
We will be kicking off a discussion around dropping support for IE 11 which will have a large impact across all our packages.
Problem
Once we migrated to yarn we found that during our build a large number of our CSS and JS files were changing.
The changes included
-ms-prefixes to all flexbox rulesObject.prototype.toStringcore-js module to a number of JS filesdistfiles.We found this was down to how the build script differed depending on if it was run using NPM or Yarn. We noticed these changes were there to support some of the outlying browser versions still covered under our
.browserlistrcfile.Solution
We decided to lock down our browserlist support that is more inline with what we state here in our support list
https://www.coop.co.uk/experience-library/browser-and-device-support.html
We experiemented with a number of queries but found the best way was to be quite specifc in our queries. So we ended up on the following
This combination will ensure we always support the latest 2 versions but as a new versions comes out, adoption is not always instant. So we retain the last 3 until the usage transitions across to the latest 2. Once the third version drops below 0.2% usage we drop support.
IE 11 is also called out here as its own query, this will make it easier to remove it as we decide to drop support from our packages.
Next steps.
We will be kicking off a discussion around dropping support for IE 11 which will have a large impact across all our packages.