perf(styles): simplify compound selectors over 4 levels (#2282)

* perf(styles): reduce compound selector to 5 levels * perf(styles): simplify compound selectors in Sidenav * perf(styles): simplify compound selectors in CheckTreePicker * perf(styles): simplify compound selectors in TreePicker * perf(styles): simplify compound selectors in TagPicker * fix(Sidenav): fix submenu padding in collapsed Sidenav
rsuite · Jan 13, 2022 · 304e8da · 304e8da · vercel · Jan 13, 2022
1 parent 26cbaf2
commit 304e8da
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 110 deletions.
diff --git a/src/CheckTreePicker/styles/index.less b/src/CheckTreePicker/styles/index.less
@@ -1,6 +1,7 @@
 @import '../../styles/common';
-@import '../../Picker/styles/mixin';
+@import '../../Picker/styles/index';
 @import '../../TreePicker/styles/mixin';
+@import '../../Checkbox/styles/index';
 
 // **Check Tree Picker
 // **----------------------
@@ -23,31 +24,9 @@
       }
     }
   }
-}
-
-.rs-check-tree-node {
-  position: relative;
-  font-size: @picker-tree-node-font-size;
-  line-height: @picker-tree-node-line-height;
-
-  &-label {
-    .rs-check-item {
-      display: inline-block;
-
-      .rs-picker-menu & {
-        display: block;
-      }
-    }
 
-    &:focus .rs-check-item .rs-checkbox-checker > label {
-      .picker-item-hover();
-    }
-
-    .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
-      .picker-item-active();
-    }
-
-    .rs-check-item .rs-checkbox-checker > label {
+  .rs-check-item .rs-checkbox-checker {
+    > label {
       text-align: left;
       position: relative;
       margin: 0;
@@ -67,37 +46,59 @@
         top: 0;
         margin-left: -58px; // 10px + 36px + 12px
       }
+    }
 
-      .rs-checkbox-wrapper {
-        left: (@checkbox-sense-width + 10px);
-      }
+    .rs-checkbox-wrapper {
+      left: (@checkbox-sense-width + 10px);
+    }
+  }
+}
 
-      // Only has the first level
-      .rs-check-tree-without-children & {
-        padding-left: 34px; //text gap + checkbox space
+// Only has the first level
+.rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
+  > label {
+    padding-left: 34px; //text gap + checkbox space
 
-        &::before {
-          width: 28px;
-          margin-left: -36px;
-        }
+    &::before {
+      width: 28px;
+      margin-left: -36px;
+    }
+  }
 
-        .rs-checkbox-wrapper {
-          left: 0;
-        }
-      }
+  .rs-checkbox-wrapper {
+    left: 0;
+  }
+}
+
+.rs-check-tree-node {
+  position: relative;
+  font-size: @picker-tree-node-font-size;
+  line-height: @picker-tree-node-line-height;
+
+  .rs-check-item {
+    display: inline-block;
+
+    .rs-picker-menu & {
+      display: block;
     }
   }
 
+  &:focus .rs-check-item .rs-checkbox-checker > label {
+    .picker-item-hover();
+  }
+
+  .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
+    .picker-item-active();
+  }
+
   // Uncheckable state
-  &-all-uncheckable > .rs-check-tree-node-label {
-    .rs-check-item .rs-checkbox-checker > label {
-      padding-left: 22px; // 10px + 12px
+  &-all-uncheckable > .rs-check-item .rs-checkbox-checker > label {
+    padding-left: 22px; // 10px + 12px
 
-      &::before {
-        width: 14px;
-        margin-left: 0;
-        left: 0;
-      }
+    &::before {
+      width: 14px;
+      margin-left: 0;
+      left: 0;
     }
   }
 }

diff --git a/src/Picker/styles/mixin.less b/src/Picker/styles/mixin.less
@@ -265,7 +265,8 @@
     line-height: @line-height;
   }
 
-  .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
+  .rs-picker-tag & ~ .rs-picker-tag-wrapper {
     padding-bottom: @padding-vertical - 3px;
 
     .rs-tag {
@@ -278,7 +279,7 @@
       font-size: @font-size;
     }
 
-    .rs-picker-search-input input {
+    input {
       height: @line-height * @font-size - 2px;
     }
   }

diff --git a/src/Sidenav/styles/index.less b/src/Sidenav/styles/index.less
@@ -37,34 +37,59 @@
     margin: 0 !important;
   }
 
