fix(*): sass mixed decls deprecation [KHCP-12715] (#1522)

* chore(deps): bump sass [KHCP-12715] * fix(*): sass mixed decls deprecation [KHCP-12715] * fix: stylelint:fix * fix(entities-routes): misc style fixes [KHCP-12715]
Kong · Jul 31, 2024 · 77da980 · 77da980
1 parent 960e2e7
commit 77da980
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 116 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "postcss-html": "^1.6.0",
     "rimraf": "^5.0.7",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.71.1",
+    "sass": "^1.77.8",
     "stylelint": "^16.2.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended-scss": "^14.0.0",

diff --git a/packages/analytics/analytics-chart/src/components/TopNTable.vue b/packages/analytics/analytics-chart/src/components/TopNTable.vue
@@ -251,7 +251,11 @@ const getValue = (record: AnalyticsExploreRecord): string => {
   :deep(.card-content) {
     overflow-y: auto;
 
-    @include scrollbarBase;
+    // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      @include scrollbarBase;
+    }
   }
 
   .top-n-table {

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue
@@ -242,7 +242,11 @@ const positionToClass = (position: `${ChartLegendPosition}`) => {
   overflow-y: auto;
   padding-left: 0;
 
-  @include scrollbarBase;
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    @include scrollbarBase;
+  }
 
   &.vertical {
     flex-direction: column;

diff --git a/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue b/packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue
@@ -251,7 +251,11 @@ ul.tooltip {
   overflow-y: auto;
   padding-left: 0px;
 
-  @include scrollbarBase;
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    @include scrollbarBase;
+  }
 
   li {
     display: flex;

diff --git a/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue b/packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue
@@ -568,7 +568,11 @@ const handleChartClick = () => {
 .chart-container {
   overflow: auto;
 
-  @include scrollbarBase;
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    @include scrollbarBase;
+  }
 
   .chart-body {
     height: 100%;

diff --git a/packages/core/app-layout/src/styles/variables/_app-sidebar.scss b/packages/core/app-layout/src/styles/variables/_app-sidebar.scss
@@ -23,10 +23,14 @@ $scrollbar-background-color: $kui-color-background-transparent;
     background: $kui-color-background-transparent; // Hide the scrollbar until hovered
   }
 
-  // Standard version (Firefox only for now) - always include
-  scrollbar-color: $kui-color-background-transparent $kui-color-background-transparent;
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    // Standard version (Firefox only for now) - always include
+    scrollbar-color: $kui-color-background-transparent $kui-color-background-transparent;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+  }
 }
 
 @mixin scrollbarVisible(
@@ -40,8 +44,12 @@ $scrollbar-background-color: $kui-color-background-transparent;
     background: $background-color; // update the color to be visible
   }
 
-  // Standard version (Firefox only for now) - always include
-  scrollbar-color: $foreground-color $background-color;
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
+  // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+  // stylelint-disable-next-line no-duplicate-selectors
+  & {
+    // Standard version (Firefox only for now) - always include
+    scrollbar-color: $foreground-color $background-color;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+  }
 }
diff --git a/packages/entities/entities-routes/src/styles/_mixins.scss b/packages/entities/entities-routes/src/styles/_mixins.scss
@@ -1,13 +1,13 @@
 @mixin hr() {
   border: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
-  margin-bottom: $kui_space_60;
+  margin-bottom: $kui-space-60;
 }
 
 @mixin routing-rule() {
   &-container {
     &:not(:first-of-type) {
-      margin-top: $kui_space_80;
+      margin-top: $kui-space-80;
     }
 
     hr {
@@ -17,56 +17,43 @@
 
   &-input {
     align-items: center;
-    column-gap: $kui_space_100;
+    column-gap: $kui-space-100;
     display: flex;
 
     .k-input {
       width: 100%;
     }
 
     &:not(:first-of-type) {
-      margin-top: $kui_space_60;
+      margin-top: $kui-space-60;
     }
 
     .methods-input {
       &-container {
         display: flex;
         flex-wrap: wrap;
-        gap: $kui_space_50;
+        gap: $kui-space-50;
       }
 
-      display: flex;
-      flex-wrap: wrap;
-      gap: $kui_space_20;
+      // fixing mixed-decls deprecation: https://sass-lang.com/d/mixed-decls
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        display: flex;
+        flex-wrap: wrap;
+        gap: $kui-space-20;
+      }
 
       // stylelint-disable-next-line selector-pseudo-class-no-unknown
       :deep(label.k-switch) {
         margin: 0 !important;
       }
-
-      // stylelint-disable-next-line selector-pseudo-class-no-unknown
-      :deep(.k-button) {
-        margin-left: $kui_space_50 !important;
-
-        &.remove-button {
-          svg path {
-            fill: $kui_color_border_neutral_weak !important;
-          }
-
-          &:hover {
-            svg path {
-              fill: $kui_color_border_danger_weak !important;
-            }
-          }
-        }
-      }
     }
   }
 }
 
 @mixin routing-rules-selector() {
   &-container {
-    margin-top: $kui_space_80;
+    margin-top: $kui-space-80;
 
     hr {
       @include hr;
@@ -75,8 +62,8 @@
 
   &-options {
     align-items: center;
-    background-color: $kui_color_background_primary_weakest;
-    border: 1px solid $kui_color_border_primary_weak;
+    background-color: $kui-color-background-primary-weakest;
+    border: 1px solid $kui-color-border-primary-weak;
     border-radius: 30px;
     display: flex;
     padding: 0 6px;
@@ -97,17 +84,17 @@
       border: 1px solid transparent;
       border-radius: 19px;
       box-shadow: none;
-      color: $kui_color_text_primary_strong;
+      color: $kui-color-text-primary-strong;
       cursor: pointer;
-      font-size: $kui_font_size_40;
+      font-size: $kui-font-size-40;
       font-weight: 600;
       margin: 0;
-      margin-right: $kui_space_20;
-      padding: $kui_space_20 10px;
+      margin-right: $kui-space-20;
+      padding: $kui-space-20 10px;
       transition: box-shadow 0.2s ease;
 
       &.is-selected {
-        color: $kui_color_border_primary_weaker;
+        color: $kui-color-text-primary-weak;
         pointer-events: none;
         text-decoration: line-through;
       }