chore: integrate stylelint

.github/workflows/ci-lint.yml

@@ -10,7 +10,7 @@ permissions:
     contents: read
 
 jobs:
-    build:
+    eslint:
         runs-on: ubuntu-latest
 
         env:
@@ -57,8 +57,87 @@ jobs:
             - name: Install dependencies
               run: pnpm install
 
+            - name: 🌡️ Run ESLint
+              run: pnpm run lint
+
+    typecheck:
+        runs-on: ubuntu-latest
+
+        env:
+            TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+            TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Install Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v2
+              with:
+                  version: 8
+                  run_install: false
+
+            - name: Get pnpm store directory
+              shell: bash
+              run: |
+                  echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+            - name: Setup pnpm cache
+              uses: actions/cache@v3
+              with:
+                  path: ${{ env.STORE_PATH }}
+                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-pnpm-store-
+
+            - name: Install dependencies
+              run: pnpm install
+
             - name: 🧼 Type checking
               run: npx tsc --noEmit
 
-            - name: 🌡️ Run ESLint
-              run: pnpm run lint
+    styelint:
+        runs-on: ubuntu-latest
+
+        env:
+            TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+            TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Install Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v2
+              with:
+                  version: 8
+                  run_install: false
+
+            - name: Get pnpm store directory
+              shell: bash
+              run: |
+                  echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+            - name: Setup pnpm cache
+              uses: actions/cache@v3
+              with:
+                  path: ${{ env.STORE_PATH }}
+                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-pnpm-store-
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: 🎨 Run Stylelint
+              run: pnpm run lint:style

.stylelintrc.json

@@ -0,0 +1,13 @@
+{
+    "extends": ["stylelint-config-standard-less", "stylelint-config-prettier", "stylelint-config-clean-order"],
+    "rules": {
+        "selector-pseudo-class-no-unknown": [
+            true,
+            {
+                "ignorePseudoClasses": ["export"]
+            }
+        ],
+        "no-duplicate-selectors": null,
+        "no-descending-specificity": null
+    }
+}

package.json

@@ -13,6 +13,7 @@
         "prepare": "husky install",
         "pre-commit": "lint-staged",
         "lint": "eslint --cache packages/**/src/**/*.{tsx,ts}",
+        "lint:style": "stylelint **/*.less",
         "lint:fix": "eslint packages/**/src/**/*.{tsx,ts} --fix",
         "storybook": "storybook dev -p 6006 --no-open",
         "build:storybook": "storybook build"
@@ -60,6 +61,11 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "storybook": "^7.5.3",
+        "stylelint": "^15.11.0",
+        "stylelint-config-clean-order": "^5.2.0",
+        "stylelint-config-prettier": "^9.0.5",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-config-standard-less": "^2.0.0",
         "ts-node": "^10.9.1",
         "turbo": "^1.10.16",
         "typescript": "^5.2.2"

packages/base-ui/src/components/menu/index.module.less

@@ -6,13 +6,13 @@
 
         &-content {
             display: inline-flex;
-            align-items: center;
             gap: var(--margin-xs);
+            align-items: center;
         }
 
         &-more-icon {
-            color: rgb(var(--text-color));
             font-size: var(--font-size-sm);
+            color: rgb(var(--text-color));
         }
     }
 }

packages/base-ui/src/components/notification/index.module.less

