chore(ci): migrate node-sass to dart sass

zoobestik · zoobestik · commit e5fb47ee50c3 · 2025-06-19T16:10:48.000+02:00
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.20.2
+20
diff --git a/package.json b/package.json
@@ -53,8 +53,7 @@
     "lottie-web": "5.12.2",
     "mini-css-extract-plugin": "1.6.1",
     "mini-svg-data-uri": "1.1.3",
-    "nanoid": "3.3.3",
-    "node-sass": "7.0.3",
+    "nanoid": "^5.1.5",
     "normalize.css": "8.0.1",
     "postcss-custom-properties": "11.0.0",
     "postcss-font-smoothing": "0.1.0",
@@ -71,7 +70,6 @@
     "react-swipeable-views": "0.14.0",
     "resolve-url-loader": "4.0.0",
     "rollup": "2.47.0",
-    "sass-loader": "12.1.0",
     "sha.js": "^2.4.11",
     "svgo": "2.7.0",
     "svgo-loader": "3.0.0",
@@ -97,6 +95,8 @@
     "postcss-import": "15.1.0",
     "prettier": "2.6.2",
     "react-kotlin-playground": "0.1.0-beta.12",
+    "sass": "1.89.2",
+    "sass-loader": "16.0.5",
     "start-server-and-test": "1.14.0",
     "the-platform": "0.10.1",
     "typescript": "4.6.3",
diff --git a/static/css/_kto.scss b/static/css/_kto.scss
@@ -1,8 +1,8 @@
-@import 'static/js/components/kto-button.scss';
-@import 'static/js/components/kto-header.scss';
-@import 'static/js/components/kto-numbers.scss';
-@import 'static/js/components/kto-qoute/kto-quotes.scss';
-@import 'static/js/components/kto-tabs.scss';
-@import 'static/js/components/kto-heading.scss';
-@import 'static/js/components/kto-text.scss';
-@import 'static/js/components/kto-link.scss';
+@import '../js/components/kto-button.scss';
+@import '../js/components/kto-header.scss';
+@import '../js/components/kto-numbers.scss';
+@import '../js/components/kto-qoute/kto-quotes.scss';
+@import '../js/components/kto-tabs.scss';
+@import '../js/components/kto-heading.scss';
+@import '../js/components/kto-text.scss';
+@import '../js/components/kto-link.scss';
diff --git a/static/css/com/_bits/_code.scss b/static/css/com/_bits/_code.scss
@@ -9,10 +9,11 @@
 
 %code-span {
     font-family: $font-family-mono;
+}
 
-    &%_decorated {
-        padding: 0 5px;
-        border-radius: 4px;
-        background-color: #efefef;
-    }
+%code-span_decorated {
+    @extend %code-span;
+    padding: 0 5px;
+    border-radius: 4px;
+    background-color: #efefef;
 }
diff --git a/static/css/com/_bits/_header.scss b/static/css/com/_bits/_header.scss
@@ -34,14 +34,15 @@
         page-break-before: always;
         page-break-after: avoid;
     }
+}
 
