feat: add style lint config

LonelySnowman · Oct 14, 2024 · 73ca673 · 73ca673
1 parent e659d47
commit 73ca673
Show file tree

Hide file tree

Showing 12 changed files with 342 additions and 298 deletions.
diff --git a/.stylelintcache b/.stylelintcache
@@ -0,0 +1 @@
+[{"E:\\coder\\Project\\TempProject\\snow-design\\packages\\foundation\\pagination\\variables.scss":"1","E:\\coder\\Project\\TempProject\\snow-design\\packages\\foundation\\button\\variables.scss":"2","E:\\coder\\Project\\TempProject\\snow-design\\packages\\theme-default\\scss\\mixin.scss":"3","E:\\coder\\Project\\TempProject\\snow-design\\packages\\theme-default\\scss\\_palette.scss":"4","E:\\coder\\Project\\TempProject\\snow-design\\packages\\foundation\\pagination\\pagination.scss":"5","E:\\coder\\Project\\TempProject\\snow-design\\packages\\theme-default\\scss\\index.scss":"6","E:\\coder\\Project\\TempProject\\snow-design\\packages\\foundation\\button\\button.scss":"7","E:\\coder\\Project\\TempProject\\snow-design\\packages\\theme-default\\scss\\global.scss":"8","E:\\coder\\Project\\TempProject\\snow-design\\packages\\theme-default\\scss\\variables.scss":"9","E:\\coder\\Project\\TempProject\\snow-design\\packages\\theme-default\\scss\\_font.scss":"10"},{"size":614,"mtime":1728138672626,"hashOfConfig":"11"},{"size":1145,"mtime":1728137901074,"hashOfConfig":"11"},{"size":22,"mtime":1728137313973,"hashOfConfig":"11"},{"size":2597,"mtime":1728927254783,"hashOfConfig":"11"},{"size":1718,"mtime":1728927659649,"hashOfConfig":"11"},{"size":144,"mtime":1728927659649,"hashOfConfig":"11"},{"size":1438,"mtime":1728927659649,"hashOfConfig":"11"},{"size":1429,"mtime":1728927659650,"hashOfConfig":"11"},{"size":773,"mtime":1728927659650,"hashOfConfig":"11"},{"size":1006,"mtime":1728927659650,"hashOfConfig":"11"},"rk3sq6"]
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,4 @@
+**/dist/**
+**/node_modules/**
+**/lib/**
+!packages/tools/lib/**
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,4 +1,5 @@
 module.exports = {
     '*.{ts,tsx,js,jsx,css,mjs,json}': ['eslint --fix'],
     '*.{md,yml}': ['prettier --ignore-unknown --write'],
+    '*.{css,scss}': ['stylelint --fix'],
 };
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "clean": "pnpm recursive run clean",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "lint:lint-staged": "lint-staged"
+    "lint:lint-staged": "lint-staged",
+    "lint:stylelint": "stylelint ./**/*.{css,scss} --cache --fix"
   },
   "author": "LonelySnowman",
   "license": "ISC",
@@ -69,6 +70,11 @@
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
     "sass": "^1.77.8",
+    "stylelint": "^16.10.0",
+    "stylelint-config-recess-order": "^5.1.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-scss": "^6.7.0",
     "typescript": "^5.5",
     "typescript-eslint": "^8.8.1",
     "vue": "^3.5.10"

diff --git a/packages/foundation/button/button.scss b/packages/foundation/button/button.scss
@@ -1,56 +1,65 @@
-@import './variables.scss';
+@import './variables';
 
 $module: #{$prefix}-button;
 
 .#{$module} {
   @include font-size-regular;
+
   height: 32px;
   padding: $button-padding;
-  border-radius: 6px;
+  cursor: pointer;
   border: 0 transparent solid;
+  border-radius: 6px;
   outline: none;
