feat: Remove deprecated node-sass package, migrated to Sass #2392

Dockerfile

@@ -10,7 +10,6 @@ FROM base as development
 ENV NODE_ENV development
 COPY package.json package-lock.json ./
 RUN npm install
-RUN npm rebuild node-sass
 COPY .babelrc index.js nodemon.json ./
 COPY ./webpack ./webpack
 COPY client ./client
@@ -27,6 +26,5 @@ FROM base as production
 ENV NODE_ENV=production
 COPY package.json package-lock.json index.js ./
 RUN npm install --production
-RUN npm rebuild node-sass
 COPY --from=build $APP_HOME/dist ./dist
 CMD ["npm", "run", "start:prod"]

client/styles/abstracts/_placeholders.scss

@@ -1,8 +1,10 @@
+@use "sass:math";
+
 %toolbar-button {
 	@include themify() {
 		display: inline-block;
-		height: #{44 / $base-font-size}rem;
-		width: #{44 / $base-font-size}rem;
+		height: #{math.div(44, $base-font-size)}rem;
+		width: #{math.div(44, $base-font-size)}rem;
 		text-align: center;
 		border-radius: 100%;
 		cursor: pointer;
@@ -81,7 +83,7 @@
 		cursor: pointer;
 		border: 2px solid getThemifyVariable('button-border-color');
 		border-radius: 2px;
-		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+		padding: #{math.div(10, $base-font-size)}rem #{math.div(30, $base-font-size)}rem;
 		& g, & path {
 			fill: getThemifyVariable('button-color');
 			opacity: 1;
@@ -111,8 +113,8 @@
 		color: getThemifyVariable('primary-text-color');
 		background-color: getThemifyVariable('preferences-button-background-color');
 		padding: 0;
-		margin-bottom: #{28 / $base-font-size}rem;
-		line-height: #{50 / $base-font-size}rem;
+		margin-bottom: #{math.div(28, $base-font-size)}rem;
+		line-height: #{math.div(50, $base-font-size)}rem;
 		& g, & path {
 			fill: getThemifyVariable('modal-button-color');
 		}
@@ -138,12 +140,12 @@
 			color: getThemifyVariable('heavy-text-color');
 		}
 	}
-	font-size: #{12 / $base-font-size}rem;
+	font-size: #{math.div(12, $base-font-size)}rem;
 	cursor: pointer;
 	text-align: left;
 	padding: 0;
-	margin-bottom: #{5 / $base-font-size}rem;
-	padding-right: #{5 / $base-font-size}rem;
+	margin-bottom: #{math.div(5, $base-font-size)}rem;
+	padding-right: #{math.div(5, $base-font-size)}rem;
 	border: 0;
 	list-style-type: none;
 }
@@ -194,19 +196,19 @@
     color: getThemifyVariable('primary-text-color');
 	}
 	text-align: left;
-	width: #{180 / $base-font-size}rem;
+	width: #{math.div(180, $base-font-size)}rem;
 	display: flex;
 	position: absolute;
 	flex-direction: column;
 	top: 95%;
 	height: auto;
 	z-index: 9999;
-	border-radius: #{6 / $base-font-size}rem;
+	border-radius: #{math.div(6, $base-font-size)}rem;
 	& li:first-child {
-		border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
+		border-radius: #{math.div(5, $base-font-size)}rem #{math.div(5, $base-font-size)}rem 0 0;
 	}
 	& li:last-child {
-		border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
+		border-radius: 0 0 #{math.div(5, $base-font-size)}rem #{math.div(5, $base-font-size)}rem;
 	}
 	& li {
 		& button,
@@ -216,9 +218,9 @@
 			}
 			width: 100%;
 			text-align: left;
-			padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
+			padding: #{math.div(8, $base-font-size)}rem #{math.div(16, $base-font-size)}rem;
 		}
-		height: #{35 / $base-font-size}rem;
+		height: #{math.div(35, $base-font-size)}rem;
 		cursor: pointer;
 		display: flex;
 		align-items: center;

client/styles/base/_base.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 * {
 	box-sizing: border-box;
 }
