replaced node-sass with sass

package.json

@@ -24,7 +24,6 @@
     "mobx-persist-store": "^1.0.4",
     "mobx-react-lite": "^3.2.3",
     "next": "^12.0.7",
-    "node-sass": "^4.14.1",
     "photoswipe": "^4.1.3",
     "raleway-cyrillic": "^4.0.2",
     "ramda": "^0.26.1",
@@ -39,6 +38,7 @@
     "react-router-dom": "^5.1.2",
     "react-sortable-hoc": "^2.0.0",
     "react-sticky-box": "^0.9.3",
+    "sass": "^1.49.0",
     "swiper": "^6.8.4",
     "swr": "^1.0.1",
     "throttle-debounce": "^2.1.0",
@@ -76,7 +76,6 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
     "@next/bundle-analyzer": "^12.0.8",
     "@next/eslint-plugin-next": "^12.0.8",
     "@types/classnames": "^2.2.7",
@@ -87,6 +86,7 @@
     "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
+    "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",

src/components/bars/SubmitBar/styles.module.scss

@@ -4,7 +4,7 @@
   position: fixed;
   bottom: 0;
   left: 50%;
-  transform: translate($content_width / 2 + $gap, 0);
+  transform: translate($content_width * 0.5 + $gap, 0);
   z-index: 14;
 
   @media (max-width: $content_width + ($bar_height + $gap) * 2) {
@@ -17,7 +17,7 @@
   background: $red_gradient;
   width: $bar_height;
   height: $bar_height;
-  border-radius: $bar_height / 2;
+  border-radius: $bar_height * 0.5;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -1,7 +1,7 @@
 @import "src/styles/variables";
 
 .wrap {
-  padding: $gap / 2 0;
+  padding: $gap * 0.5 0;
   border-bottom: 1px solid #333333;
 
   &:last-child {

src/components/comment/CommentContent/styles.module.scss

@@ -101,7 +101,7 @@
 }
 
 .block_text {
-  padding: $gap / 2 0;
+  padding: $gap * 0.5 0;
 }
 
 .date {

src/components/comment/CommentEmbedBlock/styles.module.scss

@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin: $gap / 4 0 !important;
+  margin: $gap * 0.25 0 !important;
 
   &:last-child {
     margin-bottom: 0 !important;
@@ -58,7 +58,7 @@
 }
 
 .preview {
-  padding: 0 $gap / 2 0;
+  padding: 0 $gap * 0.5 0;
   position: absolute;
   top: 0;
   left: 0;

src/components/comment/CommentForm/styles.module.scss

@@ -24,20 +24,20 @@
   background: transparentize(black, 0.8);
   border-radius: 0 0 $radius $radius;
   flex-wrap: wrap;
-  padding: $gap / 4;
+  padding: $gap * 0.25;
 }
 
 .button_column {
-  padding: $gap / 4;
+  padding: $gap * 0.25;
   display: flex;
   flex-direction: row;
 }
 
 .uploads {
-  padding: ($gap / 2);
+  padding: ($gap * 0.5);
   display: grid;
-  grid-column-gap: $gap / 2;
+  grid-column-gap: $gap * 0.5;
-  grid-row-gap: $gap / 2;
+  grid-row-gap: $gap * 0.5;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 }
 

src/components/containers/Group/styles.module.scss

@@ -12,7 +12,7 @@
     flex-direction: column;
 
     & > * {
-      margin: $gap/2 0;
+      margin: $gap*0.5 0;
 
       &:first-child { margin-top: 0; }
       &:last-child { margin-bottom: 0; }
@@ -32,7 +32,7 @@
     }
 
     & > * {
-      margin: 0 $gap / 2;
+      margin: 0 $gap * 0.5;
 
       &:first-child { margin-left: 0; }
       &:last-child { margin-right: 0; }

src/components/containers/TagField/styles.module.scss

@@ -8,7 +8,7 @@
   flex-wrap: wrap;
 
   &> * {
-    margin: $gap / 2;
+    margin: $gap * 0.5;
   }
 }
 

src/components/dialogs/Tabs/styles.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 0 $gap / 2;
+  padding: 0 $gap * 0.5;
 }
 
 .tab {

src/components/editors/EditorActionsPanel/styles.module.scss

@@ -15,7 +15,7 @@
   touch-action: none;
 
   & > * {
-    margin: 0 $gap / 2;
+    margin: 0 $gap * 0.5;
     pointer-events: all;
     touch-action: auto;
 

src/components/editors/EditorUploadCoverButton/styles.module.scss

@@ -4,7 +4,7 @@
   @include outer_shadow();
 
   height: $upload_button_height;
-  border-radius: ($upload_button_height / 2) !important;
+  border-radius: ($upload_button_height * 0.5) !important;
   position: relative;
   border-radius: $radius;
   cursor: pointer;
@@ -49,7 +49,7 @@
   top: 0;
   left: 0;
   z-index: 1;
-  border-radius: ($upload_button_height / 2) !important;
+  border-radius: ($upload_button_height * 0.5) !important;
   background: 50% 50% no-repeat;
   background-size: cover;
   will-change: transform;

src/components/flow/FlowRecentItem/styles.module.scss

@@ -70,7 +70,7 @@
 
   svg {
     fill: currentColor;
-    margin-right: $gap / 2;
+    margin-right: $gap * 0.5;
     margin-top: 1px;
   }
 }

src/components/input/Button/styles.module.scss

@@ -144,7 +144,7 @@
   height: 20px;
   font: $font_12_semibold;
   padding: 0 15px;
-  border-radius: $radius / 2;
+  border-radius: $radius * 0.5;
 
   &:global(.round) {
     border-radius: 10px;
@@ -153,7 +153,7 @@
 
 .mini {
   height: 26px;
-  border-radius: $radius / 2;
+  border-radius: $radius * 0.5;
 
   &:global(.round) {
     border-radius: 14px;
@@ -204,13 +204,13 @@
 }
 
 .icon_left {
-  margin-right: $gap / 2 !important;
+  margin-right: $gap * 0.5 !important;
   width: 20px;
   height: 20px;
 }
 
 .icon_right {
-  margin-left: $gap / 2 !important;
+  margin-left: $gap * 0.5 !important;
   width: 20px;
   height: 20px;
 }

src/components/input/InputWrapper/styles.module.scss

@@ -34,20 +34,20 @@
 .error {
   position: absolute;
   font: $font_12_semibold;
-  padding: 0 $gap / 2;
+  padding: 0 $gap * 0.5;
   border-radius: 4px;
   color: white;
   background-color: $red;
   bottom: 0;
-  right: $gap / 2;
+  right: $gap * 0.5;
   transform: translate(0, 50%);
 }
 
 .title {
   position: absolute;
   top: $gap;
-  left: $gap / 2;
+  left: $gap * 0.5;
-  padding: 0 $gap / 2;
+  padding: 0 $gap * 0.5;
   transform: translate(0, 0) scale(1);
   font: $input_font;
   transition: transform 0.25s;

src/components/lab/LabBanner/styles.module.scss

@@ -3,7 +3,7 @@
 .wrap {
   @include outer_shadow;
 
-  background: url('../../../sprites/boris_lab.svg') 50% 50% no-repeat;
+  background: url('/images/boris_lab.svg') 50% 50% no-repeat;
   background-size: cover;
   display: flex;
   align-items: flex-start;

src/components/lab/LabDescription/styles.module.scss

@@ -1,7 +1,7 @@
 @import "src/styles/variables.scss";
 
 .wrap {
-  padding: $lab_gap / 2 $lab_gap 0;
+  padding: $lab_gap * 0.5 $lab_gap 0;
   line-height: 1.3em;
 
   @include tablet {
@@ -9,6 +9,6 @@
     line-height: 1.3em;
     font: $font_16_regular;
     padding: 0 $lab_gap_mobile;
-    margin: $lab_gap_mobile / 2 0;
+    margin: $lab_gap_mobile * 0.5 0;
   }
 }

src/components/lab/LabHead/styles.module.scss

@@ -5,7 +5,7 @@
 
   border-radius: $radius;
   background-color: $content_bg;
-  padding: $gap / 2;
+  padding: $gap * 0.5;
 }
 
 .group {
@@ -18,6 +18,6 @@
   }
 
   & > * {
-    margin: $gap / 2;
+    margin: $gap * 0.5;
   }
 }

src/components/lab/LabHeadItem/styles.module.scss

@@ -2,7 +2,7 @@
 
 .item {
   flex: 0 0 auto;
-  padding: $gap / 2;
+  padding: $gap * 0.5;
   fill: currentColor;
   color: darken(white, 50%);
   transition: color 0.25s;

src/components/lab/LabHero/styles.module.scss

@@ -28,6 +28,6 @@
 }
 
 .content {
-  padding: $gap / 2 0;
+  padding: $gap * 0.5 0;
   text-decoration: none;
 }

src/components/lab/LabTags/styles.module.scss

@@ -5,6 +5,6 @@
   flex-wrap: wrap;
 
   & > * {
-    margin: $gap / 2;
+    margin: $gap * 0.5;
   }
 }

src/components/main/MainPreloader/styles.module.scss

@@ -58,5 +58,3 @@
     }
   }
 }
-
-#preload_shade>

src/components/main/SidePane/styles.module.scss

@@ -19,7 +19,7 @@
   box-sizing: border-box;
 
   &:global(.logo) {
-    height: (54px * 1.5) + $gap / 2;
+    height: (54px * 1.5) + $gap * 0.5;
     background: $red_gradient;
     background-size: 140px;
     font-weight: 600;

src/components/node/NodeRelated/styles.module.scss

@@ -30,7 +30,7 @@
 }
 
 .text {
-  margin-left: $gap / 2;
+  margin-left: $gap * 0.5;
 }
 
 .placeholder {

src/components/node/NodeRelatedItem/styles.module.scss

@@ -47,7 +47,7 @@ div.thumb {
 
 .title {
   text-transform: uppercase;
-  padding: $gap / 2;
+  padding: $gap * 0.5;
   box-sizing: border-box;
   align-items: flex-start;
   justify-content: flex-start;

src/components/profile/Message/styles.module.scss

@@ -95,6 +95,6 @@ $outgoing_color: $comment_bg;
 .deleted {
   background: mix($red, $content_bg, 50%);
   border-radius: $radius $radius $radius 0;
-  padding: $gap / 2;
+  padding: $gap * 0.5;
   z-index: 2;
 }

src/components/profile/ProfileSettings/styles.module.scss

@@ -36,7 +36,7 @@ $pad_usual: mix(white, $content_bg, 10%);
       border-radius: 4px;
       font: $font_10_semibold;
       line-height: 12px;
-      padding: 2px $gap / 2;
+      padding: 2px $gap * 0.5;
       text-transform: uppercase;
     }
   }

src/components/tags/TagAutocomplete/styles.module.scss

@@ -27,6 +27,6 @@ $row_height: 24px;
 
 .scroll {
   overflow: hidden;
-  padding: 0 0 $gap / 2;
+  padding: 0 0 $gap * 0.5;
   border-radius: 4px;
 }

src/components/tags/TagWrapper/styles.module.scss

@@ -9,7 +9,7 @@ $big: 1.2;
   cursor: default;
   height: $tag_height;
   background: $tag_bg;
-  border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2);
+  border-radius: ($tag_height * 0.5) 3px 3px ($tag_height * 0.5);
   font: $font_14_semibold;
   align-self: flex-start;
   position: relative;
@@ -28,7 +28,7 @@ $big: 1.2;
   &:global(.big) {
     height: $tag_height * $big;
     font: $font_16_semibold;
-    border-radius: ($tag_height * $big / 2) 3px 3px ($tag_height * $big / 2);
+    border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
 
     .hole {
       width: $tag_height * $big;

src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss

@@ -5,7 +5,7 @@
 }
 
 .check {
-  padding: $gap 0 0 $gap / 2;
+  padding: $gap 0 0 $gap * 0.5;
   font: $font_12_medium;
   display: flex;
   align-items: center;

src/containers/lab/LabGrid/styles.module.scss

@@ -6,15 +6,15 @@ div.wrap {
   margin-right: 0;
 
   @include tablet {
-    padding: 0 $gap / 2;
+    padding: 0 $gap * 0.5;
   }
 }
 
 .column {
   background-clip: padding-box;
   box-sizing: border-box;
-  padding: 0 $gap / 2;
+  padding: 0 $gap * 0.5;
-  margin-top: -$gap / 2;
+  margin-top: -$gap * 0.5;
 
   @include tablet {
     padding: 0;

src/containers/lab/LabStats/styles.module.scss

@@ -5,7 +5,7 @@
 }
 
 .tags.tags {
-  margin: 0 -$gap / 2;
+  margin: 0 -$gap * 0.5;
 }
 
 .heroes {
@@ -21,5 +21,5 @@
 }
 
 .updates {
-  padding: 0 $gap / 4 $gap * 2;
+  padding: 0 $gap * 0.25 $gap * 2;
 }

src/containers/profile/ProfileAccounts/styles.module.scss

@@ -11,7 +11,7 @@
 .buttons {
   background: transparentize(black, 0.8);
   border-radius: $radius;
-  padding: $gap / 2;
+  padding: $gap * 0.5;
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -64,7 +64,7 @@
 
   &__name {
     font: $font_16_semibold;
-    padding-left: $gap / 2;
+    padding-left: $gap * 0.5;
   }
 
   &__drop {
@@ -82,6 +82,6 @@
 }
 
 .info {
-  padding: $gap $gap / 2;
+  padding: $gap $gap * 0.5;
   font: $font_14_regular;
 }

src/containers/profile/ProfileMessages/styles.module.scss

@@ -8,7 +8,7 @@
   overflow: auto;
 
   & > * {
-    margin: $gap / 2 0;
+    margin: $gap * 0.5 0;
 
     &:last-child {
       margin-top: 0;

src/layouts/FlowLayout/styles.module.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "src/styles/variables";
 
 .wrap {
@@ -7,7 +9,7 @@
   flex-direction: column;
 }
 
-$cols: $content_width / $cell;
+$cols: math.div($content_width, $cell);
 
 .container {
   @include container;

src/layouts/LabLayout/styles.module.scss

@@ -3,12 +3,12 @@
 .wrap {
   display: grid;
   grid-template-columns: 3fr 1fr;
-  column-gap: $gap/2;
+  column-gap: $gap*0.5;
 
   @include tablet {
     grid-template-columns: 1fr;
     grid-auto-flow: row;
-    padding: 0 $gap / 2;
+    padding: 0 $gap * 0.5;
   }
 }
 
@@ -40,15 +40,15 @@
 
 .content {
   min-width: 0;
-  margin-left: -$gap / 2;
+  margin-left: -$gap * 0.5;
 
   @include tablet {
     margin-left: 0;
-    padding-bottom: $gap / 2;
+    padding-bottom: $gap * 0.5;
   }
 }
 
 .head {
-  padding: 0 $gap / 2;
+  padding: 0 $gap * 0.5;
   display: none;
 }

src/styles/_mixins.scss

@@ -1,4 +1,6 @@
 
+@use "sass:math";
+
 @mixin outer_shadow() {
   box-shadow:
           inset transparentize(white, 0.95) 1px 1px,
@@ -96,7 +98,7 @@
     @content;
 
     & > * {
-      margin: $gap/2 0 !important;
+      margin: $gap*0.5 0 !important;
 
       &:first-child {
         margin-top: 0 !important;
@@ -115,7 +117,7 @@
 }
 
 @mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
-  background: transparentize($color, $opacity / 1.5);
+  background: transparentize($color, math.div($opacity, 1.5));
   backdrop-filter: blur($radius);
   -webkit-backdrop-filter: blur($radius);
 
@@ -172,7 +174,7 @@
 @mixin editor_round_button {
   width: $upload_button_height;
   height: $upload_button_height;
-  border-radius: ($upload_button_height / 2) !important;
+  border-radius: ($upload_button_height * 0.5) !important;
   flex: 0 0 $upload_button_height;
   position: relative;
   border-radius: $radius;

src/styles/common/markdown.module.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../variables";
 
 $margin: 1em;
@@ -5,7 +7,7 @@ $margin: 1em;
 .wrapper {
   blockquote {
     border-left: 4px solid $wisegreen;
-    padding: $margin / 2 0;
+    padding: $margin * 0.5 0;
     margin-bottom: $margin;
     color: $wisegreen;
     font-size: 0.9em;
@@ -55,10 +57,10 @@ $margin: 1em;
 
   h5, h4, h3, h2, h1 {
     line-height: 1.2em;
-    margin: $margin * 1.5 0 $margin / 2;
+    margin: $margin * 1.5 0 $margin * 0.5;
 
     &:first-child {
-      margin-top: $margin / 4;
+      margin-top: $margin * 0.25;
     }
   }
 
@@ -68,7 +70,7 @@ $margin: 1em;
     margin-bottom: $margin;
 
     li {
-      margin: $margin/3 0;
+      margin: math.div($margin, 3) 0;
     }
   }