From 0d8f92b706cd3a4f3a93ff36aa77371e89ac581e Mon Sep 17 00:00:00 2001 From: Balaji-Sridharan_NYULH Date: Sun, 24 Nov 2024 17:23:47 +0530 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20SCSS=20Lint=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change @import to @use --- .../src/components/Examples/examples.scss | 8 ++- .../{breakpoint.scss => helpers.scss} | 5 ++ docs-site/src/components/Examples/hero.scss | 2 + docs-site/src/components/Examples/style.scss | 17 ++---- src/stylesheets/datepicker.scss | 59 +++++++++++++++---- src/stylesheets/mixins.scss | 6 +- 6 files changed, 68 insertions(+), 29 deletions(-) rename docs-site/src/components/Examples/{breakpoint.scss => helpers.scss} (58%) diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss index 05734e951..9c38c04ce 100644 --- 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/docs-site/src/components/Examples/breakpoint.scss b/docs-site/src/components/Examples/helpers.scss similarity index 58% rename from docs-site/src/components/Examples/breakpoint.scss rename to docs-site/src/components/Examples/helpers.scss index 8627020aa..b0c92df44 100644 --- a/docs-site/src/components/Examples/breakpoint.scss +++ b/docs-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 index a642bc518..a9f34dd04 100644 --- 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 index 695a00ef8..b8d64a02b 100644 --- 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 index 8b08ba3cb..c68daaa9c 100644 --- 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" as *; +@use "mixins" 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 index 2fb5443ac..f9d02351c 100644 --- 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; } } From 0a9c69427dcef49adf6dd6b2862fd703ce58b580 Mon Sep 17 00:00:00 2001 From: Balaji-Sridharan_NYULH Date: Mon, 25 Nov 2024 14:48:04 +0530 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=A8=F0=9F=94=A7=20Add=20no-import?= =?UTF-8?q?=20config=20to=20.stylelintrc=20to=20use=20@use=20instead=20of?= =?UTF-8?q?=20@import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .stylelintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.stylelintrc.json b/.stylelintrc.json index c07d031f5..30fcc905c 100644 --- a/.stylelintrc.json +++ b/.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,