Update all dependencies (major) (#572)

* Update all dependencies * Update to work with Stylelint 14 * Revert from jammy to focal * Revert from node back to 18 Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Anthony Dillon <[email protected]>
canonical · Jan 11, 2023 · cbbf936 · cbbf936
1 parent 0b9340d
commit cbbf936
Show file tree

Hide file tree

Showing 9 changed files with 1,494 additions and 3,184 deletions.
diff --git a/.github/workflows/docs-links.yaml b/.github/workflows/docs-links.yaml
@@ -11,7 +11,7 @@ jobs:
 
     steps:
       - name: Checkout main
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Install linkchecker
         run: sudo pip install LinkChecker

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -8,7 +8,7 @@ jobs:
   run-image:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Build image
         run: DOCKER_BUILDKIT=1 docker build --tag microk8s-io .
       - name: Run image
@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install node dependencies
         run: yarn install --immutable
@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install dependencies
         run: yarn install --immutable
@@ -49,7 +49,7 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install requirements
         run: |
@@ -74,7 +74,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install dependencies
         run: yarn install --immutable
@@ -89,7 +89,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: woke
         uses: canonical-web-and-design/inclusive-naming@main

diff --git a/.stylelintrc b/.stylelintrc
@@ -1,21 +1,28 @@
 {
-  "extends": "stylelint-config-prettier",
-  "plugins": [
-    "stylelint-order"
-  ],
+  "extends": "stylelint-config-standard-scss",
+  "plugins": ["stylelint-order"],
   "rules": {
     "order/properties-alphabetical-order": true,
-    "at-rule-no-unknown": [ true, {
-      "ignoreAtRules": [
-        "extend",
-        "include",
-        "mixin",
-        "for",
-        "function",
-        "if",
-        "warn",
-        "return"
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "extend",
+          "include",
+          "mixin",
+          "for",
+          "function",
+          "if",
+          "warn",
+          "return"
         ]
-    } ],
+      }
+    ],
+    "no-invalid-position-at-import-rule": null,
+    "scss/at-mixin-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "scss/no-global-function-names": null,
+    "selector-class-pattern": null
   }
 }
diff --git a/Dockerfile b/Dockerfile
@@ -10,7 +10,7 @@ RUN --mount=type=cache,target=/root/.cache/pip pip3 install --user --requirement
 
 # Build stage: Install yarn dependencies
 # ===
-FROM node:12 AS yarn-dependencies
+FROM node:18 AS yarn-dependencies
 WORKDIR /srv
 COPY . .
 RUN --mount=type=cache,target=/usr/local/share/.cache/yarn yarn install --production

diff --git a/package.json b/package.json
@@ -24,30 +24,29 @@
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/global-nav": "2.7.0",
     "autoprefixer": "10.4.13",
-    "babel-loader": "8.3.0",
-    "expose-loader": "1.0.3",
+    "babel-loader": "9.1.2",
+    "expose-loader": "4.0.0",
     "postcss": "8.4.21",
-    "postcss-cli": "8.3.1",
+    "postcss-cli": "10.1.0",
     "sass": "1.57.1",
     "vanilla-framework": "3.9.0",
-    "webpack-cli": "4.10.0"
+    "webpack-cli": "5.0.1"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
     "@babel/preset-env": "7.20.2",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.6.3",
-    "concurrently": "5.3.0",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "7.2.0",
-    "eslint-plugin-prettier": "3.4.1",
-    "jest": "26.6.3",
-    "lint-staged": "10.5.4",
+    "babel-jest": "29.3.1",
+    "concurrently": "7.6.0",
+    "eslint": "8.31.0",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "jest": "29.3.1",
+    "lint-staged": "13.1.0",
     "prettier": "2.8.2",
-    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "20.0.0",
-    "stylelint-order": "4.1.0",
+    "stylelint": "14.16.1",
+    "stylelint-config-standard-scss": "5.0.0",
+    "stylelint-order": "6.0.1",
     "watch-cli": "0.2.3",
     "webpack": "5.75.0"
   }

diff --git a/static/sass/_pattern_tutorials.scss b/static/sass/_pattern_tutorials.scss
@@ -1,31 +1,31 @@
-  .p-tutorials-meter {
-    background-image: url('https://assets.ubuntu.com/v1/69c63bcd-level+of+difficulty.png');
-    background-position-x: -75px;
-    background-position-y: center;
-    background-repeat: no-repeat;
-    display: inline-block;
-    height: $sp-large;
-    margin-left: $sp-xx-small;
-    text-indent: -9999px;
-    width: 74px;
-  }
+.p-tutorials-meter {
+  background-image: url("https://assets.ubuntu.com/v1/69c63bcd-level+of+difficulty.png");
+  background-position-x: -75px;
+  background-position-y: center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: $sp-large;
+  margin-left: $sp-xx-small;
+  text-indent: -9999px;
+  width: 74px;
+}
 
-  .p-tutorials-meter--1 {
-    background-position-x: -60px;
-  }
+.p-tutorials-meter--1 {
+  background-position-x: -60px;
+}
 
-  .p-tutorials-meter--2 {
-    background-position-x: -45px;
-  }
+.p-tutorials-meter--2 {
+  background-position-x: -45px;
+}
 
-  .p-tutorials-meter--3 {
-    background-position-x: -30px;
-  }
+.p-tutorials-meter--3 {
+  background-position-x: -30px;
+}
 
-  .p-tutorials-meter--4 {
-    background-position-x: -15px;
-  }
+.p-tutorials-meter--4 {
+  background-position-x: -15px;
+}
 
-  .p-tutorials-meter--5 {
-    background-position-x: 0;
-  }
+.p-tutorials-meter--5 {
+  background-position-x: 0;
+}
diff --git a/static/sass/_settings.scss b/static/sass/_settings.scss
@@ -1,10 +1,8 @@
 // Colours
 $ubuntu-orange: #e95420;
 $persian-red: #ce2d2d;
-
 $theme-default-nav: dark;
 $color-navigation-active-bar: $ubuntu-orange;
-
 $breakpoint-navigation-threshold: 875px;
 $table-layout-fixed: false;
 

diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -11,7 +11,6 @@
 // import additional styles
 @import "pattern_github_buttons";
 @import "pattern_tutorials";
-
 @include microk8s-github-buttons;
 
 // Custom styles
@@ -62,16 +61,17 @@
 
   background-blend-mode: multiply, multiply, normal;
   background-color: #111;
-  background-image: linear-gradient(
+  background-image:
+    linear-gradient(
       to bottom left,
-      rgba(216, 216, 216, 0.54) 0,
-      rgba(216, 216, 216, 0.54) 49.9%,
+      rgb(216 216 216 / 54%) 0,
+      rgb(216 216 216 / 54%) 49.9%,
       transparent 50%
     ),
     linear-gradient(
       to bottom right,
-      rgba(228, 228, 228, 0.54) 0,
-      rgba(228, 228, 228, 0.54) 49.9%,
+      rgb(228 228 228 / 54%) 0,
+      rgb(228 228 228 / 54%) 49.9%,
       transparent 50%
     ),
     linear-gradient(201deg, #4e4e4e 0%, #333 46%, #111 90%);