feat: new browserslist config for es6 builds (#1833)

* feat: new browserslist config * Update query to output es6 code to "defaults and supports es6-module, maintained node versions" * Refactor test for not supporting color fallbacks * Prettify package.json * Refactor postbuild test to omit core-js in bundle * Update docs about the browserslist change Co-authored-by: Tobias Høegh <tobias@tujo.no>
dnbexperience · May 31, 2023 · 492cfa9 · 492cfa9
1 parent 694d723
commit 492cfa9
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -38,7 +38,8 @@
     "node-gyp": "8.4.0"
   },
   "resolutions": {
-    "svg2vectordrawable/svgo": "2.3.0"
+    "svg2vectordrawable/svgo": "2.3.0",
+    "gatsby/browserslist": "4.21.4"
   },
   "engines": {
     "node": "14.17.0",

diff --git a/packages/dnb-design-system-portal/.browserslistrc b/packages/dnb-design-system-portal/.browserslistrc
@@ -1,7 +1,2 @@
 # Should reflect: https://eufemia.dnb.no/uilib/usage#supported-browsers-and-platforms
-edge >= 14
-firefox >= 52
-chrome >= 49
-safari >= 10
-not ie > 0
-not ie_mob > 0
+defaults and supports es6-module, maintained node versions
diff --git a/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
@@ -17,6 +17,10 @@
 
 v10 of @dnb/eufemia contains _breaking changes_. As a migration process, you can simply search and replace:
 
+## Features
+
+1. [Browser support](/uilib/usage/#supported-browsers-and-platforms) has been updated to support modern browsers only (es6).
+
 ### StepIndicator
 
 1. Find the `active_item` property and replace it with `current_step`.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage.md b/packages/dnb-design-system-portal/src/docs/uilib/usage.md
@@ -38,10 +38,8 @@ Read more in the [First Steps](/uilib/usage/first-steps/) section.
 
 ## Supported Browsers and Platforms
 
-We use the following config in our browserlists(.browserslistrc): `edge >= 14, firefox >= 52, chrome >= 49, safari >= 10, not ie > 0, not ie_mob > 0`.
+Eufemia uses the following config for the bundle output, defined in `.browserslistrc`:
 
-To see exactly which browsers this config supports, take a look [here](https://browsersl.ist/#q=edge+%3E%3D+14%2C+firefox+%3E%3D+52%2C+chrome+%3E%3D+49%2C+safari+%3E%3D+10%2C+not+ie+%3E+0%2C+not+ie_mob+%3E+0).
+- `defaults and supports es6-module, maintained node versions`
 
-| Edge                 | Firefox              | Chrome               | Safari               | Node                 |
-| -------------------- | -------------------- | -------------------- | -------------------- | -------------------- |
-| <small>>=</small> 14 | <small>>=</small> 45 | <small>>=</small> 49 | <small>>=</small> 10 | <small>>=</small> 10 |
+To see exactly which browsers this config supports, take a look [here](https://browsersl.ist/#q=defaults+and+supports+es6-module%2C+maintained+node+versions).
diff --git a/...dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md b/...dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md
@@ -20,7 +20,7 @@ Use [postcss-preset-env](https://github.com/csstools/postcss-preset-env). Exampl
       postcssPresetEnv({
         stage: 0,
         preserve: true,
-        browsers: ['last 2 versions', 'not ie > 0', 'not ie_mob > 0'],
+        browsers: ['defaults and supports es6-module, maintained node versions'],
         importFrom: [require.resolve('@dnb/eufemia/style/dnb-ui-properties.css')]
       })
     ]

diff --git a/packages/dnb-eufemia/.browserslistrc b/packages/dnb-eufemia/.browserslistrc
@@ -1,6 +1 @@
-edge >= 14
-firefox >= 52
-chrome >= 49
-safari >= 10
-not ie > 0
-not ie_mob > 0
+defaults and supports es6-module, maintained node versions
diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json
@@ -25,11 +25,11 @@
     "postbuild:ci": "./scripts/postbuild/postbuild.sh",
     "build:cjs": "./scripts/postbuild/babel-cjs.sh",
     "build:clean": "rm -rf build/**",
+    "postbuild:commit": "babel-node --extensions .js,.ts,.tsx ./scripts/figma/tasks/commitChanges",
     "build:copy": "./scripts/postbuild/copy-build-artifacts.sh",
     "build:es": "./scripts/postbuild/babel-es.sh",
     "build:esm": "./scripts/postbuild/babel-esm.sh",
     "prebuild:figma:ci": "yarn figma",
-    "postbuild:commit": "babel-node --extensions .js,.ts,.tsx ./scripts/figma/tasks/commitChanges",
     "build:pack": "yarn build && yarn publish:prepare && cd ./build && yarn pack",
     "build:packages": "./scripts/postbuild/build-packages.sh",
     "build:prebuild": "babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/runPrepub.js",
@@ -165,7 +165,7 @@
     "babel-plugin-optimize-clsx": "2.6.2",
     "babel-plugin-search-and-replace": "1.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "browserslist": "4.18.0",
+    "browserslist": "4.21.4",
     "camelcase": "6.2.0",
     "chalk": "4.1.2",
     "color": "4.0.1",

diff --git a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js
@@ -184,7 +184,7 @@ describe('babel build', () => {
               'utf-8'
             )
             expect(content).toContain('export default class Input extends')
-            expect(content).toContain('core-js/modules/es')
+            expect(content).not.toContain('core-js/modules/es')
             expect(content).toContain(
               'import _extends from "@babel/runtime/helpers/esm/extends";'
             )

diff --git a/packages/dnb-eufemia/scripts/prebuild/config/postcssConfig.js b/packages/dnb-eufemia/scripts/prebuild/config/postcssConfig.js
@@ -9,9 +9,9 @@ module.exports = (options) => {
     // preset-env processes the most of our old legacy browsers
     require('postcss-preset-env')({
       stage: 2,
-      browsers: ['last 2 versions', 'not ie > 0', 'not ie_mob > 0'].filter(
-        (i) => i
-      ),
+      browsers: [
+        'defaults and supports es6-module, maintained node versions',
+      ].filter((i) => i),
       ...options,
     }),
   ].filter((i) => i) // remove the first

diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.js
@@ -118,7 +118,7 @@ if (isCI) {
       expect(global.theme[0]).toMatch(
         new RegExp('color:\\s?var\\(--color-sea-green\\);')
       )
-      expect(global.theme[0]).toMatch(new RegExp('color:\\s?#007272;'))
+      expect(global.theme[0]).not.toMatch(new RegExp('color:\\s?#007272;'))
       expect(global.theme[0]).not.toContain('fuchsia')
     })
   })

diff --git a/yarn.lock b/yarn.lock
@@ -3256,7 +3256,7 @@ __metadata:
     babel-plugin-optimize-clsx: 2.6.2
     babel-plugin-search-and-replace: 1.1.0
     babel-plugin-transform-react-remove-prop-types: 0.4.24
-    browserslist: 4.18.0
+    browserslist: 4.21.4
     camelcase: 6.2.0
     chalk: 4.1.2
     classnames: 2.3.1
@@ -10748,18 +10748,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:4.18.0":
-  version: 4.18.0
-  resolution: "browserslist@npm:4.18.0"
+"browserslist@npm:4.21.4, browserslist@npm:^4.21.3":
+  version: 4.21.4
+  resolution: "browserslist@npm:4.21.4"
   dependencies:
-    caniuse-lite: ^1.0.30001280
-    electron-to-chromium: ^1.3.896
-    escalade: ^3.1.1
-    node-releases: ^2.0.1
-    picocolors: ^1.0.0
+    caniuse-lite: ^1.0.30001400
+    electron-to-chromium: ^1.4.251
+    node-releases: ^2.0.6
+    update-browserslist-db: ^1.0.9
   bin:
     browserslist: cli.js
-  checksum: 8bf8867d05d8709ba936bbe6d7c5055fb07e4c3227866e64b795044e7c44be1ff0c65cb9e95e8f53d3119ed92bd783ebbb4a54a9d69b5cbb9f8b17ec2864067a
+  checksum: 4af3793704dbb4615bcd29059ab472344dc7961c8680aa6c4bb84f05340e14038d06a5aead58724eae69455b8fade8b8c69f1638016e87e5578969d74c078b79
   languageName: node
   linkType: hard
 
@@ -10808,20 +10807,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.21.3":
-  version: 4.21.4
-  resolution: "browserslist@npm:4.21.4"
-  dependencies:
-    caniuse-lite: ^1.0.30001400
-    electron-to-chromium: ^1.4.251
-    node-releases: ^2.0.6
-    update-browserslist-db: ^1.0.9
-  bin:
-    browserslist: cli.js
-  checksum: 4af3793704dbb4615bcd29059ab472344dc7961c8680aa6c4bb84f05340e14038d06a5aead58724eae69455b8fade8b8c69f1638016e87e5578969d74c078b79
-  languageName: node
-  linkType: hard
-
 "bser@npm:2.1.1":
   version: 2.1.1
   resolution: "bser@npm:2.1.1"
@@ -11266,7 +11251,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000981, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001271, caniuse-lite@npm:^1.0.30001280, caniuse-lite@npm:^1.0.30001297, caniuse-lite@npm:^1.0.30001312, caniuse-lite@npm:^1.0.30001349":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000981, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001271, caniuse-lite@npm:^1.0.30001297, caniuse-lite@npm:^1.0.30001312, caniuse-lite@npm:^1.0.30001349":
   version: 1.0.30001418
   resolution: "caniuse-lite@npm:1.0.30001418"
   checksum: 03380a9ba50b1abd0081e76bfdf331bfb2c28f2277ce5eead5b83960c4db9f1fbbd84a536efa6f8f1fe2c038bc01129d6c42d17f8323fe99a016a5da3829c4bc
@@ -14549,13 +14534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.3.896":
-  version: 1.3.896
-  resolution: "electron-to-chromium@npm:1.3.896"
-  checksum: 6a6120bc6d2c53c57409831e0acd4c9d2c3c18e30851b3c9278bce9a4ad24ce7781fbc0fe735926aea358875ab5b10f32208df865a1c42ca565108f55b6e4aae
-  languageName: node
-  linkType: hard
-
 "electron-to-chromium@npm:^1.4.147":
   version: 1.4.148
   resolution: "electron-to-chromium@npm:1.4.148"