fix: Fix sass deprecations

diplodoc-platform · Nov 12, 2024 · 3bd94d3 · 3bd94d3
1 parent 447ee7b
commit 3bd94d3
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "react-dom": "^18.2.0",
     "react-svg-loader": "^3.0.0",
     "rtlcss": "^4.1.1",
-    "sass": "^1.69.5",
+    "sass": "^1.80.6",
     "sass-loader": "^16.0.2",
     "style-loader": "^3.3.3",
     "typescript": "^5.6.2",

diff --git a/src/components/App/App.scss b/src/components/App/App.scss
@@ -1,10 +1,11 @@
-@import '@diplodoc/transform/dist/css/yfm.css';
-@import '@diplodoc/components';
-@import '@diplodoc/components/themes/common';
-@import '@diplodoc/openapi-extension/runtime/styles';
-@import '../../styles/default.scss';
-@import '../../styles/typography.scss';
-@import '../../styles/overrides.scss';
+@use 'sass:meta';
+@use 'pkg:@diplodoc/transform/dist/css/yfm.css';
+@use 'pkg:@diplodoc/components';
+@use 'pkg:@diplodoc/components/themes/common';
+@use 'pkg:@diplodoc/openapi-extension/runtime/styles';
+@use '../../styles/default';
+@use '../../styles/typography';
+@use '../../styles/overrides';
 
 .App {
     margin: 0;

diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
@@ -1,4 +1,4 @@
-@import "../../styles/variables";
+@use '../../styles/variables';
 
 .Layout {
     &__header {
@@ -10,7 +10,7 @@
     &__body {
         display: flex;
         flex-flow: column;
-        min-height: calc(100vh - var(--dc-header-height, #{$headerHeight}));
+        min-height: calc(100vh - var(--dc-header-height, #{variables.$headerHeight}));
     }
 
     .pc-page-constructor & {

diff --git a/src/components/Search/Suggest.scss b/src/components/Search/Suggest.scss
@@ -1,4 +1,5 @@
-@import '../../styles/variables';
+@use 'sass:map';
+@use '../../styles/variables';
 
 .Suggest {
     display: flex;
@@ -40,7 +41,7 @@
         }
     }
 
-    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    @media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
         margin-right: 0;
         min-width: 36px;
         max-width: 36px;

diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -1,4 +1,5 @@
-@import './variables';
+@use 'sass:map';
+@use 'variables';
 
 @mixin text-size($name) {
     font-size: var(--yc-text-#{$name}-font-size);
@@ -12,8 +13,8 @@
 }
 
 @mixin fixAnchorPosition($offset: 0px) {
-    padding-top: calc(var(--dc-header-height, #{$headerHeight}));
-    margin-top: calc(#{$offset} - var(--dc-header-height, #{$headerHeight}));
+    padding-top: calc(var(--dc-header-height, #{variables.$headerHeight}));
+    margin-top: calc(#{$offset} - var(--dc-header-height, #{variables.$headerHeight}));
 }
 
 @mixin reset-link-style() {
@@ -46,7 +47,7 @@
     @include text-size(display-3);
     font-weight: 500;
 
-    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    @media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
         @include text-size(display-2);
     }
 }
@@ -90,25 +91,25 @@
 }
 
 @mixin desktop-only() {
-    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    @media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
         display: none;
     }
 }
 
 @mixin desktop-tablet-only() {
-    @media (max-width: map-get($screenBreakpoints, 'sm') - 1) {
+    @media (max-width: map.get(variables.$screenBreakpoints, 'sm') - 1) {
         display: none;
     }
 }
 
 @mixin mobile-tablet-only() {
-    @media (min-width: map-get($screenBreakpoints, 'md')) {
+    @media (min-width: map.get(variables.$screenBreakpoints, 'md')) {
         display: none;
     }
 }
 
 @mixin mobile-only() {
-    @media (min-width: map-get($screenBreakpoints, 'sm')) {
+    @media (min-width: map.get(variables.$screenBreakpoints, 'sm')) {
         display: none;
     }
 }
diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
@@ -1,4 +1,5 @@
-@import './variables';
+@use 'sass:map';
+@use 'variables';
 
 .dc-root_wide-format {
     .dc-doc-layout__right:has(.dc-subnavigation:only-child) {
@@ -18,8 +19,8 @@
     z-index: 120;
 
     & > .container-fluid {
-        padding-right: $desktopHPadding;
-        padding-left: $desktopHPadding;
+        padding-right: variables.$desktopHPadding;
+        padding-left: variables.$desktopHPadding;
     }
 }
 
@@ -33,8 +34,8 @@
     }
 
     &__navigation > .container-fluid {
-        padding-right: $desktopHPadding;
-        padding-left: $desktopHPadding;
+        padding-right: variables.$desktopHPadding;
+        padding-left: variables.$desktopHPadding;
         max-width: 1440px;
     }
 
@@ -90,7 +91,7 @@
     z-index: 101;
 }
 
-@media (max-width: map-get($screenBreakpoints, 'xxxl') - 1) {
+@media (max-width: map.get(variables.$screenBreakpoints, 'xxxl') - 1) {
     .dc-root_wide-format {
         .dc-doc-page {
             width: 100%;
@@ -105,7 +106,7 @@
     }
 }
 
-@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+@media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
     .dc-root_wide-format {
         & .dc-subnavigation {
             $wideFormatHorizontalPadding: 8px;
@@ -115,12 +116,12 @@
         }
 
         & .dc-doc-page__main {
-            padding-inline: #{$wideFormatHorizontalPadding};
+            padding-inline: #{variables.$wideFormatHorizontalPadding};
         }
     }
 }
 
-@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+@media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
     .pc-navigation {
         & > .container-fluid {
             padding-right: 0;
@@ -134,7 +135,7 @@
     }
 }
 
-@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+@media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
     .dc-toc {
         height: fit-content !important; /* stylelint-disable-line declaration-no-important */
     }
@@ -158,15 +159,15 @@
     }
 }
 
-@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+@media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
     .dc-root_document-page {
         .pc-Grid {
             max-width: 100%;
         }
     }
 }
 
-@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+@media (max-width: map.get(variables.$screenBreakpoints, 'md') - 1) {
     .dc-root_focused-search {
         .pc-navigation {
             .pc-desktop-navigation {
@@ -200,7 +201,7 @@
     }
 }
 
-@media (max-width: map-get($screenBreakpoints, 'sm')) {
+@media (max-width: map.get(variables.$screenBreakpoints, 'sm')) {
     .pc-block-base.pc-block-base.pc-block-base:first-child {
         margin-top: var(--pc-first-block-mobile-indent, 64px);
     }

diff --git a/src/styles/typography.scss b/src/styles/typography.scss
@@ -1,5 +1,5 @@
-@import './variables';
-@import './mixins';
+@use 'variables';
+@use 'mixins';
 
 body.g-root {
     font-feature-settings: 'liga', 'kern';
@@ -19,27 +19,27 @@ h6 {
 }
 
 h1 {
-    @include heading1();
+    @include mixins.heading1();
 }
 
 h2 {
-    @include heading2();
+    @include mixins.heading2();
 }
 
 h3 {
-    @include heading3();
+    @include mixins.heading3();
 }
 
 h4 {
-    @include heading4();
+    @include mixins.heading4();
 }
 
 h5 {
-    @include heading5();
+    @include mixins.heading5();
 }
 
 h6 {
-    @include heading6();
+    @include mixins.heading6();
 }
 
 p,
@@ -58,5 +58,5 @@ sup {
 }
 
 a {
-    @include link();
+    @include mixins.link();
 }