Deprecation Warning: Sass @import rules (#9294)

Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Jan 12, 2025 · 31d37e4 · 31d37e4
1 parent 88aeeb7
commit 31d37e4
Show file tree

Hide file tree

Showing 63 changed files with 209 additions and 115 deletions.
diff --git a/packages/survey-core/src/boolean-checkbox.scss b/packages/survey-core/src/boolean-checkbox.scss
@@ -1,4 +1,4 @@
-@import "./modern/constants.scss";
+@use "./modern/constants.scss";
 .sv-boolean__decorator {
   border-radius: 2px;
 }

diff --git a/packages/survey-core/src/common-styles/common-styles.scss b/packages/survey-core/src/common-styles/common-styles.scss
@@ -1,13 +1,13 @@
-@import "./sv-actionbar.scss";
-@import "./sv-drag-drop.scss";
-@import "./sv-popup.scss";
-@import "./sv-buttongroup.scss";
-@import "./sv-visuallyhidden.scss";
-@import "./sv-hidden.scss";
-@import "./sv-titleactions.scss";
-@import "./window.scss";
-@import "./sv-brand-info.scss";
-@import "./sv-ranking.scss";
-@import "./sv-list.scss";
-@import "./sv-save-data.scss";
-@import "./sv-string-viewer.scss";
+@use "./sv-actionbar.scss";
+@use "./sv-drag-drop.scss";
+@use "./sv-popup.scss";
+@use "./sv-buttongroup.scss";
+@use "./sv-visuallyhidden.scss";
+@use "./sv-hidden.scss";
+@use "./sv-titleactions.scss";
+@use "./window.scss";
+@use "./sv-brand-info.scss";
+@use "./sv-ranking.scss";
+@use "./sv-list.scss";
+@use "./sv-save-data.scss";
+@use "./sv-string-viewer.scss";
diff --git a/packages/survey-core/src/common-styles/sv-actionbar.scss b/packages/survey-core/src/common-styles/sv-actionbar.scss
@@ -1,4 +1,4 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
 
 .sv-action-bar {
   display: flex;

diff --git a/packages/survey-core/src/common-styles/sv-brand-info.scss b/packages/survey-core/src/common-styles/sv-brand-info.scss
@@ -1,3 +1,5 @@
+@use "../defaultV2-theme/variables.scss" as *;
+
 sv-brand-info {}
 
 sv-brand-info,

diff --git a/packages/survey-core/src/common-styles/sv-buttongroup.scss b/packages/survey-core/src/common-styles/sv-buttongroup.scss
@@ -1,4 +1,4 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
 
 .sv-button-group {
   display: flex;

diff --git a/packages/survey-core/src/common-styles/sv-drag-drop.scss b/packages/survey-core/src/common-styles/sv-drag-drop.scss
@@ -1,4 +1,4 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
 
 .sv-dragged-element-shortcut {
   height: calcSize(3);

diff --git a/packages/survey-core/src/common-styles/sv-list.scss b/packages/survey-core/src/common-styles/sv-list.scss
@@ -1,4 +1,5 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
+@use "../defaultV2-theme/mixins.scss" as mixins;
 
 .sv-list {
   padding: 0;
@@ -68,7 +69,7 @@
   outline: none;
 
   .sv-list__item-body {
-    @include borderLight;
+    @include mixins.borderLight;
     border-radius: calcCornerRadius(1);
     padding-block: calcSize(0.75);
     padding-inline-end: calcSize(7.75);

diff --git a/packages/survey-core/src/common-styles/sv-navigation-toc.scss b/packages/survey-core/src/common-styles/sv-navigation-toc.scss
@@ -1,4 +1,4 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
 
 .sv_progress-toc {
   padding: calcSize(1);

diff --git a/packages/survey-core/src/common-styles/sv-popup.scss b/packages/survey-core/src/common-styles/sv-popup.scss
@@ -1,4 +1,4 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
 
 $popup-overlay-height: var(--sv-popup-overlay-height, 100vh);
 $ease-out: cubic-bezier(0, 0, 0.58, 1);

diff --git a/packages/survey-core/src/common-styles/sv-progress-buttons.scss b/packages/survey-core/src/common-styles/sv-progress-buttons.scss
@@ -1,4 +1,4 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
 
 .sv_progress-buttons__container-center {
   text-align: center;

diff --git a/packages/survey-core/src/common-styles/sv-ranking.scss b/packages/survey-core/src/common-styles/sv-ranking.scss
@@ -1,5 +1,5 @@
-@import "../defaultV2-theme/variables.scss";
-@import "../defaultV2-theme/mixins.scss";
+@use "../defaultV2-theme/variables.scss" as *;
+@use "../defaultV2-theme/mixins.scss" as mixins;
 
 .sv-ranking {
   outline: none;
@@ -413,7 +413,7 @@
 
 .sv-ranking__container-placeholder {
   color: var(--sjs-font-questiondescription-color, #{$foreground-dim-light});
-  @include defaultFont;
+  @include mixins.defaultFont;
   white-space: normal;
   display: flex;
   justify-content: center;

diff --git a/packages/survey-core/src/common-styles/sv-save-data.scss b/packages/survey-core/src/common-styles/sv-save-data.scss
@@ -1,4 +1,4 @@
-@import "../defaultV2-theme/variables.scss";
+@use "../defaultV2-theme/variables.scss" as *;
 
 .sv-save-data_root {
   position: fixed;

diff --git a/packages/survey-core/src/common-styles/window.scss b/packages/survey-core/src/common-styles/window.scss
@@ -1,6 +1,6 @@
-@import "../defaultV2-theme/variables.scss";
-@import "../defaultV2-theme/mixins.scss";
-@import "../defaultV2-theme/blocks/mixins.scss";
+@use "../defaultV2-theme/variables.scss" as *;
+@use "../defaultV2-theme/mixins.scss" as mixins;
+@use "../defaultV2-theme/blocks/mixins.scss" as blocksMixins;
 
 .sv_window {
     position: fixed;
@@ -17,7 +17,7 @@
     background: $background-dim;
     width: calc(100% - calcSize(4)) !important;
 
-    @include scrollRules;
+    @include blocksMixins.scrollRules;
 }
 
 .sv_window_root-content {
@@ -67,7 +67,7 @@
 
 .sv_window_header_title_collapsed {
     color: $foreground-dim;
-    @include defaultBold;
+    @include mixins.defaultBold;
     flex: 1;
     display: flex;
     justify-content: flex-start;
@@ -77,7 +77,7 @@
 .sv_window_header_description {
     color: $font-questiondescription-color;
     font-feature-settings: 'salt' on;
-    @include defaultFont;
+    @include mixins.defaultFont;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/header.scss b/packages/survey-core/src/defaultV2-theme/blocks/header.scss
@@ -1,3 +1,6 @@
+@use "../variables.scss" as *;
+@use "mixins.scss" as mixins;
+
 .sv-header {
   position: relative;
   background-color: $header-backcolor;
@@ -126,7 +129,7 @@
 }
 
 .sv-header__title .sd-title {
-  @include header_title;
+  @include mixins.header_title;
   color: $font-headertitle-color;
   font-family: $font-headertitle-family;
   font-weight: $font-headertitle-weight;
@@ -150,7 +153,7 @@
 }
 
 .sv-header__description .sd-description {
-  @include header_description;
+  @include mixins.header_description;
   color: $font-headerdescription-color;
   font-family: $font-headerdescription-family;
   font-weight: $font-headerdescription-weight;
@@ -178,7 +181,7 @@
   }
 
   .sv-header__description .sd-description {
-    @include header_description;
+    @include mixins.header_description;
     color: $font-pagedescription-color;
   }
 }
diff --git a/packages/survey-core/src/defaultV2-theme/blocks/mixins.scss b/packages/survey-core/src/defaultV2-theme/blocks/mixins.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 @mixin page_title {
   --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
   font-family: $font-pagetitle-family;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-action.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-action.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-action {
   appearance: none;
   border: none;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-body.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-body.scss
@@ -1,4 +1,5 @@
-@import "../defaultV2-theme/mixins.scss";
+@use "../defaultV2-theme/variables.scss" as *;
+@use "../defaultV2-theme/mixins.scss" as mixins;
 
 .sd-body {
   width: 100%;
@@ -114,7 +115,7 @@
 
 .sd-body--empty,
 .sd-body--loading {
-  @include articleHtml;
+  @include mixins.articleHtml;
 }
 
 .sd-root_background-image {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-boolean.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-boolean.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-boolean {
   display: flex;
   width: max-content;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-button.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-button.scss
@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables.scss" as *;
 
 .sd-btn {
   appearance: none;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-checkbox.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-checkbox.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-checkbox__decorator {
   border-radius: calcCornerRadius(0.5);
 }

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-collapsed-element.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-collapsed-element.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-element--expanded,
 .sd-element--collapsed {
   &>.sd-element__header {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-comment.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-comment.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-comment {
   display: block;
   height: auto;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-completedpage.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-completedpage.scss
@@ -1,4 +1,5 @@
-@import "../defaultV2-theme/mixins.scss";
+@use "../defaultV2-theme/variables.scss" as *;
+@use "../defaultV2-theme/mixins.scss" as mixins;
 
 .sd-completedpage,
 .sd-completed-before-page {
@@ -8,7 +9,7 @@
   box-sizing: border-box;
   text-align: center;
   height: auto;
-  @include articleHtml;
+  @include mixins.articleHtml;
 }
 
 .sd-completedpage:before,

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-complex-element.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-complex-element.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-element--complex.sd-element--with-frame {
   padding-top: 0;
 }

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-context-btn.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-context-btn.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-context-btn {
   background-color: $background;
   padding: calcSize(1.5);

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-description.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-description.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-description {
   font-style: normal;
   font-family: $font-questiondescription-family;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-dropdown.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -1,3 +1,6 @@
+@use "../variables.scss" as *;
+@use "../mixins.scss" as mixins;
+
 .sv-dropdown_select-wrapper {
   position: relative;
 }
@@ -192,7 +195,7 @@
 
   .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
     .sv-list__item-body {
-      @include borderLight;
+      @include mixins.borderLight;
       padding-inline-end: calcSize(1.75);
       padding-block: calcSize(1.25);
       padding-inline-start: calcSize(1.75);

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-element.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-element.scss
@@ -1,3 +1,6 @@
+@use "../variables.scss" as *;
+@use "mixins.scss" as mixins;
+
 .sd-element {
   padding-left: var(--sv-element-add-padding-left, 0px);
   padding-right: var(--sv-element-add-padding-right, 0px);
@@ -104,7 +107,7 @@
 
 .sd-element__title--num-inline {
   .sd-element__num {
-    @include num_inline();
+    @include mixins.num_inline();
   }
 }
 

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-error.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-error.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-error {
   display: block;
   padding: calcSize(1) calcSize(1.5);

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-expression.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-expression.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-expression {
   color: $font-questiontitle-color;
   font-size: calcFontSize(1);

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-file.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-file.scss
@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables.scss" as *;
 
 .sd-file {
   position: relative;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-html.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-html.scss
@@ -1,10 +1,12 @@
-@import "../defaultV2-theme/mixins.scss";
+@use "../variables.scss" as *;
+@use "../mixins.scss" as mixins;
+
 .sd-html {
   white-space: initial;
 }
 
 .sd-html {
-  @include articleHtml;
+  @include mixins.articleHtml;
 }
 
 .sd-html--nested {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-image.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-image.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-image__image {
   display: block;
   max-width: 100%;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-imagepicker.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-imagepicker.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-imagepicker {
   display: flex;
   flex-wrap: wrap;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-input.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-input.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-input {
   @include useEditorFontSize;
   -webkit-appearance: none;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-item.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-item.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-item {
   display: flex;
   padding: calcSize(1.5) 0;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-list.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-list.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-list {
   padding-right: calcSize(0.5);
   padding-left: calcSize(0.5);

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-loading-indicator.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-loading-indicator.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 @keyframes rotationAnimation {
   from {
     rotate: 0deg;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-matrix.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-matrix.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-matrix {
   fieldset {
     border: none;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-matrixdynamic.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-matrixdynamic.scss
@@ -1,3 +1,5 @@
+@use "../variables.scss" as *;
+
 .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
   position: sticky;
   left: calcSize(-3);

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-multipletext.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-multipletext.scss
@@ -1,4 +1,4 @@
-@import "../variables.scss";
+@use "../variables.scss" as *;
 
 .sd-multipletext {
   width: 100%;