Skip to content

Commit 91e5b79

Browse files
lindapaistelindapaiste
authored
Merge pull request #2429 from luckyklyist/luckyklyist/node-sass_migrate
feat: Remove deprecated node-sass package, migrated to Sass #2392
2 parents 2b99345 + 698fcdf commit 91e5b79

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1138
-515
lines changed

‎Dockerfile‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ FROM base as development
1010
ENV NODE_ENV development
1111
COPY package.json package-lock.json ./
1212
RUN npm install
13-
RUN npm rebuild node-sass
1413
COPY .babelrc index.js nodemon.json ./
1514
COPY ./webpack ./webpack
1615
COPY client ./client
@@ -27,6 +26,5 @@ FROM base as production
2726
ENV NODE_ENV=production
2827
COPY package.json package-lock.json index.js ./
2928
RUN npm install --production
30-
RUN npm rebuild node-sass
3129
COPY --from=build $APP_HOME/dist ./dist
3230
CMD ["npm", "run", "start:prod"]

‎client/styles/abstracts/_placeholders.scss‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
@use "sass:math";
2+
13
%toolbar-button {
24
@include themify() {
35
display: inline-block;
4-
height: #{44 / $base-font-size}rem;
5-
width: #{44 / $base-font-size}rem;
6+
height: #{math.div(44, $base-font-size)}rem;
7+
width: #{math.div(44, $base-font-size)}rem;
68
text-align: center;
79
border-radius: 100%;
810
cursor: pointer;
@@ -81,7 +83,7 @@
8183
cursor: pointer;
8284
border: 2px solid getThemifyVariable('button-border-color');
8385
border-radius: 2px;
84-
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
86+
padding: #{math.div(10, $base-font-size)}rem #{math.div(30, $base-font-size)}rem;
8587
& g, & path {
8688
fill: getThemifyVariable('button-color');
8789
opacity: 1;
@@ -111,8 +113,8 @@
111113
color: getThemifyVariable('primary-text-color');
112114
background-color: getThemifyVariable('preferences-button-background-color');
113115
padding: 0;
114-
margin-bottom: #{28 / $base-font-size}rem;
115-
line-height: #{50 / $base-font-size}rem;
116+
margin-bottom: #{math.div(28, $base-font-size)}rem;
117+
line-height: #{math.div(50, $base-font-size)}rem;
116118
& g, & path {
117119
fill: getThemifyVariable('modal-button-color');
118120
}
@@ -138,12 +140,12 @@
138140
color: getThemifyVariable('heavy-text-color');
139141
}
140142
}
141-
font-size: #{12 / $base-font-size}rem;
143+
font-size: #{math.div(12, $base-font-size)}rem;
142144
cursor: pointer;
143145
text-align: left;
144146
padding: 0;
145-
margin-bottom: #{5 / $base-font-size}rem;
146-
padding-right: #{5 / $base-font-size}rem;
147+
margin-bottom: #{math.div(5, $base-font-size)}rem;
148+
padding-right: #{math.div(5, $base-font-size)}rem;
147149
border: 0;
148150
list-style-type: none;
149151
}
@@ -194,19 +196,19 @@
194196
color: getThemifyVariable('primary-text-color');
195197
}
196198
text-align: left;
197-
width: #{180 / $base-font-size}rem;
199+
width: #{math.div(180, $base-font-size)}rem;
198200
display: flex;
199201
position: absolute;
200202
flex-direction: column;
201203
top: 95%;
202204
height: auto;
203205
z-index: 9999;
204-
border-radius: #{6 / $base-font-size}rem;
206+
border-radius: #{math.div(6, $base-font-size)}rem;
205207
& li:first-child {
206-
border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
208+
border-radius: #{math.div(5, $base-font-size)}rem #{math.div(5, $base-font-size)}rem 0 0;
207209
}
208210
& li:last-child {
209-
border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
211+
border-radius: 0 0 #{math.div(5, $base-font-size)}rem #{math.div(5, $base-font-size)}rem;
210212
}
211213
& li {
212214
& button,
@@ -216,9 +218,9 @@
216218
}
217219
width: 100%;
218220
text-align: left;
219-
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
221+
padding: #{math.div(8, $base-font-size)}rem #{math.div(16, $base-font-size)}rem;
220222
}
221-
height: #{35 / $base-font-size}rem;
223+
height: #{math.div(35, $base-font-size)}rem;
222224
cursor: pointer;
223225
display: flex;
224226
align-items: center;

