[ui-core] Upgrade style lint to the latest version

This also applies the latest default style lint rules to our style files.

.stylelintrc

@@ -13,6 +13,7 @@
         "scss/at-if-closing-brace-newline-after": null,
         "scss/at-if-closing-brace-space-after": null,
         "scss/at-import-partial-extension": null,
+        "scss/load-partial-extension": null,
         "scss/at-mixin-argumentless-call-parentheses": null,
         "scss/at-mixin-pattern": null,
         "scss/comment-no-empty": null,
@@ -37,7 +38,6 @@
         "declaration-block-no-redundant-longhand-properties": null,
         "function-url-quotes": null,
         "media-feature-name-no-vendor-prefix": null,
-        "number-leading-zero": null,
         "selector-attribute-quotes": null,
         "selector-id-pattern": null
       }
@@ -50,14 +50,11 @@
     "color-function-notation": null,
     "font-family-name-quotes": null,
     "keyframes-name-pattern": null,
-    "max-empty-lines": null,
-    "max-line-length": null,
     "no-descending-specificity": null,
     "number-max-precision": null,
     "property-no-vendor-prefix": null,
     "selector-class-pattern": null,
     "shorthand-property-no-redundant-values": null,
-    "string-quotes": null,
     "value-keyword-case": null,
     "value-no-vendor-prefix": null
   }

desktop/core/src/desktop/js/components/dropdown/DropdownMenu.scss

@@ -24,7 +24,6 @@
     max-width: 250px;
     min-height: 34px;
     max-height: 200px;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
   }
 }

desktop/core/src/desktop/js/components/sidebar/drawer.scss

