Enable and upgrade stylelint in pre-commit

.pre-commit-config.yaml

@@ -83,8 +83,8 @@ repos:
           ^boefjes/boefjes/plugins/kat_fierce/lists |
           ^keiko/glossaries |
           ^keiko/templates/.*/template.tex$ |
-          ^rocky/assets/js/vendor |
-          ^rocky/assets/src/bundles/app/css/themes/soft/fonts/tabler-icons/tabler-icons.scss$ |
+          ^rocky/assets/vendors |
+          ^rocky/assets/css/themes/soft/fonts/tabler-icons/tabler-icons.scss$ |
           ^rocky/tests/stubs |
           ^docs/source/_static
           )
@@ -95,12 +95,12 @@ repos:
       - id: djlint-django
         files: '^rocky/.*/templates/.*$'
 
-  # - repo: https://github.com/thibaudcolas/pre-commit-stylelint
-  #   rev: v15.4.0
-  #   hooks:
-  #     - id: stylelint
-  #       args: [--fix]
-  #       additional_dependencies:
-  #              - stylelint@15.4.0
-  #              - stylelint-config-standard-scss@8.0.0
-  #       files:  "^(rocky\/assets\/src\/|docs\/source\/).*.(css|scss|sass)$"
+  - repo: https://github.com/thibaudcolas/pre-commit-stylelint
+    rev: v15.9.0
+    hooks:
+      - id: stylelint
+        args: [--fix]
+        additional_dependencies:
+          - stylelint@15.9.0
+          - stylelint-config-standard-scss@10.0.0
+        files: "^(rocky\/assets\/css\/|docs\/source\/).*.(css|scss|sass)$"

.stylelintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": "stylelint-config-standard-scss",
+  "ignoreFiles": ["rocky/assets/css/themes/soft/fonts/tabler-icons/tabler-icons.scss"],
   "rules": {
     "number-max-precision": 5,
     "color-hex-length": "long",
@@ -8,7 +9,9 @@
       true,
       {
         "ignoreFontFamilies": [
-          "RO Icons"
+          "RO Icons",
+          "tabler-icons",
+          "kat-icons"
         ]
       }
     ]

rocky/.prettierignore

@@ -1,4 +1,4 @@
 *.html
 *.min.js
 assets/dist/
-assets/js/vendor/
+assets/vendors/

rocky/assets/src/bundles/app/css/abstracts/mixins.scss → rocky/assets/css/abstracts/mixins.scss

@@ -43,6 +43,7 @@
     height: auto;
     list-style: none;
   }
+
   margin: 0;
   padding: 0;
   position: static;

rocky/assets/src/bundles/app/css/components/cat-loader.scss → rocky/assets/css/components/cat-loader.scss

@@ -2,14 +2,17 @@
   0% {
     transform: rotate(-10deg);
   }
+
   100% {
     transform: rotate(10deg);
   }
 }
+
 @keyframes paw {
   0% {
     transform: rotate(20deg);
   }
+
   100% {
     transform: rotate(-40deg);
   }
@@ -20,6 +23,7 @@
   justify-content: center;
   margin: 3rem auto;
 }
+
 .cat-loader {
   height: 13rem;
   position: relative;
@@ -31,13 +35,15 @@
     position: absolute;
     top: 8rem;
   }
+
   .ball {
     animation: ball 1s alternate infinite ease-in-out;
     left: 1.5rem;
     position: absolute;
     top: 9.5rem;
     transform-origin: center bottom;
   }
+
   .head {
     position: absolute;
     top: 1rem;
@@ -50,20 +56,24 @@
     top: 8rem;
     transform-origin: center top;
   }
+
   .line {
     left: 2rem;
     position: absolute;
     top: 11.5rem;
   }
+
   .body {
     display: block;
     position: absolute;
     top: 4rem;
   }
+
   .ear-left {
     left: 0.5rem;
     position: absolute;
   }
+
   .ear-right {
     left: 3rem;
     position: absolute;

rocky/assets/src/bundles/app/css/components/cat-paw-loader.scss → rocky/assets/css/components/cat-paw-loader.scss

@@ -3,6 +3,7 @@
     opacity: 0.1;
   }
 }
