re-add no-invalid-position-at-import-rule

Author: nadalaba

frontend/src/styles/fontawesome-5.scss

@@ -2,12 +2,14 @@
 @import "@fortawesome/fontawesome-free/scss/_mixins.scss";
 @import "@fortawesome/fontawesome-free/scss/_core.scss";
 
-/** fixed-with **/
+/** fixed-width **/
 @import "@fortawesome/fontawesome-free/scss/_fixed-width.scss"; //fa-fw
 /** animated **/
 @import "@fortawesome/fontawesome-free/scss/_animated.scss"; //fa-spin
 /** rotated **/
 @import "@fortawesome/fontawesome-free/scss/_rotated-flipped.scss"; //fa-rotate-90
+/** icons **/
+@import "@fortawesome/fontawesome-free/scss/_icons.scss";
 
 @font-face {
   font-family: "Font Awesome";
@@ -57,5 +59,3 @@
     src: url("/webfonts-generated/fa-brands-400.woff2") format("woff2");
   }
 }
-
-@import "@fortawesome/fontawesome-free/scss/_icons.scss";

frontend/src/styles/index.scss

@@ -1,3 +1,24 @@
+@import "buttons" layer(custom-styles);
+@import "404" layer(custom-styles);
+@import "ads" layer(custom-styles);
+@import "account" layer(custom-styles);
+@import "animations" layer(custom-styles);
+@import "caret" layer(custom-styles);
+@import "commandline" layer(custom-styles);
+@import "core" layer(custom-styles);
+@import "fonts" layer(custom-styles);
+@import "inputs" layer(custom-styles);
+@import "keymap" layer(custom-styles);
+@import "monkey" layer(custom-styles);
+@import "popups" layer(custom-styles);
+@import "scroll" layer(custom-styles);
+@import "settings" layer(custom-styles);
+@import "account-settings" layer(custom-styles);
+@import "test" layer(custom-styles);
+@import "loading" layer(custom-styles);
+@import "friends" layer(custom-styles);
+@import "media-queries" layer(custom-styles);
+
 @layer hidden {
   // custom layer to hide elements without using !important
   // (as long as this layer is higher than custom-styles)
@@ -16,11 +37,6 @@
 }
 
 @layer custom-styles {
-  @import "buttons", "404", "ads", "account", "animations", "caret",
-    "commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
-    "scroll", "settings", "account-settings", "test", "loading", "friends",
-    "media-queries";
-
   .chartCanvas {
     width: 100% !important;
   }

frontend/src/styles/media-queries.scss

@@ -1,3 +1,12 @@
+//media queries based on tailwind breakpoints https://tailwindcss.com/docs/container
+@import "media-queries-orange";
+@import "media-queries-yellow";
+@import "media-queries-green";
+@import "media-queries-blue";
+@import "media-queries-purple";
+@import "media-queries-brown";
+@import "media-queries-gray";
+
 body {
   &.mediaQueryDebugLevel1 {
     .content-grid {
@@ -14,15 +23,6 @@ body {
   }
 }
 
-//media queries based on tailwind breakpoints https://tailwindcss.com/docs/container
-@import "media-queries-orange";
-@import "media-queries-yellow";
-@import "media-queries-green";
-@import "media-queries-blue";
-@import "media-queries-purple";
-@import "media-queries-brown";
-@import "media-queries-gray";
-
 @media only screen and (max-width: 1875px) {
   .ad.ad-v {
     display: none;

frontend/src/styles/vendor.scss

@@ -1,6 +1,4 @@
 @import "normalize.css" layer(normalize);
-@layer vendor {
-  @import "fontawesome-5";
-  @import "slim-select/styles";
-  @import "balloon-css/src/balloon";
-}
+@import "fontawesome-5" layer(vendor);
+@import "slim-select/styles" layer(vendor);
+@import "balloon-css/src/balloon" layer(vendor);

stylelint.config.mjs

@@ -2,8 +2,6 @@
 export default {
   extends: ["stylelint-config-standard-scss"],
   rules: {
-    "no-invalid-position-at-import-rule": null, // consider adding // default: [true, {ignoreAtRules: ['use', 'forward'],},]
-
     "font-family-no-missing-generic-family-keyword": [
       true,
       { ignoreFontFamilies: ["Font Awesome", "Font Awesome Brands"] },