@@ -2,47 +2,57 @@
 
 .notification {
     position: fixed;
+
     display: flex;
-    align-items: flex-end;
     flex-direction: column;
-    box-sizing: border-box;
+    align-items: flex-end;
     justify-content: center;
+
+    box-sizing: border-box;
     margin: var(--margin-xs) 0;
 
     &-notice {
         display: flex;
+        gap: var(--margin-xs);
         justify-content: space-between;
+
+        width: @width;
         padding: var(--padding-lg);
+
         font-size: var(--font-size-lg);
+
         background-color: rgb(var(--color-white));
         border-radius: var(--border-radius-base);
         box-shadow: var(--box-shadow-lg);
-        gap: var(--margin-xs);
-        width: @width;
 
         &-wrapper {
             margin: var(--margin-xs) var(--margin-base);
         }
 
         &-content {
             display: inline-flex;
+            gap: var(--margin-xs);
             align-items: center;
             align-items: flex-start;
-            gap: var(--margin-xs);
         }
 
         &-close {
-            color: rgb(var(--text-color-secondary));
             cursor: pointer;
-            outline: none;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
             width: fit-content;
             height: fit-content;
             padding: var(--padding-xs);
+
+            color: rgb(var(--text-color-secondary));
+
             border-radius: var(--border-radius-base);
+            outline: none;
+
             transition: background-color .2s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
 
             &:hover {
                 background-color: rgb(var(--bg-color-hover));
@@ -71,11 +81,11 @@
     }
 
     &-content-container {
-
         display: inline-flex;
-        align-items: flex-start;
         flex-direction: column;
         gap: var(--margin-xs);
+        align-items: flex-start;
+
         padding-top: var(--padding-xs);
     }
 
@@ -87,11 +97,12 @@
         color: rgb(var(--text-color-secondary));
 
         &-ellipsis {
+            overflow: hidden;
             // Omit beyond the specified number of lines
             display: -webkit-box;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
             text-overflow: ellipsis;
+
+            -webkit-box-orient: vertical;
         }
     }
 
@@ -148,33 +159,36 @@
 
       &-fade-leave {
         .fade-effect();
+
         animation-play-state: paused;
       }
 
       &-fade-appear&-fade-appear-active,
       &-fade-enter&-fade-enter-active {
-        animation-name: notificationFadeIn;
+        animation-name: notification-fade-in;
         animation-play-state: running;
       }
 
       &-fade-leave&-fade-leave-active {
-        animation-name: notificationFadeOut;
+        animation-name: notification-fade-out;
         animation-play-state: running;
       }
 
-      @keyframes notificationFadeIn {
+      @keyframes notification-fade-in {
         0% {
           opacity: 0;
         }
+
         100% {
           opacity: 1;
         }
       }
 
-      @keyframes notificationFadeOut {
+      @keyframes notification-fade-out {
         0% {
           opacity: 1;
         }
+
         100% {
           opacity: 0;
         }

packages/base-ui/src/views/app.module.less

@@ -1,28 +1,32 @@
 .app {
     &-layout {
-        height: 100%;
-        -webkit-font-smoothing: antialiased;
-        background-color: rgb(var(--bg-color));
         display: flex;
         flex-direction: column;
+
+        height: 100%;
+
+        background-color: rgb(var(--bg-color));
+
+        -webkit-font-smoothing: antialiased;
     }
 
     &-header {
         // height: 32px;
     }
 
     &-container {
-        flex: 1;
         display: grid;
         grid-template-columns: 1fr auto;
+        flex: 1;
 
         &-main {
-            border-top: 1px solid rgb(var(--border-color));
-            border-bottom: 1px solid rgb(var(--border-color));
             overflow: hidden;
             display: grid;
             grid-template-rows: auto 1fr;
 
+            border-top: 1px solid rgb(var(--border-color));
+            border-bottom: 1px solid rgb(var(--border-color));
+
             &&-collapsed {
                 border-right: 1px solid rgb(var(--border-color));
                 border-top-right-radius: var(--border-radius-lg);

packages/base-ui/src/views/components/doc-bars/Button/index.module.less

@@ -1,27 +1,32 @@
 @toolbar-btn-size: 24px;
 
 .toolbar-btn {
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     width: @toolbar-btn-size;
     height: @toolbar-btn-size;
     padding: 0;
+
     font-size: var(--font-size-base);
-    background-color: transparent;
     color: rgb(var(--text-color));
+
+    background-color: transparent;
     border: none;
     border-radius: var(--border-radius-base);
-    display: flex;
-    justify-content: center;
-    align-items: center;
     outline: none;
-    cursor: pointer;
 
     &:not([disabled]):hover {
         background-color: rgb(var(--grey-100));
         border-color: transparent;
     }
+
     &[disabled] {
-        color: rgb(var(--grey-200));
         cursor: not-allowed;
+        color: rgb(var(--grey-200));
     }
 
     &-active {
@@ -30,4 +35,3 @@
         border-color: transparent;
     }
 }
-