-  .high-contrast-mode({
-    .rs-dropdown-toggle,
-    .rs-dropdown-menu {
-      border: none;
-    }
-  });
+  // <Dropdown> within <Sidenav>
+  > .rs-dropdown {
+    // Submenu toggle
+    .rs-dropdown-item-toggle {
+      display: block;
+      width: 100%;
+      text-align: start;
+      background: none;
+      padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
+      position: relative;
 
-  .rs-dropdown-item-toggle {
-    display: block;
-    width: 100%;
-    text-align: start;
-    background: none;
+      .rs-sidenav-collapse-in & {
+        padding-left: @sidenav-level2-retract;
+      }
 
-    &:focus {
-      outline: 0;
-    }
+      &:focus {
+        outline: 0;
+      }
 
-    &:focus-visible {
-      .focus-ring(inset);
+      &:focus-visible {
+        .focus-ring(inset);
 
-      .high-contrast-mode({
-        .focus-ring(slim-inset);
-      });
+        .high-contrast-mode({
+          .focus-ring(slim-inset);
+        });
 
-      z-index: 1;
+        z-index: 1;
+      }
+
+      // Submenu toggle icon
+      &-icon {
+        position: absolute;
+        right: @sidenav-padding-horizontal;
+        top: @sidenav-children-padding-vertical;
+        width: auto;
+        height: @sidenav-dropdown-toggle-caret-width;
+        transform: rotate(90deg);
+      }
+    }
+
+    // Expanded submenu toggle icon
+    .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
+      transform: rotate(270deg);
     }
   }
 
+  .high-contrast-mode({
+    .rs-dropdown-toggle,
+    .rs-dropdown-menu {
+      border: none;
+    }
+  });
+
   .rs-sidenav-item:focus-visible {
     .focus-ring(inset);
 
@@ -225,32 +250,17 @@
       transform: rotate(180deg);
     }
 
-    .rs-dropdown-item.rs-dropdown-item-expand
-      > .rs-dropdown-item-toggle
-      > .rs-dropdown-item-toggle-icon {
-      transform: rotate(270deg);
-    }
-
     // Dropdown menu
-    > .rs-dropdown-menu {
+    .rs-dropdown-menu {
       .reset-sidenav-dropdown-menu();
+    }
 
-      // Submenu
-      .rs-dropdown-item-submenu {
-        padding: 0;
-
-        > .rs-dropdown-menu-toggle {
-          display: block;
-          padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
-        }
-
-        > .rs-dropdown-menu {
-          .reset-sidenav-dropdown-menu();
-        }
+    // Submenu
+    .rs-dropdown-item-submenu {
+      padding: 0;
 
-        &:hover {
-          background-color: transparent;
-        }
+      &:hover {
+        background-color: transparent;
       }
     }
   }
@@ -283,21 +293,6 @@
   // @warn Here we can only use absolute positioning because of the limitations of using <Dropdown/> component.
 
   .rs-dropdown-item-submenu {
-    > .rs-dropdown-item-toggle {
-      padding-left: @sidenav-level2-retract;
-      padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
-      position: relative;
-
-      > .rs-dropdown-item-toggle-icon {
-        position: absolute;
-        right: @sidenav-padding-horizontal;
-        top: @sidenav-children-padding-vertical;
-        width: auto;
-        height: @sidenav-dropdown-toggle-caret-width;
-        transform: rotate(90deg);
-      }
-    }
-
     > .rs-dropdown-item-menu-icon {
       padding-top: @sidenav-children-padding-vertical;
       padding-bottom: @sidenav-children-padding-vertical;

diff --git a/src/TreePicker/styles/index.less b/src/TreePicker/styles/index.less
@@ -34,7 +34,7 @@
   text-align: left;
   margin: 0 0 4px 0;
 
-  > .rs-tree-node-label {
+  &-label {
     position: relative;
     margin: 0;
     //text gap
@@ -44,7 +44,7 @@
     font-size: @picker-tree-node-font-size;
     line-height: @picker-tree-node-line-height;
 
-    > .rs-tree-node-label-content {
+    &-content {
       padding: @custom-picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal
         @custom-picker-tree-node-padding-vertical @picker-tree-arrow-down-gap;
       display: inline-block;
@@ -59,7 +59,7 @@
     }
   }
 
-  &&-active > .rs-tree-node-label > .rs-tree-node-label-content {
+  &-active &-label-content {
     .picker-item-active();
 
     color: var(--rs-text-link);

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -43,7 +43,7 @@ module.exports = {
     'value-no-vendor-prefix': true,
     // Limit the number of composite selectors in a selector.
     // TODO consider narrowing this limit
-    'selector-max-compound-selectors': 6,
+    'selector-max-compound-selectors': 4,
     // Limit the number of ID selectors in a selector.
     'selector-max-id': 1,
     // Limit the number of universal selectors in a selector.