SWED-2543 increase browsers support

package.json

@@ -35,7 +35,9 @@
 	"homepage": "https://github.com/swedbankpay/design.swedbankpay.com#readme",
 	"browserslist": [
 		"last 3 versions",
-		"> 1%",
+		"last 2 major versions",
+		"> 0.5%",
+		"Firefox ESR",
 		"not dead"
 	],
 	"dependencies": {

postcss.config.js

@@ -1,3 +1,11 @@
+const postcssPresetEnv = require("postcss-preset-env");
+
 module.exports = {
-	plugins: [["postcss-preset-env"]],
+	plugins: [
+		postcssPresetEnv({
+			stage: 2,
+			minimumVendorImplementations: 2,
+			preserve: true,
+		}),
+	],
 };

src/App/GetStarted/get-started/ForDevelopers/index.js

@@ -350,7 +350,8 @@ const BrowserSupport = () => (
 		<div className="alert alert-informative mt-4">
 			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
-				<b>Target Browser:</b> &quot;Last 3 versions, &gt; 1%, not dead&quot;
+				<b>Target Browser:</b> &quot;Last 3 versions, Last 2 major versions,
+				&gt; 0.5%, not dead&quot;
 			</p>
 		</div>
 		<h4>Browser support for products using the Design Guide</h4>
@@ -360,6 +361,9 @@ const BrowserSupport = () => (
 			browsers than the ones supported by the Design Guide you need to maintain
 			and test the component code in in your project.{" "}
 		</p>
+		<p>
+			We of course encourage to use PostCSS to do that in your build pipeline.
+		</p>
 	</section>
 );
 const GridAndBreakpoints = () => (