style(*): clean instead of rational of style (#1674)

.prettierignore

@@ -4,7 +4,7 @@
 **/test.ts
 src/index.html
 
-.stylelintrc
+.stylelintrc.js
 .prettierrc
 
 _nginx/

.stylelintignore

@@ -4,3 +4,6 @@ src/assets/**/*
 packages/theme/system/utils/_border.less
 packages/theme/system/utils/_color.less
 packages/theme/system/utils/_spacing.less
+
+dist/**/*
+ng-alain/**/*

.stylelintrc.js

@@ -0,0 +1,88 @@
+const { propertyGroups } = require('stylelint-config-clean-order');
+
+const propertiesOrder = propertyGroups.map(properties => ({
+  noEmptyLineBetween: true,
+  emptyLineBefore: 'never',
+  properties
+}));
+
+module.exports = {
+  extends: ['stylelint-config-standard'],
+  customSyntax: 'postcss-less',
+  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
+  rules: {
+    'function-name-case': ['lower', { ignoreFunctions: ['/colorPalette/'] }],
+    'function-no-unknown': [
+      true,
+      {
+        ignoreFunctions: [
+          'fade',
+          'tint',
+          'darken',
+          'ceil',
+          'fadein',
+          'floor',
+          'unit',
+          'shade',
+          'lighten',
+          'percentage',
+          '-',
+          '~`colorPalette',
+          'snaplist',
+          'fade-out'
+        ]
+      }
+    ],
+    'no-descending-specificity': null,
+    'no-invalid-position-at-import-rule': null,
+    'declaration-empty-line-before': null,
+    'keyframes-name-pattern': null,
+    'custom-property-pattern': null,
+    'number-max-precision': 8,
+    'alpha-value-notation': 'number',
+    'color-function-notation': 'legacy',
+    'selector-class-pattern': null,
+    'selector-id-pattern': null,
+    'plugin/declaration-block-no-ignored-properties': true,
+    'selector-type-no-unknown': null,
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['ng-deep']
+      }
+    ],
+    'no-invalid-double-slash-comments': null,
+    'import-notation': 'string',
+    'media-feature-range-notation': 'prefix',
+    'media-query-no-invalid': null,
+    'order/order': [
+      [
+        'dollar-variables',
+        'at-variables',
+        "custom-properties",
+        { type: 'at-rule', name: 'custom-media' },
+        { type: 'at-rule', name: 'function' },
+        { type: 'at-rule', name: 'mixin' },
+        { type: 'at-rule', name: 'extend' },
+        { type: 'at-rule', name: 'include' },
+        'declarations',
+        'less-mixins',
+        {
+          type: 'rule',
+          selector: /^&::[\w-]+/,
+          hasBlock: true
+        },
+        'rules',
+        { type: 'at-rule', name: 'media', hasBlock: true }
+      ],
+      { severity: 'warning' }
+    ],
+    'order/properties-order': [
+      propertiesOrder,
+      {
+        severity: 'warning',
+        unspecified: 'bottomAlphabetical'
+      }
+    ]
+  }
+};

.vscode/settings.json

@@ -33,8 +33,7 @@
   },
   "files.associations": {
     "*.json": "jsonc",
-    ".prettierrc": "json",
-    ".stylelintrc": "json"
+    ".prettierrc": "json"
   },
   "angular.enable-strict-mode-prompt": false
 }

package.json

@@ -144,10 +144,9 @@
     "readline-sync": "^1.4.10",
     "stream": "0.0.2",
     "stylelint": "^15.10.3",
-    "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.7.0",
-    "stylelint-order": "^6.0.3",
+    "stylelint-config-clean-order": "^5.2.0",
     "source-map-explorer": "^2.5.3",
     "xlsx": "^0.18.5",
     "jszip": "^3.10.1",

packages/abc/avatar-list/style/index.less

@@ -17,9 +17,10 @@
     height: @avatar-size-base;
     margin-left: -8px;
     font-size: @font-size-base;
+
     .@{ant-prefix}-avatar {
-      border: 1px solid #fff;
       cursor: pointer;
+      border: 1px solid #fff;
     }
   }
 
