Upgrade to Node 20 & Upgrade npm packages (#463) Fix #462

.eslintrc

@@ -1,9 +1,7 @@
 {
-  "extends": [
-    "eslint:recommended"
-  ],
+  "extends": ["eslint:recommended"],
   "parserOptions": {
-    "ecmaVersion": 9
+    "ecmaVersion": 2020
   },
   "env": {
     "browser": true
@@ -13,9 +11,7 @@
     "lines-between-class-members": [
       "error",
       "always",
-      {
-        "exceptAfterSingleLine": true
-      }
+      { "exceptAfterSingleLine": true }
     ],
     // note you must disable the base rule as it can report incorrect errors
     "no-use-before-define": "off",

.github/workflows/lint.yml

@@ -31,9 +31,9 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version-file: '.nvmrc'
           cache: 'npm'
       - name: Install dependencies
         run: npm ci

.nvmrc

@@ -0,0 +1 @@
+20

.pre-commit-config.yaml

@@ -27,25 +27,24 @@ repos:
     hooks:
       - id: djhtml
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.5.1
+    rev: v3.1.0
     hooks:
       - id: prettier
         types_or: [css, javascript, json, yaml]
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.8.0
+    rev: v8.55.0
     hooks:
       - id: eslint
         types: [file]
         files: \.(js)$
         args: [--report-unused-disable-directives]
         additional_dependencies:
-          - eslint@8.8.0
+          - eslint@8.55.0
   - repo: https://github.com/thibaudcolas/pre-commit-stylelint
     rev: v14.2.0
     hooks:
       - id: stylelint
         files: \.css$
         additional_dependencies:
-          - stylelint@14.9.1
-          - stylelint-config-standard@26.0.0
-          - stylelint-config-prettier@9.0.3
+          - stylelint@15.11.0
+          - stylelint-config-standard@34.0.0

.stylelintrc

@@ -1,7 +1,12 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "extends": ["stylelint-config-standard"],
   "rules": {
+    "declaration-block-no-redundant-longhand-properties": [
+      true,
+      { "ignoreShorthands": ["gap", "inset"] }
+    ],
     "no-descending-specificity": null,
+    "media-feature-range-notation": null,
     "custom-property-pattern": "^([a-z][a-z0-9]*)(-{1,2}[a-z0-9]+)*$",
     "selector-class-pattern": [
       "^[a-z]+[0-9]{0,2}(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$",

bakerydemo/static/css/main.css

@@ -1414,7 +1414,9 @@ input[type='radio'] {
   padding: 15px 25px;
   display: inline-block;
   vertical-align: middle;
-  transition: color ease 0.1s, background-color ease 0.1s;
+  transition:
+    color ease 0.1s,
+    background-color ease 0.1s;
 }
 
 .homepage .home-hero .hero-cta-link:hover {

package.json

@@ -4,17 +4,17 @@
   "repository": "https://github.com/wagtail/bakerydemo",
   "private": true,
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=20.0.0"
   },
   "devDependencies": {
-    "eslint": "^8.8.0",
-    "prettier": "^2.5.1",
-    "stylelint": "^14.2.0",
-    "stylelint-config-standard": "^26.0.0",
-    "stylelint-config-prettier": "^9.0.3"
+    "eslint": "^8.55.0",
+    "prettier": "^3.1.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard": "^34.0.0"
   },
   "scripts": {
     "fix:js": "eslint --ext .js --fix .",
+    "fix:css": "stylelint --fix **/*.css",
     "format": "prettier --write \"**/?(.)*.{css,js,json,yaml,yml}\"",
     "lint:js": "eslint --ext .js --report-unused-disable-directives .",
     "lint:css": "stylelint **/*.css",