@@ -244,14 +244,12 @@ $sidebar-drawer-behind-z-index: $sidebar-z-index - 1;
     ul {
       display: block;
       line-height: 20px;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
+      margin-block: 1em 1em;
       padding-inline-start: 40px;
 
       ol,
       ul {
-        margin-block-start: 0;
-        margin-block-end: 0;
+        margin-block: 0 0;
       }
 
       li {

desktop/core/src/desktop/js/components/sidebar/sidebar.scss

@@ -95,8 +95,8 @@
 
   &:hover,
   &:focus,
-    // CDP less has some very specific style we'll need to override
-  &:focus:not(:hover):not(.ant-btn) {
+
+  &:focus:not(:hover, .ant-btn) {
     text-decoration: none;
     outline: none;
   }
@@ -200,7 +200,7 @@
     color: $sidebar-hover-color;
   }
 
-  &:focus:not(:hover):not(.sidebar-active),
+  &:focus:not(:hover, .sidebar-active),
   &:hover:focus:not(.sidebar-active) {
     color: $sidebar-hover-color;
     outline: none;

desktop/core/src/desktop/js/components/styles/_mixins.scss

@@ -159,10 +159,7 @@ $hue-panel-border-radius: 3px;
 
 @mixin fillAbsolute {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0 0 0 0;
 }
 
 // Flexbox mixins
@@ -254,8 +251,7 @@ $hue-panel-border-radius: 3px;
   @include flex-direction($direction);
   @include display-flex;
 
-  column-gap: 10px;
-  row-gap: 10px;
+  gap: 10px 10px;
 
   > * {
     flex: 1;

desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.scss

@@ -18,7 +18,7 @@
     display: contents;
 
     .hue-path-browser__overflowing-label {
-      min-width: var(--minWidth);
+      min-width: var(--min-width);
     }
   }
 }

desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.tsx

@@ -35,7 +35,7 @@ const Breadcrumb = ({ label, url, onFilepathChange }: BreadcrumbProps): JSX.Elem
   return (
     <div
       className="hue-path-browser__breadcrumb"
-      style={{ '--minWidth': `${minWidth}` } as React.CSSProperties}
+      style={{ '--min-width': `${minWidth}` } as React.CSSProperties}
     >
       <OverflowingItem onClick={handleFilepathChange} label={label} />
     </div>

desktop/core/src/desktop/static/desktop/less/components/hue-clearable.less

@@ -23,7 +23,7 @@
   border-radius: 3px;
 }
 
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (resolution >= 192dpi) {
   .clearable {
     background: url(/static/desktop/art/[email protected]) no-repeat right -10px center;
     background-size: 10px 10px;

desktop/core/src/desktop/static/desktop/less/components/hue-qq-upload.less

@@ -48,8 +48,6 @@
   background-image: linear-gradient(to bottom, @cui-white, @cui-white);
   background-repeat: repeat-x;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffffff', GradientType=0);
-  border-color: @cui-white @cui-white @cui-gray-300;
-  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   border: 1px solid @cui-gray-400;

desktop/core/src/desktop/static/desktop/less/components/hue-scroll-anchor.less

@@ -19,7 +19,7 @@
 .hueAnchor {
   color: @cui-white;
   opacity: 0.65;
-  filter: alpha(opacity=65);
+  filter: opacity(65%);
   position: fixed;
   z-index: 2147483647;
   -webkit-border-radius: 6px;
@@ -36,7 +36,7 @@
     text-decoration: none;
     opacity: 0.85;
     color: @cui-white;
-    filter: alpha(opacity=85);
+    filter: opacity(85%);
   }
 
   & input {

desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -17,32 +17,32 @@
 */
 @import (reference) "cui/colors.less";
 @import (reference) "hue-mixins.less";
-@import "components/hue-app-switcher.less";
-@import "components/hue-breadcrumbs.less";
-@import "components/hue-catalog-entries-table.less";
-@import "components/hue-demi-modal.less";
-@import "components/hue-execution-analysis.less";
-@import "components/hue-filechooser.less";
-@import "components/hue-gridster.less";
-@import "components/hue-inputautocomplete.less";
-@import "components/hue-link-sharing.less";
-@import "components/hue-nav-properties.less";
-@import "components/hue-popover.less";
-@import "components/hue-qq-upload.less";
-@import "components/hue-query-builder.less";
-@import "components/hue-ribbon.less";
-@import "components/hue-scroll-anchor.less";
-@import "components/hue-scrollbar.less";
-@import "components/hue-selectize.less";
-@import "components/hue-selector.less";
-@import "components/hue-simple-ace.less";
-@import "components/hue-snippet-editor-actions.less";
-@import "components/hue-snippet-execute-actions.less";
-@import "components/hue-spinner.less";
-@import "components/hue-tables.less";
-@import "components/hue-wizard.less";
-@import "hue-helpers.less";
-@import "hue-c3-overrides.less";
+@import url("components/hue-app-switcher.less");
+@import url("components/hue-breadcrumbs.less");
+@import url("components/hue-catalog-entries-table.less");
+@import url("components/hue-demi-modal.less");
+@import url("components/hue-execution-analysis.less");
+@import url("components/hue-filechooser.less");
+@import url("components/hue-gridster.less");
+@import url("components/hue-inputautocomplete.less");
+@import url("components/hue-link-sharing.less");
+@import url("components/hue-nav-properties.less");
+@import url("components/hue-popover.less");
+@import url("components/hue-qq-upload.less");
+@import url("components/hue-query-builder.less");
+@import url("components/hue-ribbon.less");
+@import url("components/hue-scroll-anchor.less");
+@import url("components/hue-scrollbar.less");
+@import url("components/hue-selectize.less");
+@import url("components/hue-selector.less");
+@import url("components/hue-simple-ace.less");
+@import url("components/hue-snippet-editor-actions.less");
+@import url("components/hue-snippet-execute-actions.less");
+@import url("components/hue-spinner.less");
+@import url("components/hue-tables.less");
+@import url("components/hue-wizard.less");
+@import url("hue-helpers.less");
+@import url("hue-c3-overrides.less");
 
 ::-webkit-scrollbar {
   width: 9px;

desktop/core/src/desktop/static/desktop/less/hue.less

@@ -19,20 +19,20 @@
 // Legacy styles for Mako, Knockout.js and Vue components
 @import (reference) 'cui/colors.less';
 @import (reference) 'hue-mixins.less';
-@import 'hue-assist';
-@import 'hue-autocomplete';
-@import 'hue-cui-overrides.less';
-@import 'hue-cross-version.less';
-@import 'hue-multi-cluster-icons.less';
-@import 'components/hue-clearable.less';
-@import 'hue4.less';
+@import url('hue-assist');
+@import url('hue-autocomplete');
+@import url('hue-cui-overrides.less');
+@import url('hue-cross-version.less');
+@import url('hue-multi-cluster-icons.less');
+@import url('components/hue-clearable.less');
+@import url('hue4.less');
 
 // Styles for react.js components based on the Ant design library
 // and the Cuix library. Will only be applied for components wrapped in
 // the classes "cuix" and "antd" in order not to intefere with the legacy styles.
-@import 'root-wrapped-antd.less';
-@import 'cuix/dist/styles/variables.less';
-@import 'cuix/dist/styles/cuix-ant-overrides.less';
+@import url('root-wrapped-antd.less');
+@import url('cuix/dist/styles/variables.less');
+@import url('cuix/dist/styles/cuix-ant-overrides.less');
 
 html {
   height: 100%;

desktop/core/src/desktop/static/desktop/less/hue3-extra.less

@@ -17,11 +17,11 @@
 */
 @import (reference) "cui/colors.less";
 @import (reference) "hue-mixins.less";
-@import "hue-assist";
-@import "hue-autocomplete";
-@import "hue-cui-overrides.less";
-@import "hue-cross-version.less";
-@import "components/hue-clearable.less";
+@import url("hue-assist");
+@import url("hue-autocomplete");
+@import url("hue-cui-overrides.less");
+@import url("hue-cross-version.less");
+@import url("components/hue-clearable.less");
 
 .svg-hue-logo-main {
   fill: #f2f2f2;

desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -9,11 +9,11 @@
 .ant-modal-root {
   // We need to reset some global styles from Bootstrap to prevent them from
   // interfering with the Antd styles
-  @import './reset-globals.less';
+  @import url('./reset-globals.less');
 
   // Import global antd styles
-  @import 'antd/dist/antd.less';
-  @import 'node_modules/cuix/dist/styles/variables.less';
+  @import url('antd/dist/antd.less');
+  @import url('node_modules/cuix/dist/styles/variables.less');
 
   // Required global overrides:
   .ant-modal-mask,
@@ -32,9 +32,9 @@ body.ant-scrolling-effect {
 }
 
 // We need these styles available outside the .antd wrapper
-@import 'antd/es/menu/style/index.less';
-@import 'antd/es/style/core/motion.less';
-@import 'antd/es/dropdown/style/index.less';
-@import 'antd/es/tooltip/style/index.less';
-@import 'antd/es/spin/style/index.less';
-@import 'antd/es/tabs/style/index.less';
+@import url('antd/es/menu/style/index.less');
+@import url('antd/es/style/core/motion.less');
+@import url('antd/es/dropdown/style/index.less');
+@import url('antd/es/tooltip/style/index.less');
+@import url('antd/es/spin/style/index.less');
+@import url('antd/es/tabs/style/index.less');