Merge pull request #1027 from SwedbankPay/feature/SWED-2543-add_css_s…

…upport

SWED-2543 increase css browserslist support

RELEASE_NOTES.md

@@ -12,4 +12,6 @@
 
 ## Technical changes
 
+- Browser support got significantly increased (now last 2 major versions, Firefox ESR, > 0,5% instead of 1%).
+  - This is only impacting projects consuming the CSS & JS straight from the CDN. If you're pulling the source files then the polyfilling/transpilling will only be done by your own build pipeline anyways.
 - updated dependencies

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/__snapshots__/index.test.js.snap

@@ -1170,7 +1170,7 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
         <b>
           Target Browser:
         </b>
-         "Last 3 versions, &gt; 1%, not dead"
+         "Last 3 versions, Last 2 major versions, &gt; 0.5%, not dead"
       </p>
     </div>
     <h4>
@@ -1180,6 +1180,9 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
       It is up to every Project manager and development team to decide which browsers their product should support. If you want to support other 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>
 </section>
 `;

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 = () => (