build(dev-deps): bump themes dev-deps + anchor-js (#475)

.gitignore

@@ -1 +1,2 @@
 public/
+.idea/

.node-version

@@ -0,0 +1 @@
+19.0.0

Dockerfile

@@ -1,8 +1,7 @@
-FROM node:alpine
+FROM node:19.0.0-alpine
 WORKDIR /src/
 COPY ./themes/conventional-commits /src/
-RUN apk add python make g++
-RUN npm rebuild node-sass
+RUN apk add make
 RUN npm install
 RUN npm run build
 

Dockerfile.dev

@@ -1,7 +1,8 @@
 FROM jguyomard/hugo-builder:latest
-FROM node:latest
+FROM node:19.0.0-alpine
 WORKDIR /src/
 COPY --from=0 /usr/local/bin/hugo /usr/local/bin/hugo
 COPY ./ /src/
+RUN apk add make
 ENTRYPOINT make all-dev
 EXPOSE 1313

Makefile

@@ -1,5 +1,5 @@
 all: compile-assets compile-site
-all-dev: rebuild-node-sass compile-assets-dev serve-site-dev
+all-dev: compile-assets-dev serve-site-dev
 
 compile-site:
 	echo "Generating static website"
@@ -19,8 +19,3 @@ compile-assets-dev:
 	echo "Compiling assets"
 	cd themes/conventional-commits && npm install && npm run start &
 
-rebuild-node-sass:
-	echo "Rebuilding node sass"
-	cd themes/conventional-commits && npm rebuild node-sass
-	echo "node sass rebuilt"
-

themes/conventional-commits/.gitignore

@@ -3,6 +3,7 @@
 
 static/css/index.css
 static/css/style.css
+static/css/style.css.map
 static/css/style.min.css
 static/js/bundle.js
 

themes/conventional-commits/package.json

@@ -5,29 +5,30 @@
   "main": "index.js",
   "scripts": {
     "start": "npm run css & npm run css:watch & npm run js:watch",
-    "css": "node-sass ./static/css/scss/style.scss -o ./static/css",
+    "css": "sass ./static/css/scss/style.scss ./static/css/style.css",
     "css:watch": "npm run css -- -w",
     "css:autoprefixer": "postcss --no-map --use autoprefixer -o ./static/css/style.css ./static/css/style.css",
     "css:nano": "postcss --no-map --use cssnano -o ./static/css/style.css ./static/css/style.css",
     "css:build": "npm run css && npm run css:autoprefixer && npm run css:nano",
-    "js": "webpack --mode=development ./static/js/index.js -o ./static/js/bundle.js",
+    "js": "npm run js:bundle -- --mode=development",
     "js:watch": "npm run js -- --watch",
-    "js:build": "webpack --mode=production ./static/js/index.js -o ./static/js/bundle.js",
+    "js:bundle": "webpack ./static/js/index.js -o ./static/js --output-filename bundle.js",
+    "js:build": "npm run js:bundle -- --mode=production",
     "build": "npm run css:build && npm run js:build"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "anchor-js": "^4.1.1",
-    "github-markdown-css": "^2.10.0"
+    "anchor-js": "4.3.1",
+    "github-markdown-css": "2.10.0"
   },
   "devDependencies": {
-    "autoprefixer": "^9.1.3",
-    "cssnano": "^4.1.10",
-    "node-sass": "^4.13.1",
-    "postcss": "^8.2.10",
-    "postcss-cli": "^6.1.2",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.1.0"
+    "autoprefixer": "10.4.12",
+    "cssnano": "5.1.13",
+    "sass": "1.55.0",
+    "postcss": "8.4.18",
+    "postcss-cli": "10.0.0",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0"
   }
 }

themes/conventional-commits/static/css/scss/components/_dropdown.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "./../abstracts/index";
 
 @keyframes show {
@@ -62,7 +63,7 @@
     border-radius: $dropdown-border-radius;
     box-shadow: $shadow-soft;
     overflow: auto;
-    animation: hide $dropdown-animation-timing/2 ease forwards;
+    animation: hide math.div($dropdown-animation-timing, 2)  ease forwards;
     &:before {
       content: '';
       width: 0;
@@ -71,7 +72,7 @@
       top: 0;
       left: 50%;
       border-style: solid;
-      border-width: 0 $dropdown-arrow-size ($dropdown-arrow-size/2) $dropdown-arrow-size;
+      border-width: 0 $dropdown-arrow-size math.div($dropdown-arrow-size, 2) $dropdown-arrow-size;
       border-color: transparent transparent $dropdown-options-background-color transparent;
       transform: translate(-50%, -100%);
     }

themes/conventional-commits/static/css/scss/layout/_welcome.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "./../abstracts/index";
 
 .welcome {
@@ -52,7 +53,7 @@
 
   &__actions {
     display: flex;
-    margin-top: ($gap-lg * 3)/2;
+    margin-top: math.div($gap-lg * 3, 2);
     flex-wrap: wrap;
   }