fix: 修复css变量文件编译报错问题&chore：新增样式校验 (#5862)

* fix: 修复css变量文件编译报错问题

* chore: 添加样式校验

.husky/pre-commit

@@ -2,3 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged
+npm run stylelint

.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "rules": {
+    "color-hex-case": "lower",
+    "no-extra-semicolons": true,
+    "declaration-colon-space-after": "always-single-line",
+    "block-no-empty": true
+  },
+  "overrides": [
+    {
+      "files": [
+        "*.scss",
+        "**/*.scss"
+      ],
+      "customSyntax": "postcss-scss"
+    }
+  ]
+}

package.json

@@ -21,7 +21,8 @@
     "version": "lerna version",
     "release": "npm run build --workspaces && lerna publish from-package --registry=https://registry.npmjs.org --ignore-scripts",
     "revision": "ts-node ./scripts/generate-revision.ts",
-    "publish-to-internal": "sh ./publish-to-internal.sh"
+    "publish-to-internal": "sh ./publish-to-internal.sh",
+    "stylelint": "npx stylelint 'packages/**/*.scss'"
   },
   "dependencies": {
     "postcss": "^8.4.14",

packages/amis-ui/scss/_properties.scss

@@ -427,7 +427,7 @@ $remFactor: 16px;
   --Collapse-header-collapsed-border: var(--borderWidth) solid
     var(--Collapse-border-color);
   --Collapse-header-collapsed-borderTop: none;
-  --Collapse-header-collapsed-borderBottom: none
+  --Collapse-header-collapsed-borderBottom: none;
   --Collapse-header-wrapper-direction: row-reverse;
   --Collapse-header-bg-disabled-color: var(--colors-neutral-fill-6);
   --Collapse-content-padding: var(--sizes-size-9);
@@ -700,7 +700,7 @@ $remFactor: 16px;
   --ImageControl-addBtn-onActive-border: var(--colors-brand-5);
   --ImageControl-addBtn-onActive-color: var(--colors-brand-5);
   --ImageControl-addBtn-onDisabled-bg: var(--colors-neutral-fill-10);
-  --ImageControl-addBtn-onDisabled-border: var(--colors-neutral-line-8);;
+  --ImageControl-addBtn-onDisabled-border: var(--colors-neutral-line-8);
   --ImageControl-addBtn-onDisabled-color: var(--colors-neutral-text-6);
   --ImageControl-addBtn-onHover-bg: var(--colors-neutral-fill-11);
   --ImageControl-addBtn-onHover-border: var(--colors-brand-5);
@@ -1172,7 +1172,7 @@ $remFactor: 16px;
   --Table-lineHeight: var(--fonts-lineHeight-2);
   --Table-onChecked-bg: var(--colors-neutral-fill-10);
   --Table-onChecked-borderColor: var(--colors-neutral-line-8);
-  --Table-onChecked-color: var(--colors-neutral-text-6)
+  --Table-onChecked-color: var(--colors-neutral-text-6);
   --Table-onChecked-onHover-bg: var(--colors-neutral-fill-10);
   --Table-onChecked-onHover-borderColor: var(--colors-neutral-line-8);
   --Table-onChecked-onHover-color: var(--colors-neutral-line-4);
@@ -1456,7 +1456,8 @@ $remFactor: 16px;
   --Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2);
 
   --Wizard-badge-bg: var(--colors-neutral-fill-11);
-  --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2) var(--colors-neutral-fill-6);
+  --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2)
+    var(--colors-neutral-fill-6);
   --Wizard-badge-borderRadius: var(--borders-radius-7);
   --Wizard-badge-color: var(--colors-neutral-text-6);
   --Wizard-badge-fontSize: var(--fonts-size-7);

packages/amis-ui/scss/components/_badge.scss

@@ -61,7 +61,7 @@
     white-space: nowrap;
     text-align: center;
     padding: 0 6px;
-    border: 1px solid #FFFFFF;
+    border: 1px solid #ffffff;
   }
 
   // 只显示小红点
@@ -78,14 +78,14 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    right: 0
+    right: 0;
   }
 
   &-ribbon {
     color: var(--Badge-color);
     height: var(--Badge-size);
     line-height: var(--Badge-size);
-    transform: translateX(calc(50% - 5px)) rotate(45deg) scale(.7);
+    transform: translateX(calc(50% - 5px)) rotate(45deg) scale(0.7);
     transform-origin: 50% 0;
     border-radius: 0;
     text-align: center;
@@ -93,19 +93,20 @@
     top: 5px;
   }
 
-  &-ribbon-out--top-left, &-ribbon-out--bottom-left {
+  &-ribbon-out--top-left,
+  &-ribbon-out--bottom-left {
     left: 0;
-    right: auto
+    right: auto;
   }
 
   &-ribbon--top-left {
-    transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(.7);
+    transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(0.7);
     left: 0;
     right: auto;
   }
 
   &-ribbon--bottom-left {
-    transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(.7);
+    transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7);
     transform-origin: 50% 100%;
     left: 0;
     right: auto;
@@ -114,7 +115,7 @@
   }
 
   &-ribbon--bottom-right {
-    transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(.7);
+    transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7);
     transform-origin: 50% 100%;
     left: auto;
     right: 0;

packages/amis-ui/scss/components/_timeline.scss

@@ -220,7 +220,6 @@
         color: var(--TimelineItem--text-primary-color);
         font-size: var(--Timeline--font-size);
         margin-bottom: var(--TimelineItem--content-title-margin-bottom);
-       
       }
 
       .#{$ns}TimelineItem-detail {

packages/amis-ui/scss/components/react-datetime.scss

@@ -47,7 +47,7 @@
   }
   .headerTable {
     border-spacing: 0;
-    border-bottom: 1px solid #E8E9EB;
+    border-bottom: 1px solid #e8e9eb;
   }
 }
 .rdtPicker td,
@@ -76,12 +76,12 @@
 }
 .rdtPicker td.rdtOld,
 .rdtPicker td.rdtNew {
-  color: #B8BABF;
+  color: #b8babf;
 }
 .rdtPicker td.rdtToday {
   position: relative;
   > span {
-    border: 1px solid #2468F2;
+    border: 1px solid #2468f2;
   }
 }
 .rdtPicker td.rdtActive,
@@ -96,20 +96,20 @@
 .rdtPicker td.rdtDisabled,
 .rdtPicker td.rdtDisabled:hover {
   background: none;
-  color: #B8BABF;
+  color: #b8babf;
   cursor: not-allowed;
 }
 
 .rdtPicker td span.rdtOld {
-  color: #B8BABF;
+  color: #b8babf;
 }
 .rdtPicker td span.rdtDisabled,
 .rdtPicker td span.rdtDisabled:hover {
   background: none;
-  color: #B8BABF;
+  color: #b8babf;
   cursor: not-allowed;
   > span {
-    border-color: #E8E9EB;
+    border-color: #e8e9eb;
   }
 }
 .rdtPicker th {
@@ -147,7 +147,7 @@
 .rdtPicker th.rdtDisabled,
 .rdtPicker th.rdtDisabled:hover {
   background: none;
-  color: #B8BABF;
+  color: #b8babf;
   cursor: not-allowed;
 }
 .rdtPicker thead tr:first-of-type th {