From 43153fbedb8f0866cd671847d53ed6722c005e19 Mon Sep 17 00:00:00 2001 From: Shribak Bohdan Date: Wed, 24 Dec 2025 21:25:18 +0200 Subject: [PATCH] fix/242: update packages verions and replace old code --- package.json | 6 +++--- src/assets/sass/_utils.functions.scss | 10 ++++++---- src/assets/sass/mixins/_utils.mixins.scss | 17 +++++++++-------- src/assets/sass/mixins/_vendor.mixins.scss | 8 +++++--- .../TimelineSwiper/TimelineSwiper.component.tsx | 4 +++- 5 files changed, 26 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 8c9b403..55939de 100644 --- a/package.json +++ b/package.json @@ -123,11 +123,11 @@ "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", "lint-staged": "^13.1.0", - "sass": "^1.57.1", - "sass-loader": "^13.2.0", + "sass": "^1.97.1", + "sass-loader": "^16.0.6", "ts-loader": "^9.4.2", "url-loader": "^4.1.1", - "webpack": "^5.75.0", + "webpack": "^5.104.1", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" }, diff --git a/src/assets/sass/_utils.functions.scss b/src/assets/sass/_utils.functions.scss index cde99e0..1852c44 100644 --- a/src/assets/sass/_utils.functions.scss +++ b/src/assets/sass/_utils.functions.scss @@ -1,4 +1,6 @@ @use "sass:math"; +@use "sass:string"; +@use "sass:list"; $body-font-size: 16px; @@ -13,18 +15,18 @@ $body-font-size: 16px; } @function str-replace($string, $search, $replace: '') { - $index: str-index($string, $search); + $index: string.index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + @return string.slice($string, 1, $index - 1) + $replace + + str-replace(string.slice($string, $index + string.length($search)), $search, $replace); } @return $string; } @function str-replace-all($strings, $search, $replace: '') { @each $string in $strings { - $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); + $strings: list.set-nth($strings, list.index($strings, $string), str-replace($string, $search, $replace)); } @return $strings; } diff --git a/src/assets/sass/mixins/_utils.mixins.scss b/src/assets/sass/mixins/_utils.mixins.scss index 8032dee..5af22b5 100644 --- a/src/assets/sass/mixins/_utils.mixins.scss +++ b/src/assets/sass/mixins/_utils.mixins.scss @@ -1,3 +1,4 @@ +@use 'sass:math'; @use '../variables/variables.fonts' as ft; @use '../variables/variables.colors' as c; @use '../mixins/vendor.mixins' as vnd; @@ -21,22 +22,22 @@ @mixin set-positioning($top, $right, $bottom, $left) { - @if ($top == 'auto' or unit($top) == '%') { + @if ($top == 'auto' or math.unit($top) == '%') { top: $top; } @else { top: f.pxToRem($top); } - @if ($right == 'auto' or unit($right) == '%') { + @if ($right == 'auto' or math.unit($right) == '%') { right: $right; } @else { right: f.pxToRem($right); } - @if ($bottom == 'auto' or unit($bottom) == '%') { + @if ($bottom == 'auto' or math.unit($bottom) == '%') { bottom: $bottom; } @else { bottom: f.pxToRem($bottom); } - @if ($left == 'auto' or unit($left) == '%') { + @if ($left == 'auto' or math.unit($left) == '%') { left: $left; } @else { left: f.pxToRem($left); @@ -49,24 +50,24 @@ } @mixin sized($width: auto, $height: auto) { - @if ($width == 'auto' or $width == 'inherit' or unit($width) == '%') { + @if ($width == 'auto' or $width == 'inherit' or math.unit($width) == '%') { width: $width ; } @else { width: f.pxToRem($width) ; } - @if ($height == 'auto' or $height == 'inherit' or unit($height) == '%') { + @if ($height == 'auto' or $height == 'inherit' or math.unit($height) == '%') { height: $height ; } @else { height: f.pxToRem($height); } } @mixin sizedImportant($width: auto, $height: auto) { - @if ($width == 'auto' or $width == 'inherit' or unit($width) == '%') { + @if ($width == 'auto' or $width == 'inherit' or math.unit($width) == '%') { width: $width !important ; } @else { width: f.pxToRem($width) !important ; } - @if ($height == 'auto' or $height == 'inherit' or unit($height) == '%') { + @if ($height == 'auto' or $height == 'inherit' or math.unit($height) == '%') { height: $height !important ; } @else { height: f.pxToRem($height) !important; diff --git a/src/assets/sass/mixins/_vendor.mixins.scss b/src/assets/sass/mixins/_vendor.mixins.scss index 7d76c4c..c2d6455 100644 --- a/src/assets/sass/mixins/_vendor.mixins.scss +++ b/src/assets/sass/mixins/_vendor.mixins.scss @@ -1,3 +1,5 @@ +@use "sass:string"; +@use "sass:list"; @use "@assets/sass/_utils.functions.scss" as f; /// Vendor prefixes. @@ -49,16 +51,16 @@ $vendor-values: ( @mixin vendored($property, $value) { // Determine if property should expand. - $expandProperty: index($vendor-properties, $property); + $expandProperty: list.index($vendor-properties, $property); // Determine if value should expand (and if so, add '-prefix-' placeholder). $expandValue: false; @each $x in $value { @each $y in $vendor-values { - @if $y == str-slice($x, 1, str-length($y)) { + @if $y == string.slice($x, 1, string.length($y)) { - $value: set-nth($value, index($value, $x), '-prefix-' + $x); + $value: list.set-nth($value, list.index($value, $x), '-prefix-' + $x); $expandValue: true; } } diff --git a/src/features/StreetcodePage/TimelineBlock/TimelineSwiper/TimelineSwiper.component.tsx b/src/features/StreetcodePage/TimelineBlock/TimelineSwiper/TimelineSwiper.component.tsx index cad9ed7..6d66bb0 100644 --- a/src/features/StreetcodePage/TimelineBlock/TimelineSwiper/TimelineSwiper.component.tsx +++ b/src/features/StreetcodePage/TimelineBlock/TimelineSwiper/TimelineSwiper.component.tsx @@ -1,4 +1,6 @@ -import 'swiper/scss'; +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; import './TimelineSwiper.styles.scss'; import { observer } from 'mobx-react-lite';