-    &%_section-title {
-        padding-top: 140px;
-        margin-bottom: 45px;
-        font-size: 55px;
-        line-height: 65px;
-        font-weight: bold;
-    }
+
+%h1_section-title {
+    padding-top: 140px;
+    margin-bottom: 45px;
+    font-size: 55px;
+    line-height: 65px;
+    font-weight: bold;
 }
 
 %h2 {
diff --git a/static/css/com/_bits/_list.scss b/static/css/com/_bits/_list.scss
@@ -1,49 +1,47 @@
 @import '../../_config';
 
-%list {
-    &%ul {
-        margin-bottom: $vertical-rhythm-unit;
-        margin-left: $vertical-rhythm-unit*2;
-
-        & > li {
-            margin-bottom: $vertical-rhythm-unit/2;
-            list-style: none;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            &:before {
-                position: absolute;
-                margin-top: -1px;
-                margin-left: -20px;
-                color: #666;
-                content: '\2014';
-            }
+%list_ul {
+    margin-bottom: $vertical-rhythm-unit;
+    margin-left: $vertical-rhythm-unit*2;
+
+    & > li {
+        margin-bottom: $vertical-rhythm-unit/2;
+        list-style: none;
+
+        &:last-child {
+            margin-bottom: 0;
         }
 
-        ul,
-        ol {
-            margin-top: $vertical-rhythm-unit/2;
+        &:before {
+            position: absolute;
+            margin-top: -1px;
+            margin-left: -20px;
+            color: #666;
+            content: '\2014';
         }
     }
 
-    &%ol {
-        margin-bottom: $vertical-rhythm-unit;
-        margin-left: $vertical-rhythm-unit*2;
+    ul,
+    ol {
+        margin-top: $vertical-rhythm-unit/2;
+    }
+}
+
+%list_ol {
+    margin-bottom: $vertical-rhythm-unit;
+    margin-left: $vertical-rhythm-unit*2;
 
-        & > li {
-            list-style: decimal;
-            margin-bottom: $vertical-rhythm-unit/2;
+    & > li {
+        list-style: decimal;
+        margin-bottom: $vertical-rhythm-unit/2;
 
-            &:last-child {
-                margin-bottom: 0;
-            }
+        &:last-child {
+            margin-bottom: 0;
         }
+    }
 
-        ul,
-        ol {
-            margin-top: $vertical-rhythm-unit/2;
-        }
+    ul,
+    ol {
+        margin-top: $vertical-rhythm-unit/2;
     }
-}
+}
diff --git a/static/css/com/_page-content/_page-content.scss b/static/css/com/_page-content/_page-content.scss
@@ -38,12 +38,12 @@ h5 {
 
 // list
 ul {
-    @extend %list%ul;
+    @extend %list_ul;
     line-height: 24px;
 }
 
 ol {
-    @extend %list%ol;
+    @extend %list_ol;
     line-height: 24px;
 }
 
@@ -78,7 +78,7 @@ code {
 .multi-language-span > code,
 p > code,
 li > code {
-    @extend %code-span%_decorated;
+    @extend %code-span_decorated;
 }
 
 .code._highlighted {
diff --git a/static/css/com/page-content/page-content.scss b/static/css/com/page-content/page-content.scss
@@ -4,7 +4,7 @@
 
 .section-title {
     @extend %h1;
-    @extend %h1%_section-title;
+    @extend %h1_section-title;
 }
 
 .page-title {
diff --git a/static/css/playgrounds.scss b/static/css/playgrounds.scss
@@ -1,4 +1,4 @@
-@import './static/css/_config';
+@import '_config';
 
 .CodeMirror,
 .CodeMirror pre,
diff --git a/static/js/components/kto-button.scss b/static/js/components/kto-button.scss
@@ -317,7 +317,7 @@ a.kto-button:hover, a.kto-button:focus, a.kto-button:active {
   }
 }
 
-@import "static/js/components/kto-text";
+@import "../../js/components/kto-text";
 
 .page_restyled_v2 .kto-button_size_l {
   @include kto-text;
diff --git a/static/js/ktl-component/teach/components/teach-top-menu/teach-top-menu.scss b/static/js/ktl-component/teach/components/teach-top-menu/teach-top-menu.scss
@@ -1,4 +1,4 @@
-@import "static/js/components/-vars-media";
+@import "../../../../components/-vars-media";
 
 .teach-sticky-menu {
   position: sticky;
diff --git a/static/js/page/index/index.scss b/static/js/page/index/index.scss
@@ -1,10 +1,10 @@
-@import 'static/css/_config';
-@import 'static/css/_utils';
-@import 'static/css/com/_bits/_pre';
-@import 'static/css/com/_bits/_code';
-@import 'static/css/com/_syntax-highlight/_syntax-highlight_dark';
-@import "static/js/components/-vars-spaces";
-@import "static/js/components/kto-text";
+@import '../../../css/_config';
+@import '../../../css/_utils';
+@import '../../../css/com/_bits/_pre';
+@import '../../../css/com/_bits/_code';
+@import '../../../css/com/_syntax-highlight/_syntax-highlight_dark';
+@import "../../../js/components/-vars-spaces";
+@import "../../../js/components/kto-text";
 
 a, a:hover  {
   color: #7F52FF;
diff --git a/static/js/page/index/kotlin-code-examples-section.scss b/static/js/page/index/kotlin-code-examples-section.scss
@@ -1,4 +1,4 @@
-@import "static/js/components/-vars-media";
+@import "../../components/-vars-media";
 
 .kotlin-code-examples-section {
   $legend-width: 180px;
diff --git a/static/js/page/index/kotlin-highlights-section.scss b/static/js/page/index/kotlin-highlights-section.scss
@@ -1,5 +1,5 @@
-@import "static/js/components/-vars-media";
-@import "static/js/components/kto-text";
+@import "../../components/-vars-media";
+@import "../../components/kto-text";
 
 .kotlin-highlights-section {
   padding: 0 0 var(--xxxl-space);
diff --git a/static/js/page/index/kotlin-intro-section.scss b/static/js/page/index/kotlin-intro-section.scss
@@ -1,4 +1,4 @@
-@import "static/js/components/-vars-media";
+@import "../../components/-vars-media";
 
 .kotlin-intro-section {
   padding-top: var(--xl-space);
diff --git a/static/js/page/index/kotlin-news-section.scss b/static/js/page/index/kotlin-news-section.scss
@@ -1,4 +1,4 @@
-@import "static/js/components/kto-link";
+@import "../../components/kto-link";
 
 .kotlin-news-section {
   display: flex;
diff --git a/static/js/page/index/kotlin-stay-in-touch-section.scss b/static/js/page/index/kotlin-stay-in-touch-section.scss
@@ -1,4 +1,4 @@
-@import "static/js/components/kto-socials-list/kto-socials-list";
+@import "../../components/kto-socials-list/kto-socials-list";
 
 .kotlin-stay-in-touch-section {
   margin: 0 0 92px;
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -38,12 +38,12 @@ h5 {`
`38`	`38`
`39`	`39`	`// list`
`40`	`40`	`ul {`
`41`		`- @extend %list%ul;`
	`41`	`+ @extend %list_ul;`
`42`	`42`	`line-height: 24px;`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`ol {`
`46`		`- @extend %list%ol;`
	`46`	`+ @extend %list_ol;`
`47`	`47`	`line-height: 24px;`
`48`	`48`	`}`
`49`	`49`
`@@ -78,7 +78,7 @@ code {`
`78`	`78`	`.multi-language-span > code,`
`79`	`79`	`p > code,`
`80`	`80`	`li > code {`
`81`		`- @extend %code-span%_decorated;`
	`81`	`+ @extend %code-span_decorated;`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`.code._highlighted {`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`
`5`	`5`	`.section-title {`
`6`	`6`	`@extend %h1;`
`7`		`- @extend %h1%_section-title;`
	`7`	`+ @extend %h1_section-title;`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`.page-title {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import './static/css/_config';`
	`1`	`+@import '_config';`
`2`	`2`
`3`	`3`	`.CodeMirror,`
`4`	`4`	`.CodeMirror pre,`
Original file line number	Diff line number	Diff line change
`@@ -317,7 +317,7 @@ a.kto-button:hover, a.kto-button:focus, a.kto-button:active {`
`317`	`317`	`}`
`318`	`318`	`}`
`319`	`319`
`320`		`-@import "static/js/components/kto-text";`
	`320`	`+@import "../../js/components/kto-text";`
`321`	`321`
`322`	`322`	`.page_restyled_v2 .kto-button_size_l {`
`323`	`323`	`@include kto-text;`