@@ -36,6 +37,7 @@
   &__mini {
     width: @avatar-list-mini-wh;
     height: @avatar-list-mini-wh;
+
     .@{ant-prefix}-avatar {
       width: @avatar-list-mini-wh;
       height: @avatar-list-mini-wh;

packages/abc/cell/style/index.less

@@ -47,8 +47,8 @@
 
   .unit {
     margin-left: 2px;
-    color: @cell-unit-color;
     font-size: @cell-unit-font-size;
+    color: @cell-unit-color;
   }
 
   &__disabled {

packages/abc/down-file/style/index.less

@@ -10,6 +10,7 @@
     .down-file-not-support-behavior-mixin(@value) when (@value = 'hidden') {
       display: none;
     }
+    /* stylelint-disable-next-line order/order */
     .down-file-not-support-behavior-mixin(@down-file-not-support-behavior);
   }
 }

packages/abc/ellipsis/style/index.less

@@ -6,9 +6,9 @@ ellipsis {
 }
 
 @{ellipsis-prefix} {
+  overflow: hidden;
   display: inline-block;
   width: 100%;
-  overflow: hidden;
   word-break: break-all;
 
   &__lines {
@@ -17,9 +17,9 @@ ellipsis {
 
   &__line-clamp {
     position: relative;
+    overflow: hidden;
     /* stylelint-disable-next-line value-no-vendor-prefix */
     display: -webkit-box;
-    overflow: hidden;
     text-overflow: ellipsis;
   }
 

packages/abc/error-collect/style/index.less

@@ -2,9 +2,9 @@
 @error-collect-prefix: ~'.error-collect';
 
 @{error-collect-prefix} {
+  cursor: pointer;
   padding-right: 24px;
   color: @error-collect-color;
-  cursor: pointer;
 
   &__count {
     padding-left: 8px;

packages/abc/error-collect/style/rtl.less

@@ -1,7 +1,8 @@
 @{error-collect-prefix}-rtl {
+  direction: rtl;
   padding-right: 0;
   padding-left: 24px;
-  direction: rtl;
+
   @{error-collect-prefix} {
     &__count {
       padding-right: 8px;

packages/abc/exception/style/index.less

@@ -7,15 +7,15 @@
   height: 100%;
 
   &__img-block {
+    zoom: 1;
     flex: 0 0 62.5%;
     width: 62.5%;
     padding-right: 152px;
-    zoom: 1;
 
     &::before,
     &::after {
-      display: table;
       content: ' ';
+      display: table;
     }
 
     &::after {
@@ -41,17 +41,17 @@
 
     &-title {
       margin-bottom: 24px;
-      color: #434e59;
-      font-weight: 600;
       font-size: 72px;
+      font-weight: 600;
       line-height: 72px;
+      color: #434e59;
     }
 
     &-desc {
       margin-bottom: 16px;
-      color: @text-color-secondary;
       font-size: 20px;
       line-height: 28px;
+      color: @text-color-secondary;
     }
 
     &-actions {
@@ -85,8 +85,8 @@
 @media screen and (max-width: @screen-xs) {
   @{exception-prefix} {
     &__img-block {
-      margin-bottom: -24px;
       overflow: hidden;
+      margin-bottom: -24px;
     }
   }
 }

packages/abc/footer-toolbar/style/index.less

@@ -3,9 +3,9 @@
 
 @{footer-toolbar-prefix} {
   position: fixed;
+  z-index: @zindex;
   right: 0;
   bottom: 0;
-  z-index: @zindex;
   display: flex;
   width: 100%;
   height: @footer-toolbar-height;

packages/abc/full-content/style/index.less

@@ -2,9 +2,9 @@
 @full-content-prefix: ~'.full-content';
 
 @{full-content-prefix} {
+  overflow: auto;
   display: block;
   height: 100%;
-  overflow: auto;
 
   &__body {
     overflow: hidden;

packages/abc/global-footer/style/index.less

@@ -26,8 +26,8 @@
   }
 
   &__copyright {
-    color: @text-color-secondary;
     font-size: @font-size-base;
+    color: @text-color-secondary;
   }
 }
 

packages/abc/loading/style/index.less

@@ -4,23 +4,23 @@
 @{loading-prefix} {
   &-backdrop {
     z-index: @loading-zindex;
-    background-color: @loading-backdrop-bg;
     opacity: 1;
+    background-color: @loading-backdrop-bg;
   }
 
   &-default {
     position: fixed;
-    inset: 0;
     z-index: @loading-zindex + 1;
+    inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 
     &__icon {
       margin-bottom: 8px;
-      color: @loading-icon-color;
       font-size: 24px;
+      color: @loading-icon-color;
     }
 
     &__text {