chore: add stylelint (#8283)

NG-ZORRO · Feb 27, 2024 · a2e90df · a2e90df
1 parent 13b89e7
commit a2e90df
Show file tree

Hide file tree

Showing 62 changed files with 3,615 additions and 584 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,42 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-rational-order", "stylelint-config-prettier"],
+  "customSyntax": "postcss-less",
+  "plugins": ["stylelint-declaration-block-no-ignored-properties"],
+  "rules": {
+    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": [
+          "fade",
+          "fadeout",
+          "tint",
+          "darken",
+          "ceil",
+          "fadein",
+          "floor",
+          "unit",
+          "shade",
+          "lighten",
+          "percentage",
+          "-",
+          "~`colorPalette"
+        ]
+      }
+    ],
+    "import-notation": null,
+    "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,
+    "selector-not-notation": null,
+    "declaration-block-no-redundant-longhand-properties": null
+  },
+  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
+}
diff --git a/components/breadcrumb/style/patch.less b/components/breadcrumb/style/patch.less
@@ -8,6 +8,7 @@
   // We introduced an extra layer.
   & > nz-breadcrumb-item:last-child {
     color: @breadcrumb-last-item-color;
+
     a {
       color: @breadcrumb-last-item-color;
     }

diff --git a/components/card/style/patch.less b/components/card/style/patch.less
@@ -10,9 +10,11 @@
 nz-card {
   display: block;
 }
+
 nz-card-meta {
   display: block;
 }
+
 nz-card-loading {
   display: block;
 }
diff --git a/components/carousel/style/patch.less b/components/carousel/style/patch.less
@@ -1,9 +1,9 @@
 nz-carousel {
-  display: block;
   position: relative;
-  overflow: hidden;
+  display: block;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 .slick-dots {

diff --git a/components/code-editor/style/index.less b/components/code-editor/style/index.less
@@ -4,31 +4,31 @@
 @code-editor-prefix-cls: ~'@{ant-prefix}-code-editor';
 
 .@{code-editor-prefix-cls} {
-  display: block;
   position: relative;
-  height: 100%;
+  display: block;
   width: 100%;
+  height: 100%;
   background-color: @component-background;
 
   .@{code-editor-prefix-cls}-loading {
     position: absolute;
+    z-index: 100;
     display: flex;
     justify-content: center;
-    height: 100%;
     width: 100%;
-    z-index: 100;
+    height: 100%;
     background-color: @component-background;
   }
 
   .@{code-editor-prefix-cls}-toolkit {
+    position: absolute;
     top: 20px;
     right: 160px;
-    position: absolute;
-    height: 24px;
     z-index: 2;
     min-width: 100px;
-    background: transparent;
+    height: 24px;
     text-align: right;
+    background: transparent;
 
     i,
     span[nz-icon] {

diff --git a/components/collapse/style/patch.less b/components/collapse/style/patch.less
@@ -1,6 +1,7 @@
 nz-collapse {
   display: block;
 }
+
 nz-collapse-panel {
   display: block;
 }
diff --git a/components/color-picker/style/index.less b/components/color-picker/style/index.less
@@ -20,29 +20,33 @@
     flex-direction: column;
     width: 250px;
     border-radius: @border-radius-base;
+
     &-disabled {
       cursor: not-allowed;
     }
   }
+
   &-select {
     .@{color-picker-prefix-cls}-palette {
       min-height: 160px;
       overflow: hidden;
       border-radius: @border-radius-base;
+
       & > .@{color-picker-prefix-cls}-gradient {
         border-top-left-radius: 5px;
       }
     }
+
     margin-bottom: @margin-sm;
   }
 
   &-saturation {
     position: absolute;
-    border-radius: inherit;
     top: 0;
-    left: 0;
     right: 0;
-    bottom: 0
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
   }
 
   &-handler {
@@ -61,32 +65,41 @@
   &-slider {
     width: 100%;
     border-radius: @border-radius-base;
+
     .@{color-picker-prefix-cls}-palette {
       height: 8px;
     }
+
     .@{color-picker-prefix-cls}-gradient {
       border-radius: @border-radius-base;
     }
+
     &-hue {
       margin-bottom: @margin-sm;
     }
+
     &-alpha {
-      background-image: conic-gradient(rgba(0, 0, 0, 0.06) 0 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0);
+      background-image: conic-gradient(
+        rgba(0, 0, 0, 0.06) 0 25%,
+        transparent 0 50%,
+        rgba(0, 0, 0, 0.06) 0 75%,
+        transparent 0
+      );
       background-size: 8px 8px;
     }
   }
 
   &-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     min-width: 32px;
     height: 32px;
-    border-radius: @border-radius-base;
+    padding: 3px;
     border: @border-width-base solid @border-color-split;
+    border-radius: @border-radius-base;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     transition: all 0.2s;
-    padding: 3px;
 
     &:hover {
       border-color: @primary-color;
@@ -116,10 +129,16 @@
     position: relative;
     width: 28px;
     height: 28px;
-    background-image: conic-gradient(rgba(0, 0, 0, 0.06) 0 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0);
-    background-size: 50% 50%;
     overflow: hidden;
+    background-image: conic-gradient(
+      rgba(0, 0, 0, 0.06) 0 25%,
+      transparent 0 50%,
+      rgba(0, 0, 0, 0.06) 0 75%,
+      transparent 0
+    );
+    background-size: 50% 50%;
     border-radius: @border-radius-base;
+
     &-inner {
       box-sizing: border-box;
       width: 100%;
@@ -132,12 +151,15 @@
     display: flex;
     gap: @margin-sm;
     margin-bottom: @margin-sm;
+
     .@{color-picker-prefix-cls}-slider-group {
       flex: 1;
+
       &-disabled-alpha {
         display: flex;
         align-items: center;
-        .@{color-picker-prefix-cls}-slider{
+
+        .@{color-picker-prefix-cls}-slider {
           margin-bottom: 0;
         }
       }
@@ -159,26 +181,26 @@
   }
 
   &-clear {
+    position: relative;
     width: 18px;
     height: 18px;
-    border-radius: @border-radius-base;
+    margin-bottom: @margin-xs;
+    overflow: hidden;
     border: @border-width-base solid @border-color-split;
-    position: relative;
+    border-radius: @border-radius-base;
     cursor: pointer;
-    overflow: hidden;
-    margin-bottom: @margin-xs;
 
     &::after {
-      content: "";
       position: absolute;
-      inset-inline-end: 1px;
       top: 0;
       display: block;
       width: 40px;
       height: 2px;
-      transform-origin: right;
-      transform: rotate(-45deg);
       background-color: #f5222d;
+      transform: rotate(-45deg);
+      transform-origin: right;
+      content: '';
+      inset-inline-end: 1px;
     }
   }
 
@@ -194,8 +216,8 @@
     }
 
     .ant-input-number {
-      font-size: 12px;
       width: auto;
+      font-size: 12px;
     }
 
     .ant-input-number-sm input {
@@ -214,8 +236,8 @@
       flex: 1;
 
       .@{color-picker-prefix-cls}-hex-input {
-        padding: 0;
         margin-right: @margin-xss;
+        padding: 0;
       }
 
       .@{color-picker-prefix-cls}-hsb-input {
@@ -257,10 +279,11 @@
 
   &-inline {
     display: inline-block;
+
     .@{color-picker-prefix-cls}-color-block {
-      margin: 0;
       width: 24px;
       height: 24px;
+      margin: 0;
     }
 
     &-lg {
@@ -277,4 +300,4 @@
       }
     }
   }
-}
+}