Merge pull request #2429 from luckyklyist/luckyklyist/node-sass_migrate

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

Author: lindapaiste

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;