🚨 Fix SCSS Lint issues

- Change @import to @use
Hacker0x01 · Nov 24, 2024 · 4df7fff · 4df7fff
1 parent 30babb9
commit 4df7fff
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 29 deletions.
diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
@@ -1,7 +1,9 @@
+@use "helpers";
+
 .examples__navigation {
   display: none;
 
-  @include breakpoint(640px) {
+  @include helpers.breakpoint(640px) {
     width: 200px;
     float: left;
     display: block;
@@ -76,7 +78,7 @@
     overflow-x: auto;
     overflow-y: hidden;
 
-    @include breakpoint(768px) {
+    @include helpers.breakpoint(768px) {
       width: 70%;
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
@@ -98,7 +100,7 @@
   }
   &__preview {
     padding: 20px;
-    @include breakpoint(768px) {
+    @include helpers.breakpoint(768px) {
       width: 30%;
     }
     @media (max-width: 768px) {

diff --git a/...e/src/components/Examples/breakpoint.scss → ...site/src/components/Examples/helpers.scss b/...e/src/components/Examples/breakpoint.scss → ...site/src/components/Examples/helpers.scss
@@ -3,3 +3,8 @@
     @content;
   }
 }
+
+%container-styling {
+  max-width: 1100px;
+  margin: 0 auto;
+}
diff --git a/docs-site/src/components/Examples/hero.scss b/docs-site/src/components/Examples/hero.scss
@@ -1,3 +1,5 @@
+@use "helpers" as *;
+
 .hero {
   color: #fff;
   background-color: #216ba5;

diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss
@@ -1,13 +1,8 @@
-@import "reset";
-@import "higlight";
-@import "breakpoint";
-@import "hero";
-@import "examples";
-
-%container-styling {
-  max-width: 1100px;
-  margin: 0 auto;
-}
+@use "reset";
+@use "higlight";
+@use "helpers";
+@use "examples";
+@use "hero";
 
 html,
 body {
@@ -88,7 +83,7 @@ strong {
 }
 
 .row {
-  @include breakpoint(768px) {
+  @include helpers.breakpoint(768px) {
     display: flex;
   }
 }

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
-@import "variables.scss";
-@import "mixins.scss";
+@use "variables.scss" as *;
+@use "mixins.scss" as *;
 
 .react-datepicker-wrapper {
   display: inline-block;
@@ -362,17 +362,26 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
   &--keyboard-selected {
     border-radius: $datepicker__border-radius;
-    background-color: color.adjust($datepicker__selected-color, $lightness: 10%);
+    background-color: color.adjust(
+      $datepicker__selected-color,
+      $lightness: 10%
+    );
     color: #fff;
 
     &:hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 }
@@ -418,7 +427,10 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__highlighted-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__highlighted-color,
+        $lightness: -5%
+      );
     }
 
     &-custom-1 {
@@ -454,7 +466,10 @@ h2.react-datepicker__current-month {
     }
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__holidays-color, $lightness: -10%);
+      background-color: color.adjust(
+        $datepicker__holidays-color,
+        $lightness: -10%
+      );
     }
 
     &:hover .overlay {
@@ -471,17 +486,26 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
   &--keyboard-selected {
     border-radius: $datepicker__border-radius;
-    background-color: color.adjust($datepicker__selected-color, $lightness: 45%);
+    background-color: color.adjust(
+      $datepicker__selected-color,
+      $lightness: 45%
+    );
     color: rgb(0, 0, 0);
 
     &:not([aria-disabled="true"]):hover {
-      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
+      background-color: color.adjust(
+        $datepicker__selected-color,
+        $lightness: -5%
+      );
     }
   }
 
@@ -550,7 +574,10 @@ h2.react-datepicker__current-month {
 
     .react-datepicker__year-read-view--down-arrow,
     .react-datepicker__month-read-view--down-arrow {
-      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-top-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
   }
 
@@ -613,11 +640,17 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__muted-color;
 
     .react-datepicker__navigation--years-upcoming {
-      border-bottom-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-bottom-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
 
     .react-datepicker__navigation--years-previous {
-      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
+      border-top-color: color.adjust(
+        $datepicker__muted-color,
+        $lightness: -10%
+      );
     }
   }
 

diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
 %navigation-chevron {
-  border-color: $datepicker__muted-color;
+  border-color: variables.$datepicker__muted-color;
   border-style: solid;
   border-width: 3px 3px 0 0;
   content: "";
@@ -11,7 +13,7 @@
 
   &--disabled,
   &--disabled:hover {
-    border-color: $datepicker__navigation-disabled-color;
+    border-color: variables.$datepicker__navigation-disabled-color;
     cursor: default;
   }
 }