working stylelint

.stylelintrc.json

@@ -1,17 +1,12 @@
 {
   "extends": "stylelint-config-sass-guidelines",
-  "ignoreFiles": [
-    "node_modules/**/*",
-    "**/*.js",
-    "**/*.jsx"
-  ],
+  "ignoreFiles": ["node_modules/**/*", "**/*.js", "**/*.jsx"],
   "rules": {
     "max-nesting-depth": 5,
     "selector-max-compound-selectors": 5,
     "selector-class-pattern": null,
     "selector-max-id": 1,
     "color-hex-length": "long",
-    "order/properties-alphabetical-order": null,
     "selector-no-qualifying-type": [true, { "severity": "warning" }],
     "scss/at-extend-no-missing-placeholder": [true, { "severity": "warning" }],
     "declaration-block-no-duplicate-properties": [

.vscode/settings.json

@@ -11,5 +11,7 @@
   },
   "search.exclude": {
     "**/.yarn": true
-  }
+  },
+  "stylelint.enable": true,
+  "stylelint.validate": ["css", "scss"]
 }

src/components/Menu/Menu.module.scss

@@ -25,6 +25,7 @@
   &.active,
   &:hover {
     top: 1px;
+
     &::before {
       bottom: -5px;
       transform: rotate(-2deg) scaleX(100%);

src/components/PageA4/PageA4.module.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-no-qualifying-type */
 body.root {
   margin: 0;
 }

src/components/TrackingEye/TrackingEye.module.scss

@@ -1,16 +1,17 @@
-.link:hover .eye:before {
+.link:hover .eye::before {
   opacity: 1;
   transform: translate3d(-50%, -80%, 0);
 }
+
 .link:hover .pupil {
   transform: scale(1.4);
 }
 
 .eye {
   -ms-flex-align: center;
   align-items: center;
-  background: url(/assets/images/eye.svg) 50% no-repeat;
-  display: -ms-flexbox;
+  background: url('/assets/images/eye.svg') 50% no-repeat;
+  display: flexbox;
   display: flex;
   height: 20px;
   -ms-flex-pack: center;
@@ -19,12 +20,14 @@
   width: 28px;
   z-index: 10;
 }
+
 .eye,
-.eye:before {
+.eye::before {
   transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-.eye:before {
-  background: url(/assets/images/lash.svg) 50% no-repeat;
+
+.eye::before {
+  background: url('/assets/images/lash.svg') 50% no-repeat;
   content: '';
   display: block;
   height: 22px;
@@ -36,17 +39,19 @@
   width: 23px;
   z-index: 1;
 }
+
 .iris {
   -ms-flex-align: center;
   align-items: center;
-  display: -ms-flexbox;
+  display: flexbox;
   display: flex;
   height: 16px;
   -ms-flex-pack: center;
   justify-content: center;
   position: relative;
   width: 16px;
 }
+
 .pupil {
   background: #fefaf6;
   border-radius: 50%;
@@ -57,17 +62,20 @@
   width: 10px;
 }
 
-.link:hover .eye:before {
+.link:hover .eye::before {
   opacity: 1;
   transform: translate3d(-50%, -80%, 0);
 }
+
 .link:hover .pupil {
   transform: scale(1.4);
 }
-.link.active .eye:before {
+
+.link.active .eye::before {
   opacity: 1;
   transform: translate3d(-50%, -80%, 0);
 }
+
 .link.active .pupil {
   transform: scale(1.4);
 }

src/styles/fonts.scss

@@ -1,16 +1,22 @@
 @font-face {
   font-family: Biotif;
-  src: url(/assets/fonts/biotif.woff2) format('woff2'), url(/assets/fonts/biotif.woff) format('woff');
+  src:
+    url('/assets/fonts/biotif.woff2') format('woff2'),
+    url('/assets/fonts/biotif.woff') format('woff');
 }
 
 @font-face {
   font-family: Bogart;
   font-weight: bold;
-  src: url(/assets/fonts/bogart-semi.woff2) format('woff2'), url(/assets/fonts/bogart-semi.woff) format('woff');
+  src:
+    url('/assets/fonts/bogart-semi.woff2') format('woff2'),
+    url('/assets/fonts/bogart-semi.woff') format('woff');
 }
 
 @font-face {
   font-family: Bogart;
   font-weight: normal;
-  src: url(/assets/fonts/bogart.woff2) format('woff2'), url(/assets/fonts/bogart.woff) format('woff');
+  src:
+    url('/assets/fonts/bogart.woff2') format('woff2'),
+    url('/assets/fonts/bogart.woff') format('woff');
 }

src/styles/main.scss

@@ -1,8 +1,9 @@
-@import './fonts.scss';
+@import './fonts';
 
 html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  /* stylelint-disable-next-line property-no-unknown */
   font-smooth: always;
 }
 
@@ -11,7 +12,7 @@ html {
 }
 
 body {
-  background: url(/assets/images/rectangle.svg) no-repeat;
+  background: url('/assets/images/rectangle.svg') no-repeat;
   background-position-x: clamp(
     520px,
     calc(100vw - calc(var(--rectangle-size) / 1.8)),