+
 .cat-paw-loader {
   display: flex;
   justify-content: flex-start;
@@ -17,15 +18,19 @@
     &:nth-child(2) {
       animation-delay: 250ms;
     }
+
     &:nth-child(3) {
       animation-delay: 500ms;
     }
+
     &:nth-child(4) {
       animation-delay: 750ms;
     }
+
     &:nth-child(5) {
       animation-delay: 1000ms;
     }
+
     &:nth-child(6) {
       animation-delay: 1250ms;
     }

rocky/assets/src/bundles/app/css/components/dropdown-list.scss → rocky/assets/css/components/dropdown-list.scss

@@ -1,7 +1,6 @@
 /* Dropdown listing */
 
 .dropdown-list {
-    -webkit-box-shadow: var(--language-selector-list-box-shadow);
     box-shadow: var(--language-selector-list-box-shadow);
     border-radius: var(--language-selector-list-border-radius);
     border-width: var(--language-selector-list-border-width);

rocky/assets/src/bundles/app/css/components/dropdown.scss → rocky/assets/css/components/dropdown.scss

@@ -21,7 +21,7 @@
   >ul {
     padding: 0;
     display: none;
-    background-color: #fff;
+    background-color: #ffffff;
     list-style-type: disc;
     margin-block-end: 0;
     margin-block-start: 0;
@@ -60,7 +60,7 @@
         }
 
         &[aria-current="true"] {
-          a:before {
+          a::before {
             content: "\ea5e";
             font-family: var(--language-selector-list-button-icon-font-family);
             margin-left: var(--language-selector-list-button-icon-margin-left);

rocky/assets/src/bundles/app/css/components/fmea.scss → rocky/assets/css/components/fmea.scss

@@ -1,6 +1,6 @@
 .affected-objects {
   span:not(:last-child) {
-    &:after {
+    &::after {
       content: "-";
       display: inline-block;
     }

rocky/assets/src/bundles/app/css/components/footer-logo.scss → rocky/assets/css/components/footer-logo.scss

@@ -15,142 +15,185 @@
   animation: rainbow 1s infinite;
 }
 
-@-webkit-keyframes rainbow {
+@keyframes rainbow {
   0% {
     border-color: #ff0000;
   }
+
   10% {
     border-color: #ff8000;
   }
+
   20% {
     border-color: #ffff00;
   }
+
   30% {
     border-color: #80ff00;
   }
+
   40% {
     border-color: #00ff00;
   }
+
   50% {
     border-color: #00ff80;
   }
+
   60% {
     border-color: #00ffff;
   }
+
   70% {
     border-color: #0080ff;
   }
+
   80% {
     border-color: #0000ff;
   }
+
   90% {
     border-color: #8000ff;
   }
+
   100% {
     border-color: #ff0080;
   }
 }
-@-ms-keyframes rainbow {
+
+@keyframes rainbow {
   0% {
     border-color: #ff0000;
   }
+
   10% {
     border-color: #ff8000;
   }
+
   20% {
     border-color: #ffff00;
   }
+
   30% {
     border-color: #80ff00;
   }
+
   40% {
     border-color: #00ff00;
   }
+
   50% {
     border-color: #00ff80;
   }
+
   60% {
     border-color: #00ffff;
   }
+
   70% {
     border-color: #0080ff;
   }
+
   80% {
     border-color: #0000ff;
   }
+
   90% {
     border-color: #8000ff;
   }
+
   100% {
     border-color: #ff0080;
   }
 }
-@-o-keyframes rainbow {
+
+@keyframes rainbow {
   0% {
     border-color: #ff0000;
   }
+
   10% {
     border-color: #ff8000;
   }
+
   20% {
     border-color: #ffff00;
   }
+
   30% {
     border-color: #80ff00;
   }
+
   40% {
     border-color: #00ff00;
   }
+
   50% {
     border-color: #00ff80;
   }
+
   60% {
     border-color: #00ffff;
   }
+
   70% {
     border-color: #0080ff;
   }
+
   80% {
     border-color: #0000ff;
   }
+
   90% {
     border-color: #8000ff;
   }
+
   100% {
     border-color: #ff0080;
   }
 }
+
 @keyframes rainbow {
   0% {
     border-color: #ff0000;
   }
+
   10% {
     border-color: #ff8000;
   }
+
   20% {
     border-color: #ffff00;
   }
+
   30% {
     border-color: #80ff00;
   }
+
   40% {
     border-color: #00ff00;
   }
+
   50% {
     border-color: #00ff80;
   }
+
   60% {
     border-color: #00ffff;
   }
+
   70% {
     border-color: #0080ff;
   }
+
   80% {
     border-color: #0000ff;
   }
+
   90% {
     border-color: #8000ff;
   }
+
   100% {
     border-color: #ff0080;
   }

rocky/assets/src/bundles/app/css/components/footer.scss → rocky/assets/css/components/footer.scss

@@ -1,7 +1,7 @@
 /* Footer - Styling */
 
 body > footer {
-	border-top: 1px solid #ccc;
+	border-top: 1px solid #cccccc;
 
 	ul {
 		flex-direction: row;