Fix stylelint deprecations and warnings (#1347)

* updated node version and other packages

* Update Dockerfile

* regenerated min css

* min css

* wip

* removed console logs

* updated uglidy-js; minify argohub-redirect separately

* wip

* wip

* updated .nvmrc, added prettier rules, updated package.lock

* updated .nvmrc, added prettier rules, updated package.lock

* fixed gitops layout

* fixed stylelint deprecation issues and warnings

* wip

* wip

* returned @import and silenced deprecations

* remove import css comments

* removed accidental changes

* removed accidental changes

* minified css

Author: alinashklyar

.eslintrc.json

@@ -212,7 +212,7 @@
 
     // ECMAScript 6
     "arrow-body-style": ["error", "as-needed"],
-    "arrow-parens": "error",
+    "arrow-parens": "off",
     "arrow-spacing": "error",
     "generator-star-spacing": "error",
     "no-confusing-arrow": "error",
@@ -234,6 +234,8 @@
     "sort-imports": "error",
     "symbol-description": "error",
     "template-curly-spacing": "error",
-    "yield-star-spacing": "error"
+    "yield-star-spacing": "error",
+    "color-function-notation": "off",
+    "alpha-value-notation": "off"
   }
 }

.stylelintrc

@@ -1,50 +1,36 @@
 {
   "extends": ["stylelint-config-standard-scss"],
   "plugins": ["stylelint-scss", "stylelint-order"],
+  "ignoreFiles": ["**/node_modules/**"],
   "rules": {
     "at-rule-empty-line-before": [null,
       "except": ["first-nested"]
     ],
-    "at-rule-name-space-after": "always",
     "at-rule-no-vendor-prefix": true,
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true,
-    "at-rule-semicolon-space-before": "never",
     "block-closing-brace-empty-line-before": null,
     "block-closing-brace-newline-after": null,
     "block-opening-brace-space-before": null,
     "color-named": "never",
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-block-semicolon-newline-before": "never-multi-line",
-    "declaration-block-semicolon-space-after": "always-single-line",
     "declaration-empty-line-before": null,
     "declaration-no-important": null,
     "font-family-name-quotes": "always-where-recommended",
     "font-weight-notation": "numeric",
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
     "length-zero-no-unit": true,
-    "max-empty-lines": 2,
     "max-line-length": null,
     "media-feature-name-no-vendor-prefix": true,
-    "media-feature-parentheses-space-inside": "never",
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-range-operator-space-before": "never",
     "no-descending-specificity": null,
     "no-duplicate-selectors": true,
-    "number-leading-zero": "never",
     "property-no-vendor-prefix": true,
     "rule-empty-line-before": null,
     "selector-attribute-quotes": "always",
-    "selector-list-comma-newline-after": "always",
-    "selector-list-comma-newline-before": "never-multi-line",
-    "selector-list-comma-space-after": "always-single-line",
-    "selector-list-comma-space-before": "never-single-line",
     "selector-max-attribute": 2,
     "selector-max-class": 7,
     "selector-max-combinators": 7,
     "selector-max-compound-selectors": 7,
-    "selector-max-empty-lines": 1,
     "selector-max-id": 0,
     "selector-max-specificity": null,
     "selector-max-type": 4,
@@ -53,11 +39,7 @@
       "ignore": [ "attribute", "class", "id" ]
     }],
     "selector-no-vendor-prefix": true,
-    "string-quotes": "double",
     "value-keyword-case": "lower",
-    "value-list-comma-newline-after": "never-multi-line",
-    "value-list-comma-newline-before": "never-multi-line",
-    "value-list-comma-space-after": "always",
     "value-no-vendor-prefix": true
   }
 }

_includes/argohub-docs-navbar.html

@@ -74,15 +74,15 @@
         onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
           document.querySelector('input[data-testid=helphub-input]').focus()
         }, 100)"
-        class="helpbub-toggler helpbub-toggler--small order-2 order-md-2"
+        class="helpbub-toggler helpbub-toggler-small order-2 order-md-2"
         aria-label="Search Codefresh Documentation"
         type="button"
       >
         <div class="d-flex align-items-center">
           <img src="{{site.baseurl}}/images/icons/search.png" />
           <span class="ml-2">Search</span>
         </div>
-        <span class="helpbub-toggler--hotkey">Ctrl / &#8984; + K</span>
+        <span class="helpbub-toggler-hotkey">Ctrl / &#8984; + K</span>
       </button>
     {% endif %}
   </div>

_includes/docs-navbar.html

@@ -134,15 +134,15 @@
         onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
           document.querySelector('input[data-testid=helphub-input]').focus()
         }, 100)"
-        class="helpbub-toggler helpbub-toggler--small order-2 order-md-2"
+        class="helpbub-toggler helpbub-toggler-small order-2 order-md-2"
         aria-label="Search Codefresh Documentation"
         type="button"
       >
         <div class="d-flex align-items-center">
           <img src="{{site.baseurl}}/images/icons/search.png" />
           <span class="ml-2">Search</span>
         </div>
