fix(*): sass mixed decls deprecation [KHCP-12750] (#2316)

Kong · Jul 30, 2024 · 86c5769 · 86c5769
1 parent d962c5c
commit 86c5769
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 90 deletions.
diff --git a/src/components/KAlert/KAlert.vue b/src/components/KAlert/KAlert.vue
@@ -122,10 +122,14 @@ const getAlertIcon = computed((): AlertIcon => {
 .k-alert {
   @include kAlertAppearance;
 
-  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
-  display: flex;
-  gap: var(--kui-space-30, $kui-space-30);
-  padding: var(--kui-space-50, $kui-space-50);
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+    display: flex;
+    gap: var(--kui-space-30, $kui-space-30);
+    padding: var(--kui-space-50, $kui-space-50);
+  }
 
   .alert-icon-container {
     :deep(#{$kongponentsKongIconSelector}) { // target the slotted icon

diff --git a/src/components/KBadge/KBadge.vue b/src/components/KBadge/KBadge.vue
@@ -129,7 +129,12 @@ $kBadgeMethodWidth: 85px;
 .k-badge {
   // apply info appearance by default (in case of invalid appearance)
   @include badgeAppearance;
-  @include badgeWrapper;
+
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    @include badgeWrapper;
+  }
 
   > div:not(.k-popover) {
     display: flex;

diff --git a/src/components/KButton/KButton.vue b/src/components/KButton/KButton.vue
@@ -153,22 +153,31 @@ export default {
 
 .k-button {
   @include kButtonPrimaryAppearance; // primary appearance is the default (in case of invalid appearance)
-  @include kButtonMediumSize; // medium size is the default (in case of invalid size)
-
-  align-items: center;
-  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
-  cursor: pointer;
-  display: inline-flex;
-  font-family: var(--kui-font-family-text, $kui-font-family-text);
-  font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-  justify-content: center;
-  // Remove tap color highlight on mobile Safari
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-decoration: none;
-  transition: background-color $kongponentsTransitionDurTimingFunc, color $kongponentsTransitionDurTimingFunc, border-color $kongponentsTransitionDurTimingFunc;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
+
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    @include kButtonMediumSize; // medium size is the default (in case of invalid size)
+  }
+
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    align-items: center;
+    border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--kui-font-family-text, $kui-font-family-text);
+    font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+    justify-content: center;
+    // Remove tap color highlight on mobile Safari
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    text-decoration: none;
+    transition: background-color $kongponentsTransitionDurTimingFunc, color $kongponentsTransitionDurTimingFunc, border-color $kongponentsTransitionDurTimingFunc;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
 
   &:focus, &:active, &:focus-visible {
     outline: none;

diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -590,8 +590,12 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
     .datetime-picker-trigger {
       @include inputDefaults;
 
-      cursor: pointer;
-      display: inline-flex;
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        cursor: pointer;
+        display: inline-flex;
+      }
 
       &:hover {
         @include inputHover;
@@ -603,7 +607,12 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
 
       &.disabled {
         @include inputDisabled;
-        pointer-events: none;
+
+        // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+        // stylelint-disable-next-line no-duplicate-selectors
+        & {
+          pointer-events: none;
+        }
 
         .datetime-picker-display {
           color: var(--kui-color-text-disabled, $kui-color-text-disabled) !important;
@@ -613,10 +622,14 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
       .datetime-picker-display {
         @include inputText;
 
-        display: flex;
-        flex-wrap: wrap;
-        pointer-events: none;
-        white-space: nowrap;
+        // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+        // stylelint-disable-next-line no-duplicate-selectors
+        & {
+          display: flex;
+          flex-wrap: wrap;
+          pointer-events: none;
+          white-space: nowrap;
+        }
 
         &.has-icon {
           // icon size + icon spacing
@@ -771,8 +784,12 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
   .vc-container {
     @include vCalendarCssVarsOverrides;
 
-    border: none;
-    width: 100%;
+    // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      border: none;
+      width: 100%;
+    }
 
     // generic button styles (mostly apples to arrow buttons and month and year (between the arrows))
     button {
@@ -865,7 +882,6 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
             border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
           }
         }
-
       }
 
       .vc-time-header {
@@ -897,10 +913,14 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
   .vc-popover-content {
     @include vCalendarCssVarsOverrides;
 
-    background-color: var(--kui-color-background, $kui-color-background);
-    border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
-    box-shadow: var(--kui-shadow, $kui-shadow);
-    width: 100%;
+    // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      background-color: var(--kui-color-background, $kui-color-background);
+      border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+      box-shadow: var(--kui-shadow, $kui-shadow);
+      width: 100%;
+    }
 
     .vc-popover-caret {
       display: none;

diff --git a/src/components/KFileUpload/KFileUpload.vue b/src/components/KFileUpload/KFileUpload.vue
@@ -307,16 +307,25 @@ $kFileUploadInputPaddingY: var(--kui-space-40, $kui-space-40); // corresponds to
 
     .file-upload-input-text {
       @include inputText;
-      @include truncate;
-
-      left: 0;
-      margin-left: $kFileUploadInputPaddingX;
-      margin-top: $kFileUploadInputPaddingY;
-      max-width: 90%;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      z-index: 1;
+
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        @include truncate;
+      }
+
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        left: 0;
+        margin-left: $kFileUploadInputPaddingX;
+        margin-top: $kFileUploadInputPaddingY;
+        max-width: 90%;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        z-index: 1;
+      }
 
       &.placeholder {
         color: var(--kui-color-text-neutral, $kui-color-text-neutral);

diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
@@ -321,9 +321,13 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
   .help-text {
     @include inputHelpText;
 
-    // reset default margin from browser
-    margin: 0;
-    margin-top: var(--kui-space-40, $kui-space-40) !important; // need important to override some overrides of default p margin in other components
+    // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      // reset default margin from browser
+      margin: 0;
+      margin-top: var(--kui-space-40, $kui-space-40) !important; // need important to override some overrides of default p margin in other components
+    }
   }
 
   // slots styles
@@ -348,7 +352,11 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
       :deep([role="button"]:not(.k-button)), :deep(button:not(.k-button)) {
         @include defaultButtonReset;
 
-        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+        // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+        // stylelint-disable-next-line no-duplicate-selectors
+        & {
+          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+        }
 
         &:not([disabled]) {
           border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
@@ -420,7 +428,12 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
     // by default type="file" is read-only so we need to apply default input styles to override read-only styles
     &[type="file"] {
       @include inputDefaults;
-      cursor: pointer;
+
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        cursor: pointer;
+      }
 
       &:hover {
         @include inputHover;

diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
@@ -1072,12 +1072,16 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
   .expanded-selection-empty {
     @include inputText;
 
-    color: var(--kui-color-text-neutral, $kui-color-text-neutral); // override mixin with placeholder text color
-    font-size: var(--kui-font-size-30, $kui-font-size-30); // override mixin with placeholder font size
-    padding-bottom: $kMultiselectInputPaddingY;
-    padding-left: $kMultiselectInputPaddingX;
-    padding-right: $kMultiselectSelectionsPaddingRight;
-    padding-top: $kMultiselectInputPaddingY;
+    // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      color: var(--kui-color-text-neutral, $kui-color-text-neutral); // override mixin with placeholder text color
+      font-size: var(--kui-font-size-30, $kui-font-size-30); // override mixin with placeholder font size
+      padding-bottom: $kMultiselectInputPaddingY;
+      padding-left: $kMultiselectInputPaddingX;
+      padding-right: $kMultiselectSelectionsPaddingRight;
+      padding-top: $kMultiselectInputPaddingY;
+    }
   }
 
   .selection-badges-container {
@@ -1133,10 +1137,14 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
   .multiselect-trigger {
     @include inputBoxShadow;
 
-    cursor: pointer;
-    display: inline-block;
-    position: relative;
-    width: 100%;
+    // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      cursor: pointer;
+      display: inline-block;
+      position: relative;
+      width: 100%;
+    }
 
     &.hovered {
       @include inputHover;
@@ -1240,9 +1248,13 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
   .help-text {
     @include inputHelpText;
 
-    // reset default margin from browser
-    margin: 0;
-    margin-top: var(--kui-space-40, $kui-space-40) !important; // need important to override some overrides of default p margin in other components
+    // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      // reset default margin from browser
+      margin: 0;
+      margin-top: var(--kui-space-40, $kui-space-40) !important; // need important to override some overrides of default p margin in other components
+    }
   }
 
   &.multiselect-error {

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
@@ -409,13 +409,17 @@ $kPopCaretOffset: 16px;
       .popover-close-button {
         @include defaultButtonReset;
 
-        border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-        margin: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
-        outline: none;
-        position: absolute;
-        right: 0;
-        top: 0;
+        // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+        // stylelint-disable-next-line no-duplicate-selectors
+        & {
+          border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+          margin: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
+          outline: none;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
 
         &:hover, &:focus {
           color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
@@ -469,7 +473,11 @@ $kPopCaretOffset: 16px;
     &[x-placement^="top"] .popover-container {
       @include kPopCaret;
 
-      margin-bottom: var(--kui-space-60, $kui-space-60);
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        margin-bottom: var(--kui-space-60, $kui-space-60);
+      }
 
       &:after, &:before {
         left: 50%;
@@ -489,7 +497,11 @@ $kPopCaretOffset: 16px;
     &[x-placement^="right"] .popover-container {
       @include kPopCaret;
 
-      margin-left: var(--kui-space-60, $kui-space-60);
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        margin-left: var(--kui-space-60, $kui-space-60);
+      }
 
       &:after, &:before {
         right: 100%;
@@ -510,7 +522,11 @@ $kPopCaretOffset: 16px;
     &[x-placement^="bottom"] .popover-container {
       @include kPopCaret;
 
-      margin-top: var(--kui-space-50, $kui-space-50);
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        margin-top: var(--kui-space-50, $kui-space-50);
+      }
 
       &:after, &:before {
         bottom: 100%;
@@ -530,7 +546,11 @@ $kPopCaretOffset: 16px;
     &[x-placement^="left"] .popover-container {
       @include kPopCaret;
 
-      margin-right: var(--kui-space-60, $kui-space-60);
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        margin-right: var(--kui-space-60, $kui-space-60);
+      }
 
       &:after, &:before {
         left: 100%;