Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit dda8243

Browse files
shafin-derivshafin-deriv
committedJul 15, 2024··
chore: fix sass loader issue
1 parent d5e96d6 commit dda8243

File tree

3 files changed

+54
-69
lines changed

3 files changed

+54
-69
lines changed
 

‎rsbuild.config.ts

+8-19
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,20 @@ import { defineConfig } from '@rsbuild/core';
22
import { pluginReact } from '@rsbuild/plugin-react';
33
import { pluginSass } from '@rsbuild/plugin-sass';
44
const path = require('path');
5-
const IS_RELEASE =
6-
process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging' || process.env.NODE_ENV === 'test';
75

86
export default defineConfig({
97
plugins: [
108
pluginSass({
119
sassLoaderOptions: {
1210
sourceMap: true,
11+
// additionalData: `@import url('@/components/shared/styles/constants.scss');`,
12+
additionalData: `
13+
@import "${path.resolve(__dirname, 'src/components/shared/styles/constants.scss')}";
14+
@import "${path.resolve(__dirname, 'src/components/shared/styles/mixins.scss')}";
15+
@import "${path.resolve(__dirname, 'src/components/shared/styles/fonts.scss')}";
16+
@import "${path.resolve(__dirname, 'src/components/shared/styles/inline-icons.scss')}";
17+
@import "${path.resolve(__dirname, 'src/components/shared/styles/devices.scss')}";
18+
`,
1319
},
1420
}),
1521
pluginReact(),
@@ -50,23 +56,6 @@ export default defineConfig({
5056
resolve: {},
5157
module: {
5258
rules: [
53-
{
54-
test: /\.(s*)css$/,
55-
use: [
56-
{
57-
loader: 'sass-loader',
58-
options: { sourceMap: !IS_RELEASE },
59-
},
60-
{
61-
loader: 'sass-resources-loader',
62-
options: {
63-
resources: require(
64-
path.resolve(__dirname, 'src/components/shared/styles/index.js')
65-
),
66-
},
67-
},
68-
],
69-
},
7059
{
7160
test: /\.xml$/,
7261
exclude: /node_modules/,

‎src/components/shared/styles/constants.scss

+39-50
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
1-
/*------------------------------------*
1+
/* ------------------------------------*
22
* # Constants
3-
*------------------------------------*/
4-
5-
/*RTL Language Mixin*/
6-
7-
@mixin rtl {
8-
[dir='rtl'] & {
9-
@content;
10-
}
11-
}
3+
*------------------------------------ */
124

135
/* stylelint-disable color-no-hex */
146

157
/* COLOR PALETTE */
168

179
/* colors */
1810
$color-black: #0e0e0e;
19-
$color-black-1: #333333;
11+
$color-black-1: #333;
2012
$color-black-3: #151717;
2113
$color-black-4: #1d1f20;
2214
$color-black-5: #242828;
2315
$color-black-6: #3e3e3e;
24-
$color-black-7: #000000;
16+
$color-black-7: #000;
2517
$color-black-8: #323738;
2618
$color-black-9: #5c5c5c;
2719
$color-blue: #377cfc;
@@ -44,7 +36,7 @@ $color-green-6: #17eabd;
4436
$color-green-7: #e8fdf8;
4537
$color-green-8: #cedddf;
4638
$color-grey: #c2c2c2;
47-
$color-grey-1: #999999;
39+
$color-grey-1: #999;
4840
$color-grey-2: #f2f3f4;
4941
$color-grey-3: #eaeced;
5042
$color-grey-4: #e6e9e9;
@@ -73,17 +65,17 @@ $color-red-9: #b33037;
7365
$color-red-10: #ff444f;
7466
$color-red-11: #fce3e3;
7567
$color-violet: #4a3871;
76-
$color-white: #ffffff;
68+
$color-white: #fff;
7769
$color-yellow: #ffad3a;
7870
$color-yellow-1: #b3760d;
7971
$color-yellow-2: #ffa912;
80-
$color-yellow-3: rgba(255, 173, 58, 0.16);
72+
$color-yellow-3: rgb(255 173 58 / 16%);
8173

8274
/* status colors */
83-
$color-status-warning: rgba(255, 173, 58, 0.16);
84-
$color-status-information: rgba(55, 124, 252, 0.16);
85-
$color-status-announcement: rgba(75, 180, 179, 0.16);
86-
$color-status-error: rgba(236, 63, 63, 0.16);
75+
$color-status-warning: rgb(255 173 58 / 16%);
76+
$color-status-information: rgb(55 124 252 / 16%);
77+
$color-status-announcement: rgb(75 180 179 / 16%);
78+
$color-status-error: rgb(236 63 63 / 16%);
8779

8880
/* alpha colors */
8981
$alpha-color-black-1: transparentize($color-black-7, 0.28);
@@ -116,7 +108,6 @@ $contract-gradient-color-red-1: linear-gradient(to top, $color-white 85%, transp
116108
$contract-gradient-color-red-2: linear-gradient(to top, $color-black 85%, transparentize($color-red, 0.84));
117109
$gradient-color-white: linear-gradient(to right, transparentize($color-white, 1) -5%, $color-white 71%);
118110
$gradient-color-black: linear-gradient(to right, transparentize($color-black, 1) -5%, $color-black 71%);
119-
120111
$gradient-color-purple: linear-gradient(274.73deg, #5a205d 3.82%, #7f3883 88.49%);
121112
$gradient-color-blue: linear-gradient(274.73deg, #1a205e 3.82%, #122d96 88.49%);
122113
$gradient-color-orange: linear-gradient(90deg, #eb001b 0%, #f79e1b 100%);
@@ -131,90 +122,88 @@ $gradient-color-blue-4: linear-gradient(90deg, #1a8fff 0%, #0083ff 100%);
131122
$gradient-color-red-3: linear-gradient(90deg, #ff444f 0%, #211d1e 95.22%);
132123
$gradient-color-red-4: linear-gradient(90deg, #ff6444 0%, #ff444f 100%);
133124
$gradient-color-black-3: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%);
134-
$gradient-color-black-4: linear-gradient(274.25deg, #333333 9.01%, #5c5b5b 103.31%);
135-
$gradient-color-black-5: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.16) 100%);
136-
$gradient-color-white-2: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.16) 100%);
125+
$gradient-color-black-4: linear-gradient(274.25deg, #333 9.01%, #5c5b5b 103.31%);
126+
$gradient-color-black-5: linear-gradient(180deg, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 16%) 100%);
127+
$gradient-color-white-2: linear-gradient(180deg, rgb(255 255 255 / 0%) 50%, rgb(255 255 255 / 16%) 100%);
137128
$gradient-color-blue-5: linear-gradient(90deg, #00a8af 0%, #04cfd8 104.41%);
138129
$gradient-color-gold: linear-gradient(90deg, #f7931a 0%, #ffc71b 104.41%);
139130
$gradient-color-green-4: linear-gradient(90deg, #1db193 0%, #09da7a 104.41%);
140131

141132
/* Preserve legacy variables */
133+
142134
/* Primary */
143135

144-
$COLOR_BLACK: #000000;
136+
$COLOR_BLACK: #000;
145137
$COLOR_BLACK_2: #1d1f20;
146138
$COLOR_BLACK_3: #0e0e0e;
147139
$COLOR_GREEN_1: #39b19d;
148140
$COLOR_GREEN_2: #2d9f93;
149141
$COLOR_GREEN_3: #21ce99;
150142
$COLOR_GREEN_4: #00a79e;
151143
$COLOR_GREEN_5: #4bb4b3;
152-
$COLOR_ORANGE: #ff9933;
144+
$COLOR_ORANGE: #f93;
153145
$COLOR_DARK_ORANGE: #ff8802;
154146
$COLOR_PURPLE: #4f60ae;
155147
$COLOR_RED: #e31c4b;
156148
$COLOR_RED_2: #cc2e3d;
157149
$COLOR_RED_3: #ec3f3f;
158150
$COLOR_CORAL_RED: #ff444f;
159151
$COLOR_SKY_BLUE: #2196f3;
160-
$COLOR_WHITE: #ffffff;
152+
$COLOR_WHITE: #fff;
161153
$COLOR_BLUE: #1c5ae3;
154+
162155
// Light theme
163-
$COLOR_LIGHT_BLACK_1: rgba(0, 0, 0, 0.8);
164-
$COLOR_LIGHT_BLACK_2: rgba(0, 0, 0, 0.4);
165-
$COLOR_LIGHT_BLACK_3: rgba(0, 0, 0, 0.16);
156+
$COLOR_LIGHT_BLACK_1: rgb(0 0 0 / 80%);
157+
$COLOR_LIGHT_BLACK_2: rgb(0 0 0 / 40%);
158+
$COLOR_LIGHT_BLACK_3: rgb(0 0 0 / 16%);
166159
$COLOR_LIGHT_BLACK_3_SOLID_1: #d6d6d6;
167160
$COLOR_LIGHT_BLACK_3_SOLID_2: #b3b3b3;
168-
$COLOR_LIGHT_BLACK_4: rgba(0, 0, 0, 0.04);
161+
$COLOR_LIGHT_BLACK_4: rgb(0 0 0 / 4%);
169162
$COLOR_LIGHT_BLACK_4_SOLID: #f4f4f6;
170163
$COLOR_LIGHT_GRAY_1: #999cac;
171-
$COLOR_LIGHT_GRAY_2: rgba(153, 156, 172, 0.32);
164+
$COLOR_LIGHT_GRAY_2: rgb(153 156 172 / 32%);
172165
$COLOR_LIGHT_GRAY_3: #eaeced;
173166
$COLOR_LIGHT_GRAY_4: #6e6e6e;
174167
$COLOR_LIGHT_GRAY_5: #c2c2c2;
175168
$COLOR_LIGHT_GRAY_6: #f2f3f4;
176-
$COLOR_LIGHT_GREEN_GRADIENT: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 148, 117, 0.16));
177-
$COLOR_LIGHT_RED_GRADIENT: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(227, 28, 75, 0.16));
178-
$COLOR_LIGHT_WHITE_GRADIENT: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
169+
$COLOR_LIGHT_GREEN_GRADIENT: linear-gradient(to top, rgb(255 255 255 / 0%), rgb(0 148 117 / 16%));
170+
$COLOR_LIGHT_RED_GRADIENT: linear-gradient(to top, rgb(255 255 255 / 0%), rgb(227 28 75 / 16%));
171+
$COLOR_LIGHT_WHITE_GRADIENT: linear-gradient(to right, rgb(255 255 255 / 100%), rgb(255 255 255 / 0%));
172+
179173
// Dark theme
180-
$COLOR_DARK_BLACK_GRADIENT: linear-gradient(to right, rgba(16, 19, 32, 1), rgba(16, 19, 32, 0));
174+
$COLOR_DARK_BLACK_GRADIENT: linear-gradient(to right, rgb(16 19 32 / 100%), rgb(16 19 32 / 0%));
181175
$COLOR_DARK_BLUE_1: #0b0e18;
182176
$COLOR_DARK_BLUE_2: #101320;
183177
$COLOR_DARK_BLUE_3: #191c31;
184178
$COLOR_DARK_BLUE_4: #202641;
185179
$COLOR_DARK_BLUE_5: #2a3052;
186180
$COLOR_DARK_BLUE_6: #555975;
187181
$COLOR_DARK_BLUE_7: #7f8397;
188-
$COLOR_DARK_BLUE_8: rgba(127, 131, 151, 0.3);
189-
$COLOR_DARK_GREEN_GRADIENT: linear-gradient(to top, rgba(16, 19, 32, 0), rgba(0, 148, 117, 0.16));
190-
$COLOR_DARK_RED_GRADIENT: linear-gradient(to top, rgba(16, 19, 32, 0), rgba(227, 28, 75, 0.16));
182+
$COLOR_DARK_BLUE_8: rgb(127 131 151 / 30%);
183+
$COLOR_DARK_GREEN_GRADIENT: linear-gradient(to top, rgb(16 19 32 / 0%), rgb(0 148 117 / 16%));
184+
$COLOR_DARK_RED_GRADIENT: linear-gradient(to top, rgb(16 19 32 / 0%), rgb(227 28 75 / 16%));
191185
$COLOR_DARK_GRAY_1: #282a37;
192186
$COLOR_DARK_GRAY_2: #303342;
193187
$COLOR_DARK_GRAY_3: #555975;
194-
$COLOR_DARK_GRAY_4: #999999;
188+
$COLOR_DARK_GRAY_4: #999;
195189
/* stylelint-enable color-no-hex */
196190

197191
$BORDER_RADIUS: 4px;
198192
$BORDER_RADIUS_2: 8px;
199-
200193
$MAX_CONTAINER_WIDTH: 1440px;
201-
202194
$POSITIONS_DRAWER_WIDTH: 240px;
203195
$POSITIONS_DRAWER_MARGIN: 8px;
204-
205196
$HEADER_HEIGHT: 48px;
206197
$FOOTER_HEIGHT: 36px;
207-
208198
$MOBILE_HEADER_HEIGHT: 40px;
209199
$MOBILE_HEADER_HEIGHT_DASHBOARD: 48px;
210200
$MOBILE_WRAPPER_HEADER_HEIGHT: 40px;
211201
$MOBILE_WRAPPER_FOOTER_HEIGHT: 70px;
212-
213202
$SIDEBAR_WIDTH: 240px;
214203

215204
/* Wallet gradient background */
216205
$gradient-airtm: linear-gradient(90deg, #1a8fff 0%, #0083ff 100%);
217-
$gradient-banxa: linear-gradient(90deg, #000000 0%, #4ac0ba 96.35%);
206+
$gradient-banxa: linear-gradient(90deg, #000 0%, #4ac0ba 96.35%);
218207
$gradient-bitcoin: linear-gradient(90deg, #f89e32 0%, #f7931b 103.12%);
219208
$gradient-credit: linear-gradient(274.73deg, #464750 3.82%, #0e0f11 88.49%);
220209
$gradient-dp2p: linear-gradient(90deg, #ff444f 0%, #211d1e 95.22%);
@@ -232,7 +221,7 @@ $gradient-visa: linear-gradient(274.73deg, #1a205e 3.82%, #122d96 88.49%);
232221
$gradient-webmoney: linear-gradient(90deg, #1a77ac 0%, #0068a3 100%);
233222

234223
/* App Cards gradient background */
235-
$gradient-virtual: linear-gradient(274.25deg, #333333 9.01%, #5c5b5b 103.31%);
224+
$gradient-virtual: linear-gradient(274.25deg, #333 9.01%, #5c5b5b 103.31%);
236225
$gradient-virtual-swap-free: linear-gradient(58.51deg, #061828 28.06%, #1a3c60 93.51%);
237226

238227
/* Wallets */
@@ -242,8 +231,8 @@ $wallet-demo-bg-color: #fff8f9;
242231
$wallet-dark-demo-bg-color: #140506;
243232
$wallet-demo-divider-color: #fff0f1;
244233
$wallet-box-shadow:
245-
0px 12px 16px -4px rgba(14, 14, 14, 0.08),
246-
0px 4px 6px -2px rgba(14, 14, 14, 0.03);
234+
0 12px 16px -4px rgb(14 14 14 / 8%),
235+
0 4px 6px -2px rgb(14 14 14 / 3%);
247236
$btn-shadow:
248-
0px 24px 24px 0px rgba(0, 0, 0, 0.08),
249-
0px 0px 24px 0px rgba(0, 0, 0, 0.08);
237+
0 24px 24px 0 rgb(0 0 0 / 8%),
238+
0 0 24px 0 rgb(0 0 0 / 8%);

‎src/components/shared/styles/mixins.scss

+7
Original file line numberDiff line numberDiff line change
@@ -300,3 +300,10 @@
300300
@content;
301301
}
302302
}
303+
304+
/* RTL Language Mixin */
305+
@mixin rtl {
306+
[dir='rtl'] & {
307+
@content;
308+
}
309+
}

0 commit comments

Comments
 (0)
Please sign in to comment.