diff --git a/.gitignore b/.gitignore
index 104ae3f9ec9..a59a9accf8e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ tmp
 test/coverage
 packages/**/src/style/raw.ts
 .eslintcache
+.stylelintcache
diff --git a/.stylelintrc b/.stylelintrc
index 64fb0e09263..1927464f042 100755
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -15,6 +15,11 @@
     "no-invalid-double-slash-comments": null,
     "no-descending-specificity": null,
     "declaration-empty-line-before": null,
-    "no-duplicate-selectors": null
+    "no-duplicate-selectors": null,
+    "value-no-vendor-prefix": null,
+    "selector-pseudo-class-no-unknown": null,
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "number-max-precision": null
   }
 }
diff --git a/examples/x6-example-features/src/layouts/index.less b/examples/x6-example-features/src/layouts/index.less
index f3da6be5a69..cc8fb15c012 100644
--- a/examples/x6-example-features/src/layouts/index.less
+++ b/examples/x6-example-features/src/layouts/index.less
@@ -7,17 +7,17 @@
 
 .nav {
   position: absolute;
-  z-index: 101;
   top: 0;
   bottom: 0;
   left: 0;
-  font-size: 13px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  z-index: 101;
+  box-sizing: border-box;
   width: 220px;
   padding: 0 16px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: 13px;
   border-right: 1px solid #e9e9e9;
-  box-sizing: border-box;
 
   ul {
     padding-left: 16px;
@@ -29,11 +29,11 @@
 }
 
 .content {
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
   flex-grow: 1;
+  box-sizing: border-box;
   margin-left: 220px;
-  background: #ffffff;
   padding: 34px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
 }
diff --git a/examples/x6-example-features/src/pages/case/index.less b/examples/x6-example-features/src/pages/case/index.less
index c573b9f02f6..b3946e174b0 100644
--- a/examples/x6-example-features/src/pages/case/index.less
+++ b/examples/x6-example-features/src/pages/case/index.less
@@ -8,13 +8,15 @@
     border: 1px solid #c2c8d5;
     border-left: 4px solid #1890ff;
     border-radius: 4px;
-    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 5px 1px rgb(0 0 0 / 6%);
+
     img {
+      flex-shrink: 0;
       width: 20px;
       height: 20px;
-      flex-shrink: 0;
       margin-left: 8px;
     }
+
     .label {
       display: inline-block;
       flex-shrink: 0;
@@ -23,15 +25,19 @@
       color: #666;
       font-size: 12px;
     }
+
     .status {
       flex-shrink: 0;
     }
+
     &.success {
       border-left: 4px solid #52c41a;
     }
+
     &.failed {
       border-left: 4px solid #ff4d4f;
     }
+
     &.running .status img {
       animation: spin 1s linear infinite;
     }
@@ -43,11 +49,13 @@
       border-radius: 2px;
       box-shadow: 0 0 0 4px #d4e8fe;
     }
+
     .node.success {
       border-color: #52c41a;
       border-radius: 2px;
       box-shadow: 0 0 0 4px #ccecc0;
     }
+
     .node.failed {
       border-color: #ff4d4f;
       border-radius: 2px;
@@ -80,6 +88,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
diff --git a/examples/x6-example-features/src/pages/case/mind.less b/examples/x6-example-features/src/pages/case/mind.less
index c6504d553fb..baf37538a2c 100644
--- a/examples/x6-example-features/src/pages/case/mind.less
+++ b/examples/x6-example-features/src/pages/case/mind.less
@@ -4,6 +4,7 @@
       visibility: hidden;
       cursor: pointer;
     }
+
     &:hover image {
       visibility: visible;
     }
diff --git a/examples/x6-example-features/src/pages/dnd/index.less b/examples/x6-example-features/src/pages/dnd/index.less
index 26ddbc5817e..f8eba697560 100644
--- a/examples/x6-example-features/src/pages/dnd/index.less
+++ b/examples/x6-example-features/src/pages/dnd/index.less
@@ -2,24 +2,25 @@
   position: relative;
 }
 
