chore: use sass instead of node-sass

README.md

@@ -267,7 +267,7 @@ If preferable to use manual deployment, you can use [gh-pages](https://pages.git
 
     **A.** Just as installing, except the `npm` command you'd run would be `npm uninstall` (shortened to `npm un`). e.g.: `lerna exec --scope=@deriv/translations -- npm un i18next`.
 
-3. How do I run `npm ci` or equivalent (to add dependencies based on `package-lock.json`?
+3. How do I run `npm ci` or equivalent to add dependencies based on `package-lock.json`?
 
     **A.** You have two options:
 
@@ -280,15 +280,7 @@ If preferable to use manual deployment, you can use [gh-pages](https://pages.git
 
     If you face this issue, simply run `sudo chown -R $(whoami) .` from the root of the project.
 
-5. My build(s) fail and I can see it related to Node Sass (`node-sass`), what do I do?
-
-    **A.** This issue happens when your `node-sass` has its `binding.node` set to a version of node different from the current projects' one. Please try the following in order:
-
-    1. First run `npx lerna exec -- npm rebuild node-sass` and try building your packages again.
-    2. If that doesn't work, try `npm cache clean --force`, followed by `npm run clean`, and then `npm run bootstrap`.
-    3. And finally, if that doesn't work then you can read deeper into this [StackOverflow post](https://stackoverflow.com/questions/37986800).
-
-6. How can I regenerate `package-lock.json` file?
+5. How can I regenerate `package-lock.json` file?
 
     We have added `bootstrap:dev` to scripts. If you are updating or adding a package and you want to regenerate `package-lock.json` file, you should run this command
     `npm run bootstrap:dev`

packages/account/package.json

@@ -74,7 +74,7 @@
         "eslint-plugin-react-hooks": "^4.2.0",
         "history": "^5.0.0",
         "mini-css-extract-plugin": "^1.3.4",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/appstore/package.json

@@ -72,7 +72,7 @@
         "fork-ts-checker-webpack-plugin": "^6.5.0",
         "lint-staged": "^10.4.0",
         "mini-css-extract-plugin": "^1.3.4",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/bot-web-ui/package.json

@@ -56,7 +56,7 @@
         "lint-staged": "^10.4.0",
         "loader-utils": "^1.1.0",
         "mini-css-extract-plugin": "^1.3.4",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "raw-loader": "^4.0.0",
         "sass-loader": "^12.6.0",
         "sass-resources-loader": "^2.1.1",

packages/cashier/package.json

@@ -88,7 +88,7 @@
         "file-loader": "^6.2.0",
         "history": "^5.0.0",
         "mini-css-extract-plugin": "^1.3.4",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/cfd/package.json

@@ -63,7 +63,7 @@
         "jsdom-global": "^2.1.1",
         "mini-css-extract-plugin": "^1.3.4",
         "mock-local-storage": "^1.1.8",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/components/package.json

@@ -57,7 +57,7 @@
         "eslint-plugin-react": "^7.22.0",
         "eslint-plugin-react-hooks": "^4.2.0",
         "lint-staged": "^10.4.0",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "sass-loader": "^12.6.0",
         "sass-resources-loader": "^2.1.1",
         "style-loader": "^1.2.1",

packages/components/src/components/input-field/input-field.scss

@@ -60,7 +60,7 @@ button.dc-input-wrapper {
             cursor: pointer;
 
             & ~ .dc-input-wrapper__input {
-                @extend .input:hover;
+                @extend .input-hover;
             }
         }
         &:disabled:hover {
@@ -158,7 +158,8 @@ button.dc-input-wrapper {
     &::placeholder {
         border-color: var(--border-normal);
     }
-    &:hover {
+    &:hover,
+    &-hover {
         border-color: var(--border-hover);
     }
     &:active,

packages/components/src/components/input/input.scss

@@ -240,7 +240,9 @@
         max-width: calc(100% - 1.4rem);
     }
     &:not(&--no-placeholder) {
-        &__label {
+        $parent: &;
+
+        #{$parent}__label {
             color: var(--text-general);
             transition: 0.25s ease all;
             transform: translateZ(0);

packages/components/src/components/mobile-drawer/mobile-drawer.scss

@@ -80,7 +80,7 @@
             align-items: center;
             cursor: pointer;
             padding: 0.6rem 1.2rem;
-            @extend %inline-icon.white;
+            @extend %inline-icon-white;
             height: inherit;
             width: 40px;
         }

packages/components/src/components/vertical-tab/vertical-tab.scss

@@ -36,6 +36,8 @@ $MIN_HEIGHT_FLOATING: calc(
         height: 100%;
         width: 100%;
         display: flex;
+        flex-flow: column nowrap;
+        flex-grow: 1;
     }
     &__content-inner {
         position: absolute;
@@ -224,10 +226,6 @@ $MIN_HEIGHT_FLOATING: calc(
         background-color: var(--general-main-1);
 
         grid-area: form-content;
-        &-container {
-            flex-flow: column nowrap;
-            flex-grow: 1;
-        }
 
         &-side-note {
             min-width: 25.6rem;

packages/core/package.json

@@ -62,7 +62,7 @@
         "lint-staged": "^10.4.0",
         "mini-css-extract-plugin": "^1.3.4",
         "mock-local-storage": "^1.1.8",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/core/src/sass/app/_common/components/account-settings-toggle.scss

@@ -6,7 +6,7 @@
     }
     &:hover {
         svg {
-            @extend %inline-icon.active;
+            @extend %inline-icon-active;
         }
     }
 }

packages/core/src/sass/app/_common/layout/footer.scss

@@ -156,7 +156,7 @@
             background: var(--text-prominent);
         }
         .ic-settings__icon {
-            @extend %inline-icon.active;
+            @extend %inline-icon-active;
             pointer-events: none;
         }
     }

packages/core/src/sass/app/_common/layout/header.scss

@@ -326,7 +326,7 @@
                 }
             }
             .header__icon {
-                @extend %inline-icon.active;
+                @extend %inline-icon-active;
             }
         }
     }

packages/core/src/sass/app/modules/notifications-dialog.scss

@@ -39,7 +39,7 @@
         }
         &:hover {
             .notifications-toggle__icon {
-                @extend %inline-icon.active;
+                @extend %inline-icon-active;
             }
         }
     }

packages/p2p/package.json

@@ -89,7 +89,7 @@
         "eslint-plugin-react-hooks": "^4.2.0",
         "lint-staged": "^10.4.0",
         "mini-css-extract-plugin": "^1.3.4",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/reports/package.json

@@ -57,7 +57,7 @@
         "jsdom-global": "^2.1.1",
         "mini-css-extract-plugin": "^1.3.4",
         "mock-local-storage": "^1.1.8",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/reports/src/sass/app/modules/portfolio.scss

@@ -79,7 +79,7 @@
         width: 100%;
     }
     &__icon {
-        @extend %inline-icon.disabled;
+        @extend %inline-icon-disabled;
         height: 4.8em;
         width: 4.8em;
         margin-bottom: 1.6em;

packages/shared/src/styles/inline-icons.scss

@@ -4,26 +4,31 @@
 
     e.g. style icon on parent hover:
         a:hover .inline-icon {
-            @extend %inline-icon.active;
+            @extend %inline-icon-active;
         }
 */
 
 %inline-icon {
     @include colorIcon(var(--text-general), none);
 
-    &.active {
+    &.active,
+    &-active {
         @include colorIcon(var(--text-prominent), none);
     }
-    &.disabled {
+    &.disabled,
+    &-disabled {
         @include colorIcon(var(--text-disabled), none);
     }
-    &.white {
+    &.white,
+    &-white {
         @include colorIcon(var(--text-prominent));
     }
-    &.border_hover_color {
+    &.border_hover_color,
+    &-border_hover_color {
         @include colorIcon(var(--text-prominent));
     }
-    &.secondary {
+    &.secondary,
+    &-secondary {
         @include colorIcon(var(--text-less-prominent));
     }
 }

packages/trader/package.json

@@ -64,7 +64,7 @@
         "jsdom-global": "^2.1.1",
         "mini-css-extract-plugin": "^1.3.4",
         "mock-local-storage": "^1.1.8",
-        "node-sass": "^7.0.1",
+        "sass": "^1.62.1",
         "postcss-loader": "^6.2.1",
         "postcss-preset-env": "^7.4.3",
         "postcss-scss": "^4.0.6",

packages/trader/src/sass/app/_common/components/purchase-button.scss

@@ -73,7 +73,7 @@
     }
 
     &__icon_wrapper {
-        @extend %inline-icon.white;
+        @extend %inline-icon-white;
         /* postcss-bem-linter: ignore */
         .color1-fill {
             fill: var(--text-colored-background);

packages/trader/src/sass/app/modules/portfolio.scss

@@ -79,7 +79,7 @@
         width: 100%;
     }
     &__icon {
-        @extend %inline-icon.disabled;
+        @extend %inline-icon-disabled;
         height: 4.8em;
         width: 4.8em;
         margin-bottom: 1.6em;

packages/trader/src/sass/app/modules/trading.scss

@@ -898,7 +898,7 @@
     //    &-icon {
     //        width: 64px;
     //        height: 64px;
-    //        @extend %inline-icon.white;
+    //        @extend %inline-icon-white;
     //    }
     //    &-button {
     //        height: 32px;