-  cursor: pointer;
   transition: all linear 0.1s;
 
   &-default {
-    background-color: $button-color_default-bg-default;
     color: $button-color_default-text-default;
+    background-color: $button-color_default-bg-default;
+
     &:hover {
       background-color: $button-color_default-bg-hover;
     }
+
     &:active {
       background-color: $button-color_default-bg-active;
     }
   }
 
   &-primary {
-    background-color: $button-color_primary-bg-default;
     color: $button-color_primary-text-default;
+    background-color: $button-color_primary-bg-default;
+
     &:hover {
       background-color: $button-color_primary-bg-hover;
     }
+
     &:active {
       background-color: $button-color_primary-bg-active;
     }
   }
 
   &-warning {
-    background-color: $button-color_warning-bg-default;
     color: $button-color_warning-text-default;
+    background-color: $button-color_warning-bg-default;
+
     &:hover {
       background-color: $button-color_warning-bg-hover;
     }
+
     &:active {
       background-color: $button-color_warning-bg-active;
     }
   }
 
   &-danger {
-    background-color: $button-color_danger-bg-default;
     color: $button-color_danger-text-default;
+    background-color: $button-color_danger-bg-default;
+
     &:hover {
       background-color: $button-color_danger-bg-hover;
     }
+
     &:active {
       background-color: $button-color_danger-bg-active;
     }

diff --git a/packages/foundation/pagination/pagination.scss b/packages/foundation/pagination/pagination.scss
@@ -1,14 +1,13 @@
-@import "./variables.scss";
+@import "./variables";
 
 $module: #{$prefix}-pagination;
 
 .#{$module} {
   display: flex;
-  list-style: none;
-  padding: $pagination-spacing_item-margin;
   align-items: center;
-  margin-block-start: 0;
-  margin-block-end: 0;
+  padding: $pagination-spacing_item-margin;
+  margin-block: 0;
+  list-style: none;
 
   &-disabled {
     cursor: not-allowed;
@@ -19,35 +18,37 @@ $module: #{$prefix}-pagination;
 
   &-item {
     @include font-size-regular;
+
+    box-sizing: border-box;
     display: flex;
-    justify-content: center;
     align-items: center;
-    height: $pagination-size_item;
+    justify-content: center;
     min-width: $pagination-size_item;
+    height: $pagination-size_item;
     margin-inline-end: $pagination-spacing_item_margin;
-    border-radius: var(--snow-border-radius);
     cursor: pointer;
-    box-sizing: border-box;
     user-select: none;
+    border-radius: var(--snow-border-radius);
 
     &:hover {
       background-color: $pagination-color_item-bg-hover;
     }
 
     &-active {
-      border: 1px solid $pagination-color_item-border-active;
       color: $pagination-color_item-active;
+      border: 1px solid $pagination-color_item-border-active;
 
       &:hover {
-        border-color: $pagination-color_item-border-active-hover;
         color: $pagination-color_item-active-hover;
         background-color: transparent;
+        border-color: $pagination-color_item-border-active-hover;
       }
     }
 
     &-disabled {
       color: $pagination-color_item-text-disabled;
       cursor: not-allowed;
+
       &:hover {
         background-color: transparent;
       }
@@ -56,20 +57,22 @@ $module: #{$prefix}-pagination;
 
   &-total {
     @include font-size-regular;
+
     margin-right: $pagination-spacing_item-margin;
   }
 
   &-prev,
   &-next {
+    color: $pagination-color_item-active;
     cursor: pointer;
     background-color: transparent;
-    color: $pagination-color_item-active;
+
     &:hover {
       background-color: transparent;
     }
     &.#{$module}-item-disabled {
-      cursor: not-allowed;
       color: $pagination-color_item-disabled;
+      cursor: not-allowed;
     }
   }
 }
diff --git a/packages/theme-default/scss/_font.scss b/packages/theme-default/scss/_font.scss
@@ -1,48 +1,48 @@
 // font-size line-height绑定
 @mixin font-size-small {
+  font-family: $font-family-regular;
   font-size: $font-size-small;
   line-height: 16px;
-  font-family: $font-family-regular;
 }
 
 @mixin font-size-regular {
+  font-family: $font-family-regular;
   font-size: $font-size-regular;
   line-height: 20px;
-  font-family: $font-family-regular;
 }
 
 @mixin font-size-header-6 {
+  font-family: $font-family-regular;
   font-size: $font-size-header-6;
   line-height: 22px;
-  font-family: $font-family-regular;
 }
 
 @mixin font-size-header-5 {
+  font-family: $font-family-regular;
   font-size: $font-size-header-5;
   line-height: 24px;
-  font-family: $font-family-regular;
 }
 
 @mixin font-size-header-4 {
+  font-family: $font-family-regular;
   font-size: $font-size-header-4;
   line-height: 28px;
-  font-family: $font-family-regular;
 }
 
 @mixin font-size-header-3 {
+  font-family: $font-family-regular;
   font-size: $font-size-header-3;
   line-height: 32px;
-  font-family: $font-family-regular;
 }
 
 @mixin font-size-header-2 {
+  font-family: $font-family-regular;
   font-size: $font-size-header-2;
   line-height: 40px;
-  font-family: $font-family-regular;
 }
 
 @mixin font-size-header-1 {
+  font-family: $font-family-regular;
   font-size: $font-size-header-1;
   line-height: 44px;
-  font-family: $font-family-regular;
 }
diff --git a/packages/theme-default/scss/global.scss b/packages/theme-default/scss/global.scss
@@ -1,23 +1,19 @@
-@import "./palette.scss";
+@import "./palette";
 
 body, body[theme-mode="light"], body .snow-always-light {
   /* Color */
   --snow-color-default: var(--snow-gray-4);
   --snow-color-default-hover: var(--snow-gray-3);
   --snow-color-default-active: var(--snow-gray-5);
-
   --snow-color-primary: var(--snow-blue-6);
   --snow-color-primary-hover: var(--snow-blue-5);
   --snow-color-primary-active: var(--snow-blue-7);
-
   --snow-color-warning: var(--snow-orange-6);
   --snow-color-warning-hover: var(--snow-orange-5);
   --snow-color-warning-active: var(--snow-orange-7);
-
   --snow-color-danger: var(--snow-red-6);
   --snow-color-danger-hover: var(--snow-red-5);
   --snow-color-danger-active: var(--snow-red-7);
-
   --snow-front-color: var(--snow-black);
 
   /* Padding */

diff --git a/packages/theme-default/scss/index.scss b/packages/theme-default/scss/index.scss
@@ -1,3 +1,3 @@
-@import './variables.scss'; /* 全局的 scss 级变量 */
-@import './font.scss'; /* 常用封装字体 */
-@import './mixin.scss'; /* 常用封装样式 */
+@import './variables'; /* 全局的 scss 级变量 */
+@import './font'; /* 常用封装字体 */
+@import './mixin'; /* 常用封装样式 */
diff --git a/packages/theme-default/scss/variables.scss b/packages/theme-default/scss/variables.scss
@@ -1,9 +1,9 @@
 $prefix: 'snow';
 
 /* Front */
-$font-family-regular: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+$font-family-regular: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI',
 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
-Helvetica, Arial, sans-serif; // semi 预置字体回退
+helvetica, arial, sans-serif; // semi 预置字体回退
 $font-size-small: 12px; // 小文本字号
 $font-size-regular: 14px; // 常规文本字号