-.validating:after {
+.validating::after {
   position: absolute;
   top: 4px;
   left: 4px;
-  content: ' ';
   display: block;
   width: 50px;
   height: 50px;
-  border-radius: 50%;
   border: 6px solid #873bf4;
-  border-color: #873bf4 transparent #873bf4 transparent;
+  border-color: #873bf4 transparent;
+  border-radius: 50%;
   animation: lds-dual-ring 1.2s linear infinite;
+  content: ' ';
 }
 
 @keyframes lds-dual-ring {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
diff --git a/examples/x6-example-features/src/pages/graph/index.less b/examples/x6-example-features/src/pages/graph/index.less
index 9b7ec268b02..c7aa70b59a0 100644
--- a/examples/x6-example-features/src/pages/graph/index.less
+++ b/examples/x6-example-features/src/pages/graph/index.less
@@ -2,14 +2,14 @@
   .x6-example-wrap {
     width: 100%;
     height: 100%;
-    background-color: #ffffff;
+    background-color: #fff;
 
     .left-side {
       position: fixed;
-      width: 336px;
-      left: 24px;
-      top: 0px;
+      top: 0;
       bottom: 0;
+      left: 24px;
+      width: 336px;
       padding: 0 8px;
       overflow-x: visible;
       overflow-y: auto;
@@ -17,18 +17,18 @@
 
     .right-side {
       position: fixed;
+      top: 0;
       right: 24px;
+      bottom: 0;
       width: 336px;
       padding: 0 8px;
-      top: 0px;
-      bottom: 0;
       overflow-x: visible;
       overflow-y: auto;
     }
 
     .ant-card {
-      box-shadow: 0 0 10px 1px #e9e9e9;
       margin-top: 24px;
+      box-shadow: 0 0 10px 1px #e9e9e9;
     }
 
     .ant-row-flex {
@@ -36,14 +36,14 @@
     }
 
     .slider-value {
-      background: #eee;
-      color: #333333;
-      padding: 3px 7px;
-      border-radius: 10px;
       display: inline-block;
-      font-size: 12px;
       margin-left: 8px;
+      padding: 3px 7px;
+      color: #333;
+      font-size: 12px;
       line-height: 1.25;
+      background: #eee;
+      border-radius: 10px;
     }
 
     .x6-graph {
@@ -52,15 +52,15 @@
 
     .x6-node {
       path {
-        fill: #6a6c8a;
-        stroke-width: 0px;
         transition: fill 0.1s;
+        fill: #6a6c8a;
+        stroke-width: 0;
       }
 
       text {
-        fill: #fff;
-        font-size: 12px;
         font-weight: lighter;
+        font-size: 12px;
+        fill: #fff;
       }
 
       &:hover path {
@@ -80,37 +80,37 @@
     }
 
     .bbox {
+      transition-duration: 0.5s;
+      transition-property: stroke-opacity;
+      pointer-events: none;
+      fill: none;
       stroke: #16a085;
       stroke-width: 2;
       stroke-opacity: 0;
-      fill: none;
-      transition-property: stroke-opacity;
-      transition-duration: 0.5s;
-      pointer-events: none;
     }
 
     .axis {
+      pointer-events: none;
       stroke: #95a5a6;
       stroke-dasharray: 2, 4;
       stroke-width: 1;
-      pointer-events: none;
     }
 
     .padding {
-      stroke: #1abc9c;
-      stroke-opacity: 0;
-      transition-property: stroke-opacity;
       transition-duration: 1s;
+      transition-property: stroke-opacity;
       pointer-events: none;
+      stroke: #1abc9c;
+      stroke-opacity: 0;
     }
 
     .grid {
+      transition-duration: 1s;
+      transition-property: stroke-opacity;
+      pointer-events: none;
       stroke: #16a085;
       stroke-width: 0.5;
       stroke-opacity: 0;
-      transition-property: stroke-opacity;
-      transition-duration: 1s;
-      pointer-events: none;
     }
 
     .active {
diff --git a/examples/x6-example-features/src/pages/html/index.less b/examples/x6-example-features/src/pages/html/index.less
index eb6192e470f..9571f7e45f3 100644
--- a/examples/x6-example-features/src/pages/html/index.less
+++ b/examples/x6-example-features/src/pages/html/index.less
@@ -1,9 +1,9 @@
 .custom-html {
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
   color: #000;
   font-size: 16px;
   border: 1px solid #000;
diff --git a/examples/x6-example-features/src/pages/index.less b/examples/x6-example-features/src/pages/index.less
index 678c563e133..a967bd3ea7a 100644
--- a/examples/x6-example-features/src/pages/index.less
+++ b/examples/x6-example-features/src/pages/index.less
@@ -1,27 +1,27 @@
 .x6-graph-wrap {
   width: 100%;
   height: 100%;
-  background-color: #ffffff;
-  overflow: auto;
   padding: 32px 0;
+  overflow: auto;
+  background-color: #fff;
 
   > h1 {
     display: block;
     width: 800px;
-    margin: 0 auto 32px auto;
+    margin: 0 auto 32px;
   }
 }
 
 .x6-graph-tools {
   width: 800px;
-  margin: 0 auto 32px auto;
+  margin: 0 auto 32px;
 }
 
 .x6-graph {
   width: 100%;
   height: 100%;
-  box-shadow: 0 0 10px 1px #e9e9e9;
   margin: 0 auto;
+  box-shadow: 0 0 10px 1px #e9e9e9;
 }
 
 .x6-node-selected {
diff --git a/examples/x6-example-features/src/pages/react/index.less b/examples/x6-example-features/src/pages/react/index.less
index ae83784f3d4..94606dba1ad 100644
--- a/examples/x6-example-features/src/pages/react/index.less
+++ b/examples/x6-example-features/src/pages/react/index.less
@@ -1,10 +1,10 @@
 .react-algo-node {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   border: 1px solid #5f95ff;
   border-radius: 14px;
-  display: flex;
-  align-items: center;
 
   img {
     width: 24px;
@@ -13,8 +13,8 @@
 
   span {
     margin-left: 4px;
-    font-size: 12px;
     color: #000000a6;
+    font-size: 12px;
   }
 
   &.dark {
diff --git a/examples/x6-example-features/src/pages/react/port.less b/examples/x6-example-features/src/pages/react/port.less
index 4a56757f0f3..2d7f921b58b 100644
--- a/examples/x6-example-features/src/pages/react/port.less
+++ b/examples/x6-example-features/src/pages/react/port.less
@@ -2,20 +2,20 @@
   .my-port {
     width: 100%;
     height: 100%;
+    background: #eee;
     border: 1px solid #808080;
     border-radius: 100%;
-    background: #eee;
 
     &.connected {
       width: 0;
       height: 0;
       margin-top: 5px;
       margin-left: 1px;
-      border-width: 5px 4px 0;
-      border-style: solid;
+      background-color: transparent;
       border-color: #808080 transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0;
       border-radius: 0;
-      background-color: transparent;
     }
   }
 
@@ -30,30 +30,30 @@
     }
 
     body > div::before {
-      content: ' ';
       float: left;
+      box-sizing: border-box;
       width: 20px;
       height: 20px;
       margin-top: -5px;
       margin-left: -5px;
+      background-color: rgb(57 202 116 / 60%);
       border-radius: 50%;
-      background-color: rgba(57, 202, 116, 0.6);
-      box-sizing: border-box;
+      content: ' ';
     }
 
     body > div::after {
-      content: ' ';
+      position: relative;
+      z-index: 10;
       float: left;
       clear: both;
+      box-sizing: border-box;
       width: 10px;
       height: 10px;
       margin-top: -15px;
-      border-radius: 50%;
       background-color: #fff;
       border: 1px solid #39ca74;
-      position: relative;
-      z-index: 10;
-      box-sizing: border-box;
+      border-radius: 50%;
+      content: ' ';
     }
   }
 
@@ -65,30 +65,30 @@
     }
 
     body > div::before {
-      content: ' ';
       float: left;
+      box-sizing: border-box;
       width: 28px;
       height: 28px;
       margin-top: -9px;
       margin-left: -9px;
+      background-color: rgb(57 202 116 / 60%);
       border-radius: 50%;
-      background-color: rgba(57, 202, 116, 0.6);
-      box-sizing: border-box;
+      content: ' ';
     }
 
     body > div::after {
-      content: ' ';
+      position: relative;
+      z-index: 10;
       float: left;
       clear: both;
+      box-sizing: border-box;
       width: 10px;
       height: 10px;
       margin-top: -19px;
-      border-radius: 50%;
       background-color: #fff;
       border: 1px solid #39ca74;
-      position: relative;
-      z-index: 10;
-      box-sizing: border-box;
+      border-radius: 50%;
+      content: ' ';
     }
   }
 }
diff --git a/examples/x6-example-features/src/pages/scroller/index.less b/examples/x6-example-features/src/pages/scroller/index.less
index ff91877376f..dcd0c3423fc 100644
--- a/examples/x6-example-features/src/pages/scroller/index.less
+++ b/examples/x6-example-features/src/pages/scroller/index.less
@@ -1,4 +1,4 @@
 .x6-graph-scroller {
-  box-shadow: 0 0 10px 1px #e9e9e9;
   margin: 0 auto;
+  box-shadow: 0 0 10px 1px #e9e9e9;
 }
diff --git a/examples/x6-example-features/src/pages/table/component.less b/examples/x6-example-features/src/pages/table/component.less
index a18388cb2f0..b1070c02881 100644
--- a/examples/x6-example-features/src/pages/table/component.less
+++ b/examples/x6-example-features/src/pages/table/component.less
@@ -1,20 +1,20 @@
 .react-table {
   width: 100%;
   height: 100%;
-  border: 1px solid #edf2f5;
+  overflow: hidden;
   background-color: #fff;
+  border: 1px solid #edf2f5;
   border-radius: 5px;
-  overflow: hidden;
 
   .inner {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     padding: 12px;
-    border: 1px solid #fff;
     background: #edf2f5;
+    border: 1px solid #fff;
     border-radius: 5px;
-    display: flex;
-    flex-direction: column;
   }
 
   .header {
@@ -36,21 +36,21 @@
   }
 
   ul {
-    padding: 0;
     margin: 0;
+    padding: 0;
   }
 
   li {
-    list-style: none;
     height: 40px;
-    line-height: 40px;
     padding-left: 16px;
+    line-height: 40px;
+    list-style: none;
     border: 1px solid transparent;
 
     &:hover {
-      border: 1px solid #1890ff;
       // background: rgba(230,247,255,.92);
       z-index: 0;
+      border: 1px solid #1890ff;
     }
   }
 }
@@ -58,8 +58,8 @@
 .react-table-port {
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  background: #eee;
   border: 1px solid #808080;
   border-radius: 100%;
-  background: #eee;
-  overflow: hidden;
 }
diff --git a/examples/x6-example-features/src/pages/v2/index.less b/examples/x6-example-features/src/pages/v2/index.less
index 82ad0894627..a0992d993af 100644
--- a/examples/x6-example-features/src/pages/v2/index.less
+++ b/examples/x6-example-features/src/pages/v2/index.less
@@ -1,41 +1,44 @@
 .tools {
   width: 800px;
   margin: 32px auto;
+
   .ant-input {
     margin-bottom: 16px;
   }
 }
 
 .react-node {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   border: 1px solid #5f95ff;
   border-radius: 14px;
-  display: flex;
-  align-items: center;
+
   img {
     width: 24px;
     height: 24px;
   }
+
   span {
     margin-left: 4px;
-    font-size: 12px;
     color: #000000a6;
+    font-size: 12px;
   }
 }
 
 .stutterer {
-  transform: scale(1.5);
-  height: 310px;
-  width: 310px;
   position: absolute;
-  left: 0;
-  right: 0;
   top: 0;
+  right: 0;
   bottom: 0;
+  left: 0;
+  width: 310px;
+  height: 310px;
   margin: auto;
-  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
   border-radius: 200px;
+  box-shadow: 0 0 10px 10px rgb(0 0 0 / 20%);
+  transform: scale(1.5);
 }
 
 .clockHand {
@@ -50,12 +53,12 @@
 }
 
 .innerLine {
-  border-radius: 6px;
   position: absolute;
-  height: 149px;
-  left: 47.5%;
   top: 0%;
+  left: 47.5%;
   width: 5%;
+  height: 149px;
   background-color: red;
+  border-radius: 6px;
   transform-origin: bottom center;
 }
diff --git a/package.json b/package.json
index 3078269ed43..7a0677ca804 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "preinstall": "node ./scripts/preinstall",
     "lint:ts": "eslint '**/src/**/*.{js,ts}?(x)' --cache --fix",
-    "lint:style": "stylelint '**/src/**/*.less' --syntax less --cache --fix",
+    "lint:style": "stylelint '**/src/**/*.less' --customSyntax postcss-less --cache --fix",
     "lint": "run-s lint:ts lint:style",
     "prettier": "prettier --write '**/*.{js,mjs,jsx,tsx,ts,less,md,json}'",
     "pretty-quick": "pretty-quick",
@@ -138,6 +138,7 @@
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.19",
+    "postcss-less": "^6.0.0",
     "prettier": "^2.8.0",
     "pretty-quick": "^3.1.1",
     "rimraf": "^3.0.2",
diff --git a/packages/x6-common/src/color/index.ts b/packages/x6-common/src/color/index.ts
index d86c5ac5127..293d7c806fc 100644
--- a/packages/x6-common/src/color/index.ts
+++ b/packages/x6-common/src/color/index.ts
@@ -1,3 +1,5 @@
+/* eslint-disable no-constructor-return */
+
 import { NumberExt } from '../number'
 
 export class Color {
diff --git a/packages/x6-common/src/object/object.ts b/packages/x6-common/src/object/object.ts
index a56879777e1..8def7348b03 100644
--- a/packages/x6-common/src/object/object.ts
+++ b/packages/x6-common/src/object/object.ts
@@ -117,6 +117,7 @@ export function unsetByPath(
   return obj
 }
 
+// eslint-disable-next-line default-param-last
 export function flatten(obj: any, delim = '/', stop?: (val: any) => boolean) {
   const ret: { [key: string]: any } = {}
 
diff --git a/packages/x6-geometry/src/path/util.ts b/packages/x6-geometry/src/path/util.ts
index 3410cd876d1..3e8863d6443 100644
--- a/packages/x6-geometry/src/path/util.ts
+++ b/packages/x6-geometry/src/path/util.ts
@@ -1,6 +1,8 @@
+/* eslint-disable default-param-last */
+
 import { Point } from '../point'
 
-const regexSupportedData = new RegExp(`^[\\s\\dLMCZz,.]*$`)
+const regexSupportedData = new RegExp(`^[\\s\\dLMCZz,.]*$`) // eslint-disable-line prefer-regex-literals
 
 export function isValid(data: any) {
   if (typeof data !== 'string') {
diff --git a/packages/x6-geometry/src/polyline.ts b/packages/x6-geometry/src/polyline.ts
index d4766838156..6d88bd2d132 100644
--- a/packages/x6-geometry/src/polyline.ts
+++ b/packages/x6-geometry/src/polyline.ts
@@ -1,3 +1,5 @@
+/* eslint-disable no-constructor-return */
+
 import { Line } from './line'
 import { Point } from './point'
 import { Rectangle } from './rectangle'
diff --git a/packages/x6-plugin-minimap/src/index.less b/packages/x6-plugin-minimap/src/index.less
index 64eb7ca0333..36ae85e3dbb 100755
--- a/packages/x6-plugin-minimap/src/index.less
+++ b/packages/x6-plugin-minimap/src/index.less
@@ -17,7 +17,7 @@
 
     > svg {
       pointer-events: none;
-      shape-rendering: optimizeSpeed;
+      shape-rendering: optimizespeed;
     }
 
     .x6-node * {
diff --git a/packages/x6-plugin-scroller/src/index.less b/packages/x6-plugin-scroller/src/index.less
index cd02662d6fe..4fb6e52d4ef 100755
--- a/packages/x6-plugin-scroller/src/index.less
+++ b/packages/x6-plugin-scroller/src/index.less
@@ -37,14 +37,10 @@
 
   &&-pannable[data-panning='false'] {
     cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
   }
 
   &&-pannable[data-panning='true'] {
     cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
     user-select: none;
   }
 }
diff --git a/packages/x6-plugin-stencil/src/index.less b/packages/x6-plugin-stencil/src/index.less
index c6d407af8b6..b36899e66cc 100644
--- a/packages/x6-plugin-stencil/src/index.less
+++ b/packages/x6-plugin-stencil/src/index.less
@@ -247,12 +247,12 @@
   }
 
   input[type='search'] {
-    -webkit-appearance: textfield;
+    appearance: textfield;
   }
 
   input[type='search']::-webkit-search-cancel-button,
   input[type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
+    appearance: none;
   }
 
   &-search-text {
diff --git a/packages/x6-react-components/src/auto-scroll-box/style/index.less b/packages/x6-react-components/src/auto-scroll-box/style/index.less
index 8c93099693c..ab252a9f692 100644
--- a/packages/x6-react-components/src/auto-scroll-box/style/index.less
+++ b/packages/x6-react-components/src/auto-scroll-box/style/index.less
@@ -1 +1 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
diff --git a/packages/x6-react-components/src/color-picker/style/index.less b/packages/x6-react-components/src/color-picker/style/index.less
index 83aaf1235ec..ec914186b95 100644
--- a/packages/x6-react-components/src/color-picker/style/index.less
+++ b/packages/x6-react-components/src/color-picker/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @color-picker-prefix-cls: ~'@{x6-prefix}-color-picker';
 
@@ -27,7 +27,7 @@
       background: transparent;
 
       .sketch-picker {
-        box-shadow: #e9e9e9 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 8px 16px !important;
+        box-shadow: #e9e9e9 0 0 0 1px, rgb(0 0 0 / 10%) 0 8px 16px !important;
       }
     }
   }
diff --git a/packages/x6-react-components/src/context-menu/style/index.less b/packages/x6-react-components/src/context-menu/style/index.less
index e88174a206b..94de8946fdd 100644
--- a/packages/x6-react-components/src/context-menu/style/index.less
+++ b/packages/x6-react-components/src/context-menu/style/index.less
@@ -1,2 +1,2 @@
-@import '../../style/themes/index';
-@import '../../menu/style/index';
+@import url('../../style/themes/index');
+@import url('../../menu/style/index');
diff --git a/packages/x6-react-components/src/dropdown/style/index.less b/packages/x6-react-components/src/dropdown/style/index.less
index ac4d84b6480..dbaf18a7f62 100644
--- a/packages/x6-react-components/src/dropdown/style/index.less
+++ b/packages/x6-react-components/src/dropdown/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @dropdown-prefix-cls: ~'@{x6-prefix}-dropdown';
 
@@ -11,7 +11,7 @@
   max-height: 320px;
   overflow-y: scroll;
   border-radius: 3px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
 
   // &::before {
   //   position: absolute;
diff --git a/packages/x6-react-components/src/menu/style/index.less b/packages/x6-react-components/src/menu/style/index.less
index 314cb13d2f3..702bcc7496d 100644
--- a/packages/x6-react-components/src/menu/style/index.less
+++ b/packages/x6-react-components/src/menu/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @menu-prefix-cls: ~'@{x6-prefix}-menu';
 
@@ -103,8 +103,8 @@
     right: 12px;
     width: 0;
     height: 0;
-    border-top: 4px solid rgba(0, 0, 0, 0);
-    border-bottom: 4px solid rgba(0, 0, 0, 0);
+    border-top: 4px solid rgb(0 0 0 / 0%);
+    border-bottom: 4px solid rgb(0 0 0 / 0%);
     border-left: 5px solid @menu-submenu-arrow-color;
     opacity: 0.4;
     pointer-events: none;
diff --git a/packages/x6-react-components/src/menubar/style/index.less b/packages/x6-react-components/src/menubar/style/index.less
index 7b5e18eddb8..9601e7f178b 100644
--- a/packages/x6-react-components/src/menubar/style/index.less
+++ b/packages/x6-react-components/src/menubar/style/index.less
@@ -1,5 +1,5 @@
-@import '../../style/themes/index';
-@import '../../menu/style/index';
+@import url('../../style/themes/index');
+@import url('../../menu/style/index');
 
 @menubar-prefix-cls: ~'@{x6-prefix}-menubar';
 
@@ -96,7 +96,7 @@
     }
 
     & > .@{menu-prefix-cls} {
-      border-radius: 0 4px 4px 4px;
+      border-radius: 0 4px 4px;
     }
 
     .@{menu-prefix-cls}-submenu-menu {
diff --git a/packages/x6-react-components/src/scroll-box/style/index.less b/packages/x6-react-components/src/scroll-box/style/index.less
index 868baa5e4f9..5b2badd37e2 100644
--- a/packages/x6-react-components/src/scroll-box/style/index.less
+++ b/packages/x6-react-components/src/scroll-box/style/index.less
@@ -1,5 +1,5 @@
-@import '../../style/themes/index';
-@import '../../scrollbar/style/index';
+@import url('../../style/themes/index');
+@import url('../../scrollbar/style/index');
 
 @scrollBox-prefix-cls: ~'@{x6-prefix}-scroll-box';
 
diff --git a/packages/x6-react-components/src/scrollbar/style/index.less b/packages/x6-react-components/src/scrollbar/style/index.less
index c93f63daef4..b5d4aa5e1c0 100644
--- a/packages/x6-react-components/src/scrollbar/style/index.less
+++ b/packages/x6-react-components/src/scrollbar/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @scrollbar-prefix-cls: ~'@{x6-prefix}-scrollbar';
 
diff --git a/packages/x6-react-components/src/split-box/style/index.less b/packages/x6-react-components/src/split-box/style/index.less
index 0be97eaf05e..e3d917631bc 100644
--- a/packages/x6-react-components/src/split-box/style/index.less
+++ b/packages/x6-react-components/src/split-box/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @splitBox-prefix-cls: ~'@{x6-prefix}-split-box';
 
diff --git a/packages/x6-react-components/src/style/index.less b/packages/x6-react-components/src/style/index.less
index 35993af8a27..d13b818d409 100755
--- a/packages/x6-react-components/src/style/index.less
+++ b/packages/x6-react-components/src/style/index.less
@@ -1 +1 @@
-@import './themes/index';
+@import url('./themes/index');
diff --git a/packages/x6-react-components/src/style/themes/index.less b/packages/x6-react-components/src/style/themes/index.less
index f19386d8b2f..e97b5b4b3ce 100644
--- a/packages/x6-react-components/src/style/themes/index.less
+++ b/packages/x6-react-components/src/style/themes/index.less
@@ -1 +1 @@
-@import './default.less';
+@import url('./default.less');
diff --git a/packages/x6-react-components/src/toolbar/style/index.less b/packages/x6-react-components/src/toolbar/style/index.less
index 91743e5b347..c28a29fd4bb 100644
--- a/packages/x6-react-components/src/toolbar/style/index.less
+++ b/packages/x6-react-components/src/toolbar/style/index.less
@@ -1,5 +1,5 @@
-@import '../../style/themes/index';
-@import '../../dropdown/style/index';
+@import url('../../style/themes/index');
+@import url('../../dropdown/style/index');
 
 @toolbar-prefix-cls: ~'@{x6-prefix}-toolbar';
 
@@ -42,7 +42,7 @@
       width: 1px;
       height: 40%;
       margin: 0 6px;
-      background-color: rgba(0, 0, 0, 0.15);
+      background-color: rgb(0 0 0 / 15%);
       content: ' ';
       pointer-events: none;
     }
@@ -111,9 +111,9 @@
     width: 0;
     height: 0;
     margin-left: 6px;
-    border-color: #262626 transparent transparent transparent;
+    border-color: #262626 transparent transparent;
     border-style: solid;
-    border-width: 5px 4px 0 4px;
+    border-width: 5px 4px 0;
     opacity: 0.4;
   }
 
diff --git a/packages/x6/src/index.less b/packages/x6/src/index.less
index f3259a1a009..536906b20af 100644
--- a/packages/x6/src/index.less
+++ b/packages/x6/src/index.less
@@ -1,4 +1,4 @@
-@import './style/index';
+@import url('./style/index');
 
 // tools
-@import './registry/tool/editor';
+@import url('./registry/tool/editor');
diff --git a/packages/x6/src/registry/tool/editor.less b/packages/x6/src/registry/tool/editor.less
index 33355e4947d..b9cae70bda5 100644
--- a/packages/x6/src/registry/tool/editor.less
+++ b/packages/x6/src/registry/tool/editor.less
@@ -1,4 +1,4 @@
-@import '../../style/index';
+@import url('../../style/index');
 
 .@{x6-prefix}-cell-tool-editor {
   position: relative;
diff --git a/packages/x6/src/style/index.less b/packages/x6/src/style/index.less
index 14e507bc3b9..b2b50b20e55 100755
--- a/packages/x6/src/style/index.less
+++ b/packages/x6/src/style/index.less
@@ -1,4 +1,4 @@
-@import './themes/index';
+@import url('./themes/index');
 
 .noScalingStroke() {
   vector-effect: non-scaling-stroke;
diff --git a/packages/x6/src/style/themes/index.less b/packages/x6/src/style/themes/index.less
index f19386d8b2f..e97b5b4b3ce 100644
--- a/packages/x6/src/style/themes/index.less
+++ b/packages/x6/src/style/themes/index.less
@@ -1 +1 @@
-@import './default.less';
+@import url('./default.less');
diff --git a/sites/x6-sites-demos/packages/performance/react-flow/src/app.tsx b/sites/x6-sites-demos/packages/performance/react-flow/src/app.tsx
index d77d7f2a7b9..6e11591a8e8 100644
--- a/sites/x6-sites-demos/packages/performance/react-flow/src/app.tsx
+++ b/sites/x6-sites-demos/packages/performance/react-flow/src/app.tsx
@@ -45,7 +45,7 @@ const CustomNodeFlow = () => {
     setNodes(nodes as any);
 
     setEdges(edges as any);
-  }, []);
+  }, [setNodes, setEdges]);
 
   return (
     <div className="app">