Обновление stylelint

### Изменено:
- Обновлены правила stylelint
- перенос строки в стиле LF
- функции в scss переписаны под модульную систему

package.json

@@ -25,10 +25,12 @@
     "gulp-svgstore": "latest",
     "pixel-glass": "github:makehtml/pixel-glass",
     "postcss-csso": "latest",
+    "postcss-lit": "latest",
     "postcss-scss": "latest",
     "stylelint": "latest",
     "stylelint-config-recess-order": "latest",
     "stylelint-config-standard": "latest",
+    "stylelint-config-standard-scss": "latest",
     "stylelint-scss": "latest"
   },
   "browserslist": [
@@ -38,9 +40,9 @@
   "scripts": {
     "build": "gulp build",
     "start": "gulp start",
-    "lint:styles": "stylelint 'src/sass/**/*.scss' --config .stylelintrc.json",
+    "lint:styles": "stylelint src/sass/**/*.scss --config .stylelintrc.json",
     "lint:templates": "djlint src/templates --lint --configuration .djlintrc",
-    "fix:styles": "stylelint 'src/sass/**/*.scss' --config .stylelintrc.json --fix",
+    "fix:styles": "stylelint src/sass/**/*.scss --config .stylelintrc.json --fix",
     "lint": "npm run lint:styles && npm run lint:templates"
   },
   "repository": {

src/sass/blocks/footer.scss

@@ -5,4 +5,5 @@
   padding-bottom: 1rem;
   background-color: var(--color-tertiary);
 }
+
 .footer__wrap { @include container; }

src/sass/blocks/form.scss

@@ -26,6 +26,7 @@
 .form__checkbox { @include form-checkbox; }
 .form__radio { @include form-radio; }
 
+/* stylelint-disable no-descending-specificity */
 .form__control {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -35,6 +36,7 @@
   &--floating { @include form-floating; }
   &--checkbox { @include form-checkbox-wrap; }
 }
+/* stylelint-enable no-descending-specificity */
 
 .form__error-feedback {
   width: 100%;

src/sass/common/base.scss

@@ -1,4 +1,6 @@
 @use "sass:list";
+@use "sass:color";
+@use "sass:map";
 @use "../mixins/media.scss" as *;
 @use "../common/vars.scss" as *;
 
@@ -9,27 +11,27 @@
   --color-primary: #{$color-primary};
   --color-secondary: #{$color-secondary};
   --color-tertiary: #{$color-tertiary};
-  --color-hover: #{darken($color-primary, 15%)};
-  --color-active: #{lighten($color-primary, 15%)};
+  --color-hover: #{color.adjust($color-primary, $lightness: -15%)};
+  --color-active: #{color.adjust($color-primary, $lightness: 15%)};
 }
 
 html { height: 100%; }
 
 body {
   display: grid;
   grid-template-rows: min-content 1fr min-content;
-  min-width: map-get($widths, xs);
+  min-width: map.get($widths, xs);
   min-height: 100%;
   margin: 0;
   font: list.slash($font-size, $line-height) $font-family;
   color: $color-base;
   letter-spacing: $letter-spacing;
   background-color: $color-bg;
 
-  @include media-min(sm) { min-width: map-get($widths, sm); }
-  @include media-min(md) { min-width: map-get($widths, md); }
-  @include media-min(lg) { min-width: map-get($widths, lg); }
-  @include media-min(xl) { min-width: map-get($widths, xl); }
+  @include media-min(sm) { min-width: map.get($widths, sm); }
+  @include media-min(md) { min-width: map.get($widths, md); }
+  @include media-min(lg) { min-width: map.get($widths, lg); }
+  @include media-min(xl) { min-width: map.get($widths, xl); }
 }
 
 a {

src/sass/common/vars.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Шрифты
 $font-family: -apple-system, system-ui, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
 $font-size: 14px;
@@ -13,8 +15,8 @@ $color-primary: #fb565a;
 $color-secondary: #00ca74;
 $color-tertiary: #efc84a;
 $color-active-control: #c1c1c1;
-$color-hover: darken($color-primary, 15%);
-$color-active: lighten($color-primary, 15%);
+$color-hover: color.adjust($color-primary, $lightness: -15%);
+$color-active: color.adjust($color-primary, $lightness: 15%);
 
 // Размеры
 $widths: (

src/sass/mixins/form.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:string";
 @use "./btn.scss" as *;
 @use "./media.scss" as *;
 
@@ -26,15 +28,15 @@ $escape-chars: (
     @return false;
   }
 
-  $icon-map: map-get($svg-icons, $name);
+  $icon-map: map.get($svg-icons, $name);
   $escaped-string: "";
-  $unquote-icon: unquote($icon-map);
+  $unquote-icon: string.unquote($icon-map);
 
   @for $i from 1 through str-length($unquote-icon) {
-    $char: str-slice($unquote-icon, $i, $i);
-    $char-lookup: map-get($escape-chars, $char);
+    $char: string.slice($unquote-icon, $i, $i);
+    $char-lookup: map.get($escape-chars, $char);
 
-    @if $char-lookup != null {
+    @if not $char-lookup {
       $char: $char-lookup;
     }
 
@@ -122,7 +124,7 @@ $escape-chars: (
   &:focus:autofill {
     color: green;
     -webkit-text-fill-color: var(--theme-fg-alt);
-    box-shadow: 0 0 0 1000px var(--theme-bg) inset;
+    box-shadow:  0 0 1000px var(--theme-bg) inset;
   }
 
   &:valid:not(:placeholder-shown) { border-color: var(--t-success) !important; }
@@ -159,7 +161,7 @@ $escape-chars: (
   > select,
   > textarea {
     &:focus,
-    &:not(:placeholder-shown) { ~ label { transform: scale(.65) translateX(.25rem) translateY(calc(-100% - .7rem)); } }
+    &:not(:placeholder-shown) { ~ label { transform: scale(.65) translateX(.25rem) translateY(calc(-100% - .7rem)); } } /* stylelint-disable-line no-descending-specificity */
 
     // &:valid { border-color: var(--color-primary-active); }
     &::placeholder { color: transparent; }

src/sass/mixins/layout.scss

@@ -1,26 +1,27 @@
+@use "sass:map";
 @use "../common/vars.scss" as *;
 @use "./media.scss" as *;
 
 @mixin container {
   box-sizing: border-box;
-  width: map-get($widths, sm);
+  width: map.get($widths, sm);
   padding-right: $gap-sm;
   padding-left: $gap-sm;
   margin-right: auto;
   margin-left: auto;
 
   @include media-min(md) {
     width: 90%;
-    min-width: map-get($widths, md);
+    min-width: map.get($widths, md);
     padding-right: $gap-md;
     padding-left: $gap-md;
   }
   @include media-min(lg) {
-    min-width: map-get($widths, lg);
+    min-width: map.get($widths, lg);
     padding-right: $gap-lg;
     padding-left: $gap-lg;
   }
   @include media-min(xl) {
-    width: map-get($widths, xl);
+    width: map.get($widths, xl);
   }
 }

src/sass/mixins/media.scss

@@ -1,12 +1,13 @@
+@use "sass:map";
 @use "../common/vars.scss" as *;
 
 @function min-width($width-name) {
-  $width: map-get($widths, $width-name);
+  $width: map.get($widths, $width-name);
 
   @return "(min-width: #{$width})";
 }
 @function max-width($width-name) {
-  $width: map-get($widths, $width-name);
+  $width: map.get($widths, $width-name);
 
   @return "(max-width: #{$width - 1})";
 }