Merge pull request #5242 from qburst/fix/scss-lint-issues

🚨 Fix SCSS Lint issues - Change @import to @use

Author: martijnrusschen

.stylelintrc.json

@@ -5,6 +5,7 @@
 
   "rules": {
     "at-rule-no-unknown": null,
+    "at-rule-disallowed-list": ["import"],
     "scss/at-rule-no-unknown": true,
     "scss/dollar-variable-pattern": null,
     "scss/at-import-partial-extension": null,

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) {

docs-site/src/components/Examples/breakpoint.scss renamed to docs-site/src/components/Examples/helpers.scss

@@ -3,3 +3,8 @@
     @content;
   }
 }
+
+%container-styling {
+  max-width: 1100px;
+  margin: 0 auto;
+}

docs-site/src/components/Examples/hero.scss

@@ -1,3 +1,5 @@
+@use "helpers" as *;
+
 .hero {
   color: #fff;
   background-color: #216ba5;

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;
   }
 }

src/stylesheets/datepicker.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
-@import "variables.scss";
-@import "mixins.scss";
+@use "variables" as *;
+@use "mixins" as *;
 
 .react-datepicker-wrapper {
   display: inline-block;

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;
   }
 }