-        <span class="helpbub-toggler--hotkey">Ctrl / &#8984; + K</span>
+        <span class="helpbub-toggler-hotkey">Ctrl / &#8984; + K</span>
       </button>
     {% endif %}
 </header>

_includes/modal.html

@@ -11,7 +11,7 @@
         <div class="container-fluid">
           <div class="row align-items-center">
             <div class="col-sm-auto">
-              <div class="redirect-popup__info-icon">
+              <div class="redirect-popup-info-icon">
                 {% include icons/info-circle.svg class="bd-icon" %}
               </div>
             </div>
@@ -22,7 +22,7 @@
 
           <button
             type="button"
-            class="close redirect-popup__close"
+            class="close redirect-popup-close"
             data-dismiss="modal"
             aria-label="Close"
           >

assets/css/docs.min.css

@@ -1,8 +1,6 @@
 // stylelint-disable declaration-no-important, selector-max-id
 
-//
 // Carbon ads
-//
 
 #carbonads {
   position: static;
@@ -14,7 +12,7 @@
   font-size: 13px;
   line-height: 1.4;
   text-align: left;
-  background-color: rgba(0, 0, 0, .05);
+  background-color: rgba(0 0 0 / 5%);
 
   a {
     color: #333;

assets/css/docs.min.css.map

@@ -1,10 +1,10 @@
 // stylelint-disable declaration-no-important
 
 // Docsearch overrides
-//
+
 // `!important` indicates overridden properties.
 
-.bd-search--home {
+.bd-search-home {
   padding: 0;
 
   .doc-search-input   {
@@ -35,8 +35,8 @@
     padding: .75rem 0 !important;
     background-color: #fff;
     background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, .1);
-    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+    border: 1px solid rgba(0 0 0 / 10%);
+    box-shadow: 0 .5rem 1rem rgba(0 0 0 / 175%);
 
     @include media-breakpoint-up(md) {
       width: 175%;
@@ -64,7 +64,7 @@
     overflow: visible !important;
   }
 
-  .algolia-docsearch-suggestion--category-header {
+  .algolia-docsearch-suggestion-category-header {
     padding: .125rem 1rem !important;
     margin-top: 0 !important;
     font-size: .875rem !important;
@@ -73,20 +73,20 @@
     border-bottom: 0 !important;
   }
 
-  .algolia-docsearch-suggestion--wrapper {
+  .algolia-docsearch-suggestion-wrapper {
     float: none !important;
     padding-top: 0 !important;
   }
 
   // Section header
-  .algolia-docsearch-suggestion--subcategory-column {
+  .algolia-docsearch-suggestion-subcategory-column {
     float: none !important;
     width: auto !important;
     padding: 0 !important;
     text-align: left !important;
   }
 
-  .algolia-docsearch-suggestion--content {
+  .algolia-docsearch-suggestion-content {
     float: none !important;
     width: auto !important;
     padding: 0 !important;
@@ -99,27 +99,27 @@
 
   .ds-suggestion {
     &:not(:first-child) {
-      .algolia-docsearch-suggestion--category-header {
+      .algolia-docsearch-suggestion-category-header {
         padding-top: .75rem !important;
         margin-top: .75rem !important;
-        border-top: 1px solid rgba(0, 0, 0, .1);
+        border-top: 1px solid rgba(0 0 0 / 10%);
       }
     }
 
-    .algolia-docsearch-suggestion--subcategory-column {
+    .algolia-docsearch-suggestion-subcategory-column {
       display: none !important;
     }
   }
 
-  .algolia-docsearch-suggestion--title {
+  .algolia-docsearch-suggestion-title {
     display: block;
     padding: .25rem 1rem !important;
     margin-bottom: 0 !important;
     font-size: .875rem !important;
     font-weight: 400 !important;
   }
 
-  .algolia-docsearch-suggestion--text {
+  .algolia-docsearch-suggestion-text {
     padding: 0 1rem .5rem !important;
     margin-top: -.25rem;
     font-size: .875rem !important;
@@ -135,28 +135,26 @@
     font-size: 0 !important;
     line-height: 1 !important;
     color: #767676 !important;
-    border-top: 1px solid rgba(0, 0, 0, .1);
+    border-top: 1px solid rgba(0 0 0 / 10%);
   }
 
-  .algolia-docsearch-footer--logo {
+  .algolia-docsearch-footer-logo {
     display: inline-block !important;
     width: 100px;
-    //overflow: visible !important;
     color: inherit !important;
     text-indent: 0 !important;
-    //background: none !important;
   }
 
-  .algolia-docsearch-suggestion--highlight {
+  .algolia-docsearch-suggestion-highlight {
     color: $bd-topaz-main;
-    background-color: rgba(20, 187, 79, .12);
+    background-color: rgba(20 187 79 / 12%);
   }
 
-  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+  .algolia-docsearch-suggestion-text .algolia-docsearch-suggestion-highlight {
     box-shadow: inset 0 -2px 0 0 rgba($bd-topaz-extra-light, .99) !important;
   }
 
-  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
-    background-color: rgba(52, 236, 61, .12) !important;
+  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion-content {
+    background-color: rgba(52 236 61 / 12%) !important;
   }
 }