@@ -65,10 +67,10 @@ button {
 
 input,
 textarea {
-	padding: #{5 / $base-font-size}rem;
+	padding: #{math.div(5, $base-font-size)}rem;
 	border: 1px solid;
 	border-radius: 2px;
-	padding: #{10 / $base-font-size}rem;
+	padding: #{math.div(10, $base-font-size)}rem;
 	@include themify() {
 		color: getThemifyVariable("input-text-color");
 		background-color: getThemifyVariable("input-background-color");
@@ -105,23 +107,23 @@ button {
 }
 
 h1 {
-	font-size: #{21 / $base-font-size}em;
+	font-size: #{math.div(21, $base-font-size)}em;
 }
 
 h2 {
-	font-size: #{21 / $base-font-size}em;
+	font-size: #{math.div(21, $base-font-size)}em;
 }
 
 h3 {
 	font-weight: normal;
-	font-size: #{16 / $base-font-size}rem;
+	font-size: #{math.div(16, $base-font-size)}rem;
 }
 h4 {
 	font-weight: normal;
 }
 h6 {
 	font-weight: normal;
-	font-size: #{12 / $base-font-size}rem;
+	font-size: #{math.div(12, $base-font-size)}rem;
 }
 thead {
 	text-align: left;

client/styles/components/_about.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .about__logo {
   @include themify() {
     & path {
@@ -11,11 +13,11 @@
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding-top: #{17 / $base-font-size}rem;
-  padding-right: #{78 / $base-font-size}rem;
-  padding-bottom: #{20 / $base-font-size}rem;
-  padding-left: #{20 / $base-font-size}rem;
-  width: #{720 / $base-font-size}rem;
+  padding-top: #{math.div(17, $base-font-size)}rem;
+  padding-right: #{math.div(78, $base-font-size)}rem;
+  padding-bottom: #{math.div(20, $base-font-size)}rem;
+  padding-left: #{math.div(20, $base-font-size)}rem;
+  width: #{math.div(720, $base-font-size)}rem;
 }
 
 .about__content-column {
@@ -36,18 +38,18 @@
 
   .about__footer {
     flex-direction: column;
-    padding-left: #{20 / $base-font-size}rem;
-    padding-right: #{20 / $base-font-size}rem;
+    padding-left: #{math.div(20, $base-font-size)}rem;
+    padding-right: #{math.div(20, $base-font-size)}rem;
   }
 }
 
 .about__content-column-title {
-  font-size: #{21 / $base-font-size}rem;
-  padding-left: #{17 / $base-font-size}rem;
+  font-size: #{math.div(21, $base-font-size)}rem;
+  padding-left: #{math.div(17, $base-font-size)}rem;
 }
 
 .about__content-column-asterisk {
-  padding-right: #{5 / $base-font-size}rem;
+  padding-right: #{math.div(5, $base-font-size)}rem;
   @include themify() {
     & path {
       fill: getThemifyVariable('logo-color');
@@ -58,20 +60,20 @@
 
 .about__content-column-list {
   @include themify() {
-    padding-top: #{10 / $base-font-size}rem;
-    font-size: #{16 / $base-font-size}rem;
+    padding-top: #{math.div(10, $base-font-size)}rem;
+    font-size: #{math.div(16, $base-font-size)}rem;
   }
 }
 
 .about__version-info {
   @include themify() {
-    padding-top: #{8 / $base-font-size}rem;
-    font-size: #{16 / $base-font-size}rem;
+    padding-top: #{math.div(8, $base-font-size)}rem;
+    font-size: #{math.div(16, $base-font-size)}rem;
     span {
       color: getThemifyVariable('logo-color');
     }
     &:first-child {
-      padding-top: #{30 /$base-font-size}rem;
+      padding-top: #{math.div(30, $base-font-size)}rem;
     }
   }
   // span {
@@ -84,13 +86,13 @@
 .about__footer {
   display: flex;
   justify-content: space-between;
-  padding-top: #{18 / $base-font-size}rem;
-  padding-right: #{20 / $base-font-size}rem;
-  padding-bottom: #{21 / $base-font-size}rem;
-  padding-left: #{20 / $base-font-size}rem;
+  padding-top: #{math.div(18, $base-font-size)}rem;
+  padding-right: #{math.div(20, $base-font-size)}rem;
+  padding-bottom: #{math.div(21, $base-font-size)}rem;
+  padding-left: #{math.div(20, $base-font-size)}rem;
   width: 100%;
 }
 
 .about__footer-list {
-  padding-top: #{12 / $base-font-size}rem;
+  padding-top: #{math.div(12, $base-font-size)}rem;
 }

client/styles/components/_account.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .account-settings__container {
   @include themify() {
     color: getThemifyVariable('primary-text-color');
@@ -13,18 +15,18 @@
 }
 
 .account-settings {
-  max-width: #{700 / $base-font-size}rem;
+  max-width: #{math.div(700, $base-font-size)}rem;
   align-self: center;
-  padding: 0 #{10 / $base-font-size}rem;
+  padding: 0 #{math.div(10, $base-font-size)}rem;
   margin: 0 auto;
 }
 
 .account__tabs {
-  padding-top: #{20 / $base-font-size}rem;
+  padding-top: #{math.div(20, $base-font-size)}rem;
 }
 
 .account__social-text {
-  padding-bottom: #{15 / $base-font-size}rem;
+  padding-bottom: #{math.div(15, $base-font-size)}rem;
 }
 
 
@@ -33,7 +35,7 @@
   @media (max-width: 770px) {
     flex-direction: column;
     align-items: center;
-    gap: #{15 / $base-font-size}rem;
+    gap: #{math.div(15, $base-font-size)}rem;
 
     button, a {
       width: 100% !important;
@@ -43,5 +45,5 @@
 }
 
 .account__social-stack > * {
-  margin-right: #{15 / $base-font-size}rem;
+  margin-right: #{math.div(15, $base-font-size)}rem;
 }

client/styles/components/_api-key.scss

@@ -1,14 +1,16 @@
+@use "sass:math";
+
 .api-key-form__summary {
-  padding-top: #{25 / $base-font-size}rem;
+  padding-top: #{math.div(25, $base-font-size)}rem;
 }
 
 .api-key-form__section {
-  padding-bottom: #{15 / $base-font-size}rem;
+  padding-bottom: #{math.div(15, $base-font-size)}rem;
 }
 
 .api-key-form__title {
-  padding: #{15 / $base-font-size}rem 0;
-  font-size: #{21 / $base-font-size}rem;
+  padding: #{math.div(15, $base-font-size)}rem 0;
+  font-size: #{math.div(21, $base-font-size)}rem;
   font-weight: bold;
 }
 
@@ -27,11 +29,11 @@
   }
 
   th {
-    padding: #{5 / $base-font-size}rem;
+    padding: #{math.div(5, $base-font-size)}rem;
   }
 
   td {
-    padding: #{15 / $base-font-size}rem #{5 / $base-font-size}rem;
+    padding: #{math.div(15, $base-font-size)}rem #{math.div(5, $base-font-size)}rem;
   }
 
   tbody tr:nth-child(odd) {
@@ -46,8 +48,8 @@
 }
 
 .api-key-list__delete-button {
-    width:#{20 / $base-font-size}rem;
-    height:#{20 / $base-font-size}rem;
+    width:#{math.div(20, $base-font-size)}rem;
+    height:#{math.div(20, $base-font-size)}rem;
 
     text-align: center;
 
@@ -76,11 +78,11 @@
 }
 
 .api-key-form__new-token__title {
-  margin-bottom: #{10 / $base-font-size}rem;
-  font-size: #{18 / $base-font-size}rem;
+  margin-bottom: #{math.div(10, $base-font-size)}rem;
+  font-size: #{math.div(18, $base-font-size)}rem;
   font-weight: bold;
 }
 
 .api-key-form__new-token__info {
-  padding: #{10 / $base-font-size}rem 0;
+  padding: #{math.div(10, $base-font-size)}rem 0;
 }