From dee2c9e120c6c50ec65a323d63710ef4fbb3ce55 Mon Sep 17 00:00:00 2001
From: SmartBigFeng <wff15140459509@163.com>
Date: Fri, 27 Mar 2026 17:24:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(XSender):=20=E7=94=A8=20@layer=20=E9=9A=94?=
 =?UTF-8?q?=E7=A6=BB=20x-sender=20CSS=EF=BC=8C=E4=BF=AE=E5=A4=8D=E6=B1=A1?=
 =?UTF-8?q?=E6=9F=93=20ant-design-vue=20=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20(#458)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/.build/plugins/index.ts         |  6 +++--
 .../core/.build/plugins/xSenderCssLayer.ts    | 22 +++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 packages/core/.build/plugins/xSenderCssLayer.ts

diff --git a/packages/core/.build/plugins/index.ts b/packages/core/.build/plugins/index.ts
index fcda6e0e..58d54eef 100644
--- a/packages/core/.build/plugins/index.ts
+++ b/packages/core/.build/plugins/index.ts
@@ -3,18 +3,20 @@ import vue from '@vitejs/plugin-vue';
 import { libInjectCss } from 'vite-plugin-lib-inject-css';
 import autoImportPlugin from './autoImport';
 import dtsPlugin from './dts';
+import xSenderCssLayerPlugin from './xSenderCssLayer';
 // import prismjsPlugin from './prismjs'
 
 const plugins: PluginOption[] = [
   vue({
     script: {
-      propsDestructure: true,
-    },
+      propsDestructure: true
+    }
   }) as PluginOption,
   // prismjsPlugin,
   ...autoImportPlugin,
   dtsPlugin as PluginOption,
   libInjectCss() as PluginOption,
+  xSenderCssLayerPlugin() as PluginOption
 ];
 
 export default plugins;
diff --git a/packages/core/.build/plugins/xSenderCssLayer.ts b/packages/core/.build/plugins/xSenderCssLayer.ts
new file mode 100644
index 00000000..3492c199
--- /dev/null
+++ b/packages/core/.build/plugins/xSenderCssLayer.ts
@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite';
+
+/**
+ * 将 x-sender 的 CSS 包裹进 @layer，避免其内部的 .ant 等样式污染用户项目中 ant-design-vue 的全局样式。
+ *
+ * @layer 内的样式优先级低于任何非 @layer 的普通样式，因此 ant-design-vue 的样式天然优先，互不干扰。
+ */
+export default function xSenderCssLayerPlugin(): Plugin {
+  return {
+    name: 'vite-plugin-x-sender-css-layer',
+    transform(code, id) {
+      if (id.includes('x-sender') && id.endsWith('.css')) {
+        return {
+          code: `@layer element-plus-x-third-party {
+${code}
+}`,
+          map: null
+        };
+      }
+    }
+  };
+}