Node.js 18

.github/workflows/backstop-regression-testing.yml

@@ -38,7 +38,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           cache: yarn
-          node-version: 16
+          node-version: 18
 
       # Work around https://github.com/yarnpkg/yarn/issues/4890
       - name: Install dependencies

.github/workflows/lint.yml

@@ -14,7 +14,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           cache: yarn
-          node-version: 16
+          node-version: 18
 
       # Work around https://github.com/yarnpkg/yarn/issues/4890
       - name: Install dependencies

.github/workflows/release-on-semver-tag.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '14'
+          node-version: '18'
       - name: Install dependencies
         run: yarn --frozen-lockfile --network-timeout 1000000
       - run: yarn dist
@@ -65,3 +65,8 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./frontend
           publish_branch: ${{ env.dist_branch }}
+
+      - uses: "marvinpinto/[email protected]"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          prerelease: false

README.md

@@ -7,7 +7,7 @@
 
 To contribute and run the styleguide, you will need few things :
 - [🔀 Git](https://git-scm.com/) - Version control system
-- [📗 NodeJS 14+](https://nodejs.org/en/) - JavaScript runtime used to build the project
+- [📗 NodeJS 18+](https://nodejs.org/en/) - JavaScript runtime used to build the project
 - [🐈 Yarn](https://yarnpkg.com/lang/en/) - Dependency manager built on top of the NPM registry
 
 Then, to install the project onto your workstation:

package.json

@@ -180,12 +180,12 @@
     "@babel/preset-react": "^7.14.5",
     "babel-loader": "^9.1.3",
     "backstopjs": "^6.1.3",
-    "browser-sync": "^2.29.1",
-    "browser-sync-webpack-plugin": "^2.3.0",
+    "browser-sync": "^3.0.2",
+    "browser-sync-v3-webpack-plugin": "^0.1.0",
     "colorable": "https://github.com/epfl-si/colorable",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "core-js": "3",
-    "css-loader": "^5.2.6",
+    "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^3.3.1",
     "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -195,9 +195,9 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "js-beautify": "^1.15.1",
     "mini-css-extract-plugin": "^2.1.0",
-    "node-polyfill-webpack-plugin": "^2.0.1",
+    "node-polyfill-webpack-plugin": "^4.0.0",
     "postcss": "^8.4.31",
-    "postcss-loader": "^7.3.0",
+    "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^9.3.0",
     "prop-types": "^15.7.2",
     "rc-tooltip": "^6.2.0",
@@ -212,16 +212,16 @@
     "react-router-dom": "^5.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "redux": "4",
-    "release-it": "^15.5.0",
+    "release-it": "^17.3.0",
     "sass": "^1.55.0",
     "sass-loader": "^12.1.0",
-    "style-loader": "^3.0.0",
+    "style-loader": "^4.0.0",
     "styled-components": "^5.3.0",
     "stylelint": "^15.10.1",
     "stylelint-config-recommended-scss": "^9.0.1",
     "stylelint-order": "^6.0.3",
     "stylelint-scss": "^4.5.0",
-    "stylelint-webpack-plugin": "^4.1.1",
+    "stylelint-webpack-plugin": "^5.0.1",
     "svg-spritemap-webpack-plugin": "^4.5.0",
     "twig-html-loader": "^0.1.9",
     "unminified-webpack-plugin": "^3.0.0",

webpack.config.js

@@ -1,5 +1,5 @@
 const path                      = require('path')
-const BrowserSyncPlugin         = require('browser-sync-webpack-plugin')
+const BrowserSyncPlugin         = require('browser-sync-v3-webpack-plugin')
 const NodePolyfillPlugin        = require("node-polyfill-webpack-plugin")
 const CopyPlugin                = require('copy-webpack-plugin')
 const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally')