Merge pull request #37 from deriv-com/shafin/BOT/chore-fix-style-impo…

…rt-issues Shafin/chore: change scss files to only import variables mixins when necessary
deriv-com · Jul 25, 2024 · 41266e8 · 41266e8
2 parents 54160e5 + a89cbb1
commit 41266e8
Show file tree

Hide file tree

Showing 63 changed files with 1,700 additions and 718 deletions.
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
@@ -8,6 +8,7 @@ module.exports = {
         'color-no-invalid-hex': true,
         'declaration-block-no-duplicate-properties': [true, { ignore: ['consecutive-duplicates'] }],
         'declaration-block-no-shorthand-property-overrides': true,
+        'declaration-block-no-redundant-longhand-properties': null,
         'font-family-name-quotes': 'always-unless-keyword',
         'function-calc-no-unspaced-operator': true,
         'function-name-case': 'lower',
@@ -16,13 +17,15 @@ module.exports = {
         'no-invalid-double-slash-comments': true,
         'number-max-precision': 3,
         'no-descending-specificity': null,
+        'no-invalid-position-at-import-rule': null,
         'selector-pseudo-class-no-unknown': [
             true,
             {
                 ignorePseudoClasses: ['export'],
             },
         ],
         'selector-class-pattern': null,
+        'selector-id-pattern': null,
         'selector-pseudo-element-colon-notation': 'single',
         'selector-pseudo-element-no-unknown': true,
         'selector-type-case': 'lower',
@@ -32,6 +35,9 @@ module.exports = {
         'time-min-milliseconds': 100,
         'unit-allowed-list': ['fr', 'px', 'em', 'rem', '%', 'svh', 'vw', 'vh', 'deg', 'ms', 's', 'dpcm'],
         'value-keyword-case': 'lower',
+        'scss/at-extend-no-missing-placeholder': null,
+        'scss/percent-placeholder-pattern': null,
+        'custom-property-pattern': null,
     },
     extends: ['stylelint-config-standard-scss'],
     ignoreFiles: ['packages/*/dist/**/*.css'],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
         "@commitlint/config-conventional": "^17.1.0",
         "@deriv-com/eslint-config-deriv": "^2.1.0-beta.3",
         "@jest/globals": "^29.7.0",
-        "@rsbuild/core": "^1.0.1-beta.0",
+        "@rsbuild/core": "^1.0.1-beta.1",
         "@rsbuild/plugin-react": "^1.0.1-beta.1",
         "@rsbuild/plugin-sass": "^1.0.1-beta.1",
         "@testing-library/dom": "^10.3.1",

diff --git a/rsbuild.config.ts b/rsbuild.config.ts
@@ -9,14 +9,12 @@ export default defineConfig({
         pluginSass({
             sassLoaderOptions: {
                 sourceMap: true,
-                additionalData: `
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/constants.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/mixins.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/fonts.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/inline-icons.scss')}";
-                    @import "${path.resolve(__dirname, 'src/components/shared/styles/devices.scss')}";
-                `,
+                sassOptions: {
+                    includePaths: [path.resolve(__dirname, 'src')],
+                },
+                // additionalData: `@use "${path.resolve(__dirname, 'src/components/shared/styles')}" as *;`,
             },
+            exclude: /node_modules/,
         }),
         pluginReact(),
     ],
@@ -55,6 +53,10 @@ export default defineConfig({
     },
     server: {
         port: 8443,
+        compress: true,
+    },
+    dev: {
+        hmr: true,
     },
     tools: {
         rspack: {

diff --git a/src/components/bot-notification-messages/bot-notification-messages.scss b/src/components/bot-notification-messages/bot-notification-messages.scss
@@ -1,3 +1,5 @@
+@use './../shared/styles/mixins' as *;
+
 .notifications-container {
     position: absolute;
     top: 6.5rem;
@@ -10,6 +12,7 @@
             transform 0.3s ease,
             opacity 0.25s linear;
     }
+
     &__dashboard {
         .notification-messages {
             transform: translate3d(calc(-42.7rem), 0, 0);
@@ -19,6 +22,7 @@
             }
         }
     }
+
     &--panel-open {
         .notification-messages {
             transform: translate3d(calc(-36.5rem), 0, 0);

diff --git a/src/components/bot-notification/bot-notification.scss b/src/components/bot-notification/bot-notification.scss
@@ -1,3 +1,5 @@
+@use 'components/shared/styles/devices' as *;
+
 .Toastify {
     &__toast {
         background: var(--icon-black-plus);

diff --git a/src/components/contract-result-overlay/contract-result-overlay.scss b/src/components/contract-result-overlay/contract-result-overlay.scss
@@ -1,7 +1,11 @@
+@use 'components/shared/styles/constants' as *;
+@use 'components/shared/styles/mixins' as *;
+
 @keyframes animate-fade-in {
     0% {
         opacity: 0;
     }
+
     100% {
         opacity: 1;
     }
@@ -22,6 +26,7 @@
     z-index: 2;
     background-color: var(--overlay-inside-dialog);
     animation: animate-fade-in 0.3s;
+
     @include flex-center;
 
     &:hover {
@@ -31,21 +36,25 @@
             opacity: 0;
         }
     }
+
     &-caption {
         display: flex;
         align-items: center;
         transition: opacity 0.25s linear;
     }
+
     &-icon {
         margin-left: 10px;
     }
+
     &--won {
         background-image: $COLOR_LIGHT_GREEN_GRADIENT; // TODO: Update when gradients are added.
 
         > #{$contract_result}-caption {
             color: var(--text-profit-success);
         }
     }
+
     &--lost {
         background-image: $COLOR_LIGHT_RED_GRADIENT; // TODO: Update when gradients are added.
 

diff --git a/src/components/flyout/flyout.scss b/src/components/flyout/flyout.scss
@@ -1,7 +1,10 @@
+@use 'components/shared/styles/constants' as *;
+
 @keyframes fade-in {
     0% {
         opacity: 0;
     }
+
     100% {
         opacity: 1;
     }
@@ -33,13 +36,15 @@
             animation: fade-in 0.3s;
         }
     }
+
     &__content {
         overflow: auto;
         height: calc(100% - 64px);
 
         .dc-themed-scrollbars {
             padding: 5px 25px;
         }
+
         &-disclaimer {
             display: flex;
             justify-content: space-around;
@@ -54,42 +59,49 @@
                 color: $color-black-1;
                 width: 324px;
             }
+
             &-icon {
                 padding-top: 0.8rem;
             }
         }
     }
+
     &__block-workspace {
         &--top {
             margin-bottom: $default-margin;
         }
 
         &--center {
             margin-top: 0.6em;
+
             .injectionDiv {
                 height: 100%;
             }
         }
+
         &__header {
             display: flex;
         }
     }
+
     &__button {
         &-new {
             width: 20%;
             height: 4rem !important;
             font-size: var(--text-size-xs);
             font-weight: bold;
-            border-top-left-radius: 0rem !important;
-            border-bottom-left-radius: 0rem !important;
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
         }
+
         &-add {
             color: var(--general-main-1);
 
             &--hide {
                 display: none !important;
             }
         }
+
         &-back {
             padding: 0 15px;
             align-self: center;
@@ -99,10 +111,12 @@
             svg {
                 vertical-align: middle;
             }
+
             &:focus {
                 outline: none;
             }
         }
+
         &-next,
         &-previous {
             margin-inline-start: 1em;
@@ -111,45 +125,53 @@
             display: flex;
         }
     }
+
     &__item {
         line-height: 1.3em;
         font-size: var(--text-size-xs);
 
         &:not(:last-of-type) {
             margin-bottom: 30px;
         }
+
         &-header {
             display: flex;
             margin-top: $default-margin;
             margin-bottom: 10px;
         }
+
         &-buttons {
             margin-inline-start: auto;
             align-self: center;
         }
+
         &-info {
             cursor: pointer;
             font-weight: bold;
             display: block;
             color: $COLOR_RED;
         }
+
         &-description {
             font-size: var(--text-size-xs);
             margin-bottom: 1em;
             line-height: 1.3em;
             color: var(--text-general);
         }
     }
+
     &__image {
         width: 100%;
         height: auto;
         border-radius: 0.5em;
     }
+
     &__video {
         width: 100%;
         height: 20vh;
         border-radius: 0.5em;
     }
+
     &__help {
         padding: 0;
         height: 100%;
@@ -160,6 +182,7 @@
             display: flex;
             background-color: var(--general-section-1);
         }
+
         &-content {
             padding: 1.5em;
             font-size: 0.8em;
@@ -170,16 +193,19 @@
                 margin-bottom: 0.8em;
             }
         }
+
         &-title {
             align-self: center;
         }
+
         &-footer {
             display: flex;
             justify-content: flex-end;
             padding: 0.5em 0.8em;
             border-top: solid 0.1em var(--general-section-1);
         }
     }
+
     &__search {
         padding: 0;
         visibility: visible;
@@ -194,29 +220,33 @@
                 align-self: center;
             }
         }
+
         &-empty {
             padding: 25px 0;
         }
         #{$flyout}__help-content {
             height: calc(100% - 60px);
         }
     }
+
     &__normal {
         visibility: visible;
 
         &-content {
             height: 100%;
         }
     }
+
     &__input {
         width: 80% !important;
         height: 4rem;
-        border-top-right-radius: 0rem !important;
-        border-bottom-right-radius: 0rem !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
         border: solid 1px $color-grey-5 !important;
         display: inline-block !important;
         margin-top: 3.3rem;
     }
+
     &__hr {
         height: 2px;
         width: 100%;