‎client/styles/base/_base.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:math";
2+
13
* {
24
box-sizing: border-box;
35
}
@@ -65,10 +67,10 @@ button {
6567

6668
input,
6769
textarea {
68-
padding: #{5 / $base-font-size}rem;
70+
padding: #{math.div(5, $base-font-size)}rem;
6971
border: 1px solid;
7072
border-radius: 2px;
71-
padding: #{10 / $base-font-size}rem;
73+
padding: #{math.div(10, $base-font-size)}rem;
7274
@include themify() {
7375
color: getThemifyVariable("input-text-color");
7476
background-color: getThemifyVariable("input-background-color");
@@ -105,23 +107,23 @@ button {
105107
}
106108

107109
h1 {
108-
font-size: #{21 / $base-font-size}em;
110+
font-size: #{math.div(21, $base-font-size)}em;
109111
}
110112

111113
h2 {
112-
font-size: #{21 / $base-font-size}em;
114+
font-size: #{math.div(21, $base-font-size)}em;
113115
}
114116

115117
h3 {
116118
font-weight: normal;
117-
font-size: #{16 / $base-font-size}rem;
119+
font-size: #{math.div(16, $base-font-size)}rem;
118120
}
119121
h4 {
120122
font-weight: normal;
121123
}
122124
h6 {
123125
font-weight: normal;
124-
font-size: #{12 / $base-font-size}rem;
126+
font-size: #{math.div(12, $base-font-size)}rem;
125127
}
126128
thead {
127129
text-align: left;

‎client/styles/components/_about.scss‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:math";
2+
13
.about__logo {
24
@include themify() {
35
& path {
@@ -11,11 +13,11 @@
1113
flex-direction: row;
1214
justify-content: space-between;
1315
flex-wrap: wrap;
14-
padding-top: #{17 / $base-font-size}rem;
15-
padding-right: #{78 / $base-font-size}rem;
16-
padding-bottom: #{20 / $base-font-size}rem;
17-
padding-left: #{20 / $base-font-size}rem;
18-
width: #{720 / $base-font-size}rem;
16+
padding-top: #{math.div(17, $base-font-size)}rem;
17+
padding-right: #{math.div(78, $base-font-size)}rem;
18+
padding-bottom: #{math.div(20, $base-font-size)}rem;
19+
padding-left: #{math.div(20, $base-font-size)}rem;
20+
width: #{math.div(720, $base-font-size)}rem;
1921
}
2022

2123
.about__content-column {
@@ -36,18 +38,18 @@
3638

3739
.about__footer {
3840
flex-direction: column;
39-
padding-left: #{20 / $base-font-size}rem;
40-
padding-right: #{20 / $base-font-size}rem;
41+
padding-left: #{math.div(20, $base-font-size)}rem;
42+
padding-right: #{math.div(20, $base-font-size)}rem;
4143
}
4244
}
4345

4446
.about__content-column-title {
45-
font-size: #{21 / $base-font-size}rem;
46-
padding-left: #{17 / $base-font-size}rem;
47+
font-size: #{math.div(21, $base-font-size)}rem;
48+
padding-left: #{math.div(17, $base-font-size)}rem;
4749
}
4850

4951
.about__content-column-asterisk {
50-
padding-right: #{5 / $base-font-size}rem;
52+
padding-right: #{math.div(5, $base-font-size)}rem;
5153
@include themify() {
5254
& path {
5355
fill: getThemifyVariable('logo-color');
@@ -58,20 +60,20 @@
5860

5961
.about__content-column-list {
6062
@include themify() {
61-
padding-top: #{10 / $base-font-size}rem;
62-
font-size: #{16 / $base-font-size}rem;
63+
padding-top: #{math.div(10, $base-font-size)}rem;
64+
font-size: #{math.div(16, $base-font-size)}rem;
6365
}
6466
}
6567

6668
.about__version-info {
6769
@include themify() {
68-
padding-top: #{8 / $base-font-size}rem;
69-
font-size: #{16 / $base-font-size}rem;
70+
padding-top: #{math.div(8, $base-font-size)}rem;
71+
font-size: #{math.div(16, $base-font-size)}rem;
7072
span {
7173
color: getThemifyVariable('logo-color');
7274
}
7375
&:first-child {
74-
padding-top: #{30 /$base-font-size}rem;
76+
padding-top: #{math.div(30, $base-font-size)}rem;
7577
}
7678
}
7779
// span {
@@ -84,13 +86,13 @@
8486
.about__footer {
8587
display: flex;
8688
justify-content: space-between;
87-
padding-top: #{18 / $base-font-size}rem;
88-
padding-right: #{20 / $base-font-size}rem;
89-
padding-bottom: #{21 / $base-font-size}rem;
90-
padding-left: #{20 / $base-font-size}rem;
89+
padding-top: #{math.div(18, $base-font-size)}rem;
90+
padding-right: #{math.div(20, $base-font-size)}rem;
91+
padding-bottom: #{math.div(21, $base-font-size)}rem;
92+
padding-left: #{math.div(20, $base-font-size)}rem;
9193
width: 100%;
9294
}
9395

9496
.about__footer-list {
95-
padding-top: #{12 / $base-font-size}rem;
97+
padding-top: #{math.div(12, $base-font-size)}rem;
9698
}

‎client/styles/components/_account.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:math";
2+
13
.account-settings__container {
24
@include themify() {
35
color: getThemifyVariable('primary-text-color');
@@ -13,18 +15,18 @@
1315
}
1416

1517
.account-settings {
16-
max-width: #{700 / $base-font-size}rem;
18+
max-width: #{math.div(700, $base-font-size)}rem;
1719
align-self: center;
18-
padding: 0 #{10 / $base-font-size}rem;
20+
padding: 0 #{math.div(10, $base-font-size)}rem;
1921
margin: 0 auto;
2022
}
2123

2224
.account__tabs {
23-
padding-top: #{20 / $base-font-size}rem;
25+
padding-top: #{math.div(20, $base-font-size)}rem;
2426
}
2527

2628
.account__social-text {
27-
padding-bottom: #{15 / $base-font-size}rem;
29+
padding-bottom: #{math.div(15, $base-font-size)}rem;
2830
}
2931

3032

@@ -33,7 +35,7 @@
3335
@media (max-width: 770px) {
3436
flex-direction: column;
3537
align-items: center;
36-
gap: #{15 / $base-font-size}rem;
38+
gap: #{math.div(15, $base-font-size)}rem;
3739

3840
button, a {
3941
width: 100% !important;
@@ -43,5 +45,5 @@
4345
}
4446

4547
.account__social-stack > * {
46-
margin-right: #{15 / $base-font-size}rem;
48+
margin-right: #{math.div(15, $base-font-size)}rem;
4749
}

‎client/styles/components/_api-key.scss‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1+
@use "sass:math";
2+
13
.api-key-form__summary {
2-
padding-top: #{25 / $base-font-size}rem;
4+
padding-top: #{math.div(25, $base-font-size)}rem;
35
}
46

57
.api-key-form__section {
6-
padding-bottom: #{15 / $base-font-size}rem;
8+
padding-bottom: #{math.div(15, $base-font-size)}rem;
79
}
810

911
.api-key-form__title {
10-
padding: #{15 / $base-font-size}rem 0;
11-
font-size: #{21 / $base-font-size}rem;
12+
padding: #{math.div(15, $base-font-size)}rem 0;
13+
font-size: #{math.div(21, $base-font-size)}rem;
1214
font-weight: bold;
1315
}
1416

@@ -27,11 +29,11 @@
2729
}
2830

2931
th {
30-
padding: #{5 / $base-font-size}rem;
32+
padding: #{math.div(5, $base-font-size)}rem;
3133
}
3234

3335
td {
34-
padding: #{15 / $base-font-size}rem #{5 / $base-font-size}rem;
36+
padding: #{math.div(15, $base-font-size)}rem #{math.div(5, $base-font-size)}rem;
3537
}
3638

3739
tbody tr:nth-child(odd) {
@@ -46,8 +48,8 @@
4648
}
4749

4850
.api-key-list__delete-button {
49-
width:#{20 / $base-font-size}rem;
50-
height:#{20 / $base-font-size}rem;
51+
width:#{math.div(20, $base-font-size)}rem;
52+
height:#{math.div(20, $base-font-size)}rem;
5153

5254
text-align: center;
5355

@@ -76,11 +78,11 @@
7678
}
7779

7880
.api-key-form__new-token__title {
79-
margin-bottom: #{10 / $base-font-size}rem;
80-
font-size: #{18 / $base-font-size}rem;
81+
margin-bottom: #{math.div(10, $base-font-size)}rem;
82+
font-size: #{math.div(18, $base-font-size)}rem;
8183
font-weight: bold;
8284
}
8385

8486
.api-key-form__new-token__info {
85-
padding: #{10 / $base-font-size}rem 0;
87+
padding: #{math.div(10, $base-font-size)}rem 0;
8688
}

0 commit comments

Comments
 (0)