build: replaced import with use in scss files due deprecation (#676)

makhnatkin · web-flow · commit a4ad9b083d3c · 2025-03-11T17:19:59.000+01:00
diff --git a/demo/components/Playground.scss b/demo/components/Playground.scss
@@ -1,4 +1,4 @@
-@import '../../node_modules/@gravity-ui/uikit/styles/mixins';
+@use '@gravity-ui/uikit/styles/mixins' as uikit;
 
 .playground {
     max-width: 1296px;
@@ -12,15 +12,15 @@
 
         text-align: center;
 
-        @include text-header-2();
+        @include uikit.text-header-2();
     }
 
     &__version {
         position: absolute;
         right: 0;
         bottom: 0;
 
-        @include text-code-inline-1();
+        @include uikit.text-code-inline-1();
     }
 
     &__markup {
diff --git a/src/bundle/MarkupEditorView.scss b/src/bundle/MarkupEditorView.scss
@@ -1,4 +1,5 @@
-@import '~@gravity-ui/uikit/styles/mixins';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
+@use 'sass:color';
 
 $selection-color: rgba(98, 146, 255, 0.2);
 $toolbar-height: 28px;
@@ -44,7 +45,7 @@ $toolbar-height: 28px;
 
     .CodeMirror-selected,
     ::selection {
-        background: darken($selection-color, 50%);
+        background: color.adjust($selection-color, $lightness: -50%);
     }
 
     .CodeMirror {
@@ -53,7 +54,7 @@ $toolbar-height: 28px;
 
         color: var(--g-color-text-primary);
 
-        @include text-code-2();
+        @include uikit.text-code-2();
 
         .CodeMirror-cursor {
             border-color: var(--g-color-text-primary);
diff --git a/src/bundle/settings/index.scss b/src/bundle/settings/index.scss
@@ -1,4 +1,4 @@
-@import '~@gravity-ui/uikit/styles/mixins';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 .g-md-editor-settings {
     display: flex;
@@ -56,6 +56,6 @@
 
         transform: translateX(-50%);
 
-        @include text-code-inline-1();
+        @include uikit.text-code-inline-1();
     }
 }
diff --git a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.scss b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.scss
@@ -1,4 +1,4 @@
-@import '~@gravity-ui/uikit/styles/mixins';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 .g-md-toolbar-button-with-popup-menu {
     --g-button-icon-offset: 0px;
@@ -8,7 +8,7 @@
     &__menu-group {
         .g-menu__group-label {
             color: var(--g-color-text-hint);
-            @include text-body-1();
+            @include uikit.text-body-1();
         }
     }
 }
diff --git a/src/extensions/additional/FoldingHeading/plugins/folding.scss b/src/extensions/additional/FoldingHeading/plugins/folding.scss
@@ -1,4 +1,4 @@
-@use '~@gravity-ui/uikit/styles/mixins.scss' as uikit;
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 .pm-h-folding-hidden {
     display: none;
diff --git a/src/extensions/behavior/CommandMenu/component.scss b/src/extensions/behavior/CommandMenu/component.scss
@@ -1,4 +1,4 @@
-@import '~@gravity-ui/uikit/styles/mixins.scss';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 $itemHeight: 28px;
 $listWidth: 312px;
@@ -43,7 +43,7 @@ $listWidth: 312px;
     }
 
     &__item-title {
-        @include overflow-ellipsis();
+        @include uikit.overflow-ellipsis();
     }
 
     &__item-extra {
diff --git a/src/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggestComponent.scss b/src/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggestComponent.scss
@@ -1,4 +1,4 @@
-@import '~@gravity-ui/uikit/styles/mixins.scss';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 $itemHeight: 28px;
 $listWidth: 256px;
@@ -40,7 +40,7 @@ $listWidth: 256px;
         width: 20px;
         margin-right: 8px;
 
-        @include text-body-3();
+        @include uikit.text-body-3();
     }
 
     &__item-name {
@@ -63,6 +63,6 @@ $listWidth: 256px;
         border-radius: var(--g-border-radius-xs);
         background-color: var(--g-color-base-generic);
 
-        @include text-code-inline-1();
+        @include uikit.text-code-inline-1();
     }
 }
diff --git a/src/extensions/yfm/ImgSize/ImageWidget/view.scss b/src/extensions/yfm/ImgSize/ImageWidget/view.scss
@@ -1,4 +1,4 @@
-@import '~@gravity-ui/uikit/styles/mixins';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 .g-md-image-placeholder {
     display: inline-flex;
@@ -11,5 +11,5 @@
     border-radius: 4px;
     background-color: var(--g-color-base-simple-hover-solid);
 
-    @include text-body-2();
+    @include uikit.text-body-2();
 }
diff --git a/src/extensions/yfm/YfmCut/index.scss b/src/extensions/yfm/YfmCut/index.scss
@@ -1,8 +1,8 @@
-@use '../../../styles/mixins.scss';
+@use '../../../styles/mixins' as editor;
 
 .ProseMirror.yfm {
     .yfm-cut {
-        @include mixins.block-border-hover();
+        @include editor.block-border-hover();
 
         &.yfm-cut-active {
             border-color: var(--g-color-line-generic);
diff --git a/src/extensions/yfm/YfmTabs/index.scss b/src/extensions/yfm/YfmTabs/index.scss
@@ -1,8 +1,8 @@
-@use '../../../styles/mixins.scss';
+@use '../../../styles/mixins' as editor;
 
 .ProseMirror {
     .yfm-tabs {
-        @include mixins.block-border-hover();
+        @include editor.block-border-hover();
     }
     .g-md-yfm-tab {
         &__wrapper {
diff --git a/src/forms/base/FormRow.scss b/src/forms/base/FormRow.scss
@@ -1,4 +1,4 @@
-@import '~@gravity-ui/uikit/styles/mixins';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 .g-md-form-row {
     display: flex;
@@ -13,7 +13,7 @@
     }
 
     &__label-text {
-        @include overflow-ellipsis();
+        @include uikit.overflow-ellipsis();
     }
 
     &__label-help {
diff --git a/src/markup/codemirror/files-upload-plugin/widget.scss b/src/markup/codemirror/files-upload-plugin/widget.scss
@@ -1,4 +1,4 @@
-@use '~@gravity-ui/uikit/styles/mixins.scss';
+@use '~@gravity-ui/uikit/styles/mixins' as uikit;
 
 .g-md-upload-label {
     &__content {
@@ -9,7 +9,7 @@
 
     &__filename {
         display: inline-block;
-        @include mixins.max-text-width(128px);
+        @include uikit.max-text-width(128px);
     }
 }
 
diff --git a/src/styles/markdown copy.scss b/src/styles/markdown copy.scss
@@ -1,2 +1,2 @@
-@import './yc-file.scss';
-@import './yc-colors.scss';
+@use './yc-file.scss';
+@use './yc-colors.scss';
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
@@ -1,4 +1,3 @@
 @use '../extensions/yfm/Color/colors';
-
-@import './yc-file.scss';
-@import './yc-colors.scss';
+@use './yc-file.scss';
+@use './yc-colors.scss';
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,2 +1,2 @@
-@import './yc-file.scss';
-@import './yc-colors.scss';
+@use './yc-file.scss';
+@use './yc-colors.scss';

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '~@gravity-ui/uikit/styles/mixins';`
	`1`	`+@use '~@gravity-ui/uikit/styles/mixins' as uikit;`
`2`	`2`
`3`	`3`	`.g-md-editor-settings {`
`4`	`4`	`display: flex;`
`@@ -56,6 +56,6 @@`
`56`	`56`
`57`	`57`	`transform: translateX(-50%);`
`58`	`58`
`59`		`- @include text-code-inline-1();`
	`59`	`+ @include uikit.text-code-inline-1();`
`60`	`60`	`}`
`61`	`61`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@use '~@gravity-ui/uikit/styles/mixins.scss' as uikit;`
	`1`	`+@use '~@gravity-ui/uikit/styles/mixins' as uikit;`
`2`	`2`
`3`	`3`	`.pm-h-folding-hidden {`
`4`	`4`	`display: none;`