From 637f24a10a4d2e23ff85e706ee3608c0e16268b3 Mon Sep 17 00:00:00 2001
From: "zhuoling.lcl" <zhuoling.lcl@alibaba-inc.com>
Date: Tue, 15 Jul 2025 19:52:44 +0800
Subject: [PATCH 1/7] fix: rax compat support ~ in css

---
 .../example/css-import-example.css            | 23 +++++
 .../src/lib/transform-styles.ts               |  6 +-
 .../src/services/styles/README.md             | 61 ++++++++++++++
 .../__tests__/cssImportTransform.test.ts      | 84 +++++++++++++++++++
 .../styles/applyServerSideProcessor.ts        | 12 ++-
 .../services/styles/esbuildCSSImportPlugin.ts | 48 +++++++++++
 6 files changed, 230 insertions(+), 4 deletions(-)
 create mode 100644 packages/plugin-rax-compat/example/css-import-example.css
 create mode 100644 packages/plugin-rax-compat/src/services/styles/README.md
 create mode 100644 packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts
 create mode 100644 packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts

diff --git a/packages/plugin-rax-compat/example/css-import-example.css b/packages/plugin-rax-compat/example/css-import-example.css
new file mode 100644
index 0000000000..a08f04b23b
--- /dev/null
+++ b/packages/plugin-rax-compat/example/css-import-example.css
@@ -0,0 +1,23 @@
+/* 示例：CSS 中使用波浪号导入语法 */
+
+/* 导入第三方包的样式 */
+@import "~@ali/fusion-design/theme.css";
+@import "~antd/dist/antd.css";
+
+/* 导入内部包的样式 */
+@import "~@company/design-system/tokens.css";
+@import '~@internal/shared-styles/base.css';
+
+/* 常规导入（不受影响） */
+@import "./local-styles.css";
+@import url("https://cdn.example.com/remote.css");
+
+/* 组件样式 */
+.example-component {
+  color: var(--primary-color);
+  font-size: 16px;
+}
+
+.example-component:hover {
+  color: var(--primary-hover-color);
+}
\ No newline at end of file
diff --git a/packages/plugin-rax-compat/src/lib/transform-styles.ts b/packages/plugin-rax-compat/src/lib/transform-styles.ts
index 55fdacdf95..7cbe69c7c4 100644
--- a/packages/plugin-rax-compat/src/lib/transform-styles.ts
+++ b/packages/plugin-rax-compat/src/lib/transform-styles.ts
@@ -25,9 +25,11 @@ const transformer = transformerModule.default;
 
 async function styleSheetLoader(source: string, sourcePath: string, type: StyleKind = 'css') {
   let cssContent = source;
+
+  // Transform @import "~..." to @import "..." for all style types
+  cssContent = cssContent.replace(/@import\s+(['"])~([^'"]+)\1/g, '@import $1$2$1');
+
   if (type === 'less') {
-    // compact for @import "~bootstrap/less/bootstrap";
-    cssContent = cssContent.replace(/@import "~/g, '@import "');
     cssContent = (
       await less.render(cssContent, {
         // For relative @import path
diff --git a/packages/plugin-rax-compat/src/services/styles/README.md b/packages/plugin-rax-compat/src/services/styles/README.md
new file mode 100644
index 0000000000..f545aedad8
--- /dev/null
+++ b/packages/plugin-rax-compat/src/services/styles/README.md
@@ -0,0 +1,61 @@
+# CSS Import Tilde Transform
+
+## 功能概述
+
+这个功能添加了对 CSS 中 `~` 引入语法的支持，将 `@import "~@ali/xxx"` 自动转换为 `@import "@ali/xxx"`，以兼容 esbuild 的模块解析。
+
+**注意：** webpack 本身已经支持 `~` 语法，所以客户端构建不需要额外处理。
+
+## 实现方式
+
+### 1. 服务端渲染（SSR/SSG）- ESBuild 插件
+
+**文件：** `esbuildCSSImportPlugin.ts`
+
+- 在 esbuild 构建过程中拦截 CSS 文件
+- 对包含 `~` 引入语法的文件进行转换
+- 优先级设置在 CSS 模块处理之前
+
+### 2. 内联样式处理
+
+**文件：** `transform-styles.ts`
+
+- 在 `styleSheetLoader` 函数中直接处理转换
+- 支持所有样式文件类型：CSS、LESS、SASS/SCSS
+
+## 转换规则
+
+| 输入格式 | 输出格式 |
+|---------|---------|
+| `@import "~@ali/package/style.css"` | `@import "@ali/package/style.css"` |
+| `@import '~@company/design/tokens.css'` | `@import '@company/design/tokens.css'` |
+
+## 使用场景
+
+1. **第三方包引入**
+   ```css
+   @import "~@ali/fusion-design/style.css";
+   @import "~antd/dist/antd.css";
+   ```
+
+2. **内部包引入**
+   ```css
+   @import "~@company/design-system/tokens.css";
+   @import "~@internal/shared-styles/base.css";
+   ```
+
+## 注意事项
+
+1. **仅影响 esbuild 构建**：webpack 本身支持 `~` 语法，所以只在服务端渲染（使用 esbuild）时需要转换
+2. 只转换 `@import` 语句中的 `~` 语法
+3. 保持引号类型不变（单引号或双引号）
+4. 不影响其他类型的导入语句
+5. 兼容现有的相对路径和绝对路径导入
+
+## 测试
+
+运行测试文件 `cssImportTransform.test.ts` 验证功能正常工作：
+
+```bash
+npm test -- src/services/styles/__tests__/cssImportTransform.test.ts
+```
\ No newline at end of file
diff --git a/packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts b/packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts
new file mode 100644
index 0000000000..9c6345b262
--- /dev/null
+++ b/packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts
@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import styleSheetLoader from '../../../lib/transform-styles.js';
+
+describe('CSS Import Tilde Transform for ESBuild', () => {
+  it('should transform @import with tilde syntax in CSS', async () => {
+    const input = `
+@import "~@ali/some-package/style.css";
+@import '~@company/design-system/tokens.css';
+.test {
+  color: red;
+}
+`;
+
+    const result = await styleSheetLoader(input, '/fake/path/test.css', 'css');
+
+    // The result should be JavaScript module code for inline styles
+    expect(result).toContain('module.exports = _styles');
+
+    // We can't easily test the exact transformation here since it goes through
+    // the CSS parser, but we can verify it doesn't throw an error
+    expect(result).toBeDefined();
+  });
+
+  it('should transform @import with tilde syntax in LESS', async () => {
+    const input = `
+@import "~@ali/some-package/variables.less";
+@color: #333;
+.test {
+  color: @color;
+}
+`;
+
+    const result = await styleSheetLoader(input, '/fake/path/test.less', 'less');
+
+    expect(result).toContain('module.exports = _styles');
+    expect(result).toBeDefined();
+  });
+
+  it('should transform @import with tilde syntax in SASS/SCSS', async () => {
+    const input = `
+@import "~@ali/some-package/variables.scss";
+$color: #333;
+.test {
+  color: $color;
+}
+`;
+
+    const result = await styleSheetLoader(input, '/fake/path/test.scss', 'scss');
+
+    expect(result).toContain('module.exports = _styles');
+    expect(result).toBeDefined();
+  });
+
+  it('should handle mixed import styles', async () => {
+    const input = `
+@import "~@ali/package/style.css";
+@import "./local-style.css";
+@import url("https://example.com/remote.css");
+.test {
+  color: blue;
+}
+`;
+
+    const result = await styleSheetLoader(input, '/fake/path/test.css', 'css');
+
+    expect(result).toContain('module.exports = _styles');
+    expect(result).toBeDefined();
+  });
+
+  it('should not transform non-tilde imports', async () => {
+    const input = `
+@import "./local-style.css";
+@import url("https://example.com/remote.css");
+.test {
+  color: green;
+}
+`;
+
+    const result = await styleSheetLoader(input, '/fake/path/test.css', 'css');
+
+    expect(result).toContain('module.exports = _styles');
+    expect(result).toBeDefined();
+  });
+});
\ No newline at end of file
diff --git a/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts b/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
index f3e25942f4..858e05e4cb 100644
--- a/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
+++ b/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
@@ -3,8 +3,9 @@ import fs from 'fs';
 import styleSheetLoader from '../../lib/transform-styles.js';
 
 import { checkInlineStyleEnable, checkStyleKind } from '../../utils.js';
-
 import type { ESBuildPlugin, NormalizedRaxCompatPluginOptions, PluginAPI } from '../../typings';
+import { createCSSImportPlugin } from './esbuildCSSImportPlugin.js';
+
 
 const ESBuildInlineStylePlugin = (options: NormalizedRaxCompatPluginOptions): ESBuildPlugin => {
   return {
@@ -45,9 +46,16 @@ export const applyServerSideStyleProcessor = (api: PluginAPI, options: Normalize
 
       const cssModuleIndex = currentOptions.plugins?.findIndex(({ name }) => name === 'esbuild-css-modules') as number;
 
+      // Add CSS import tilde transform plugin first
+      currentOptions.plugins?.splice(
+        cssModuleIndex >= 0 ? cssModuleIndex : 0,
+        0,
+        createCSSImportPlugin(),
+      );
+
       // Add custom transform for server compile.
       currentOptions.plugins?.splice(
-        options.cssModule ? cssModuleIndex + 1 : cssModuleIndex,
+        options.cssModule ? cssModuleIndex + 2 : cssModuleIndex + 1,
         0,
         ESBuildInlineStylePlugin(options),
       );
diff --git a/packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts b/packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts
new file mode 100644
index 0000000000..755d73a1a1
--- /dev/null
+++ b/packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts
@@ -0,0 +1,48 @@
+import fs from 'fs';
+import type { ESBuildPlugin } from '../../typings';
+
+/**
+ * ESBuild plugin to transform CSS imports with tilde (~) syntax
+ * Converts @import "~@ali/xxx" to @import "@ali/xxx"
+ *
+ * Note: This plugin only handles CSS files that are not processed by the inline style plugin.
+ * For inline styles, the transformation is handled in transform-styles.ts
+ */
+export const createCSSImportPlugin = (): ESBuildPlugin => {
+  return {
+    name: 'esbuild-css-import-tilde',
+    setup: (build) => {
+      // Handle CSS files that are processed by esbuild's default CSS loader
+      // (not by our inline style plugin)
+      build.onLoad({ filter: /\.css$/ }, async (args) => {
+        try {
+          const source = await fs.promises.readFile(args.path, 'utf8');
+
+          // Check if this CSS contains tilde imports
+          if (!source.includes('@import "~') && !source.includes("@import '~")) {
+            // No tilde imports found, let default processing handle it
+            return null;
+          }
+
+          // Transform @import "~..." to @import "..."
+          const transformedContent = source.replace(
+            /@import\s+(['"])~([^'"]+)\1/g,
+            '@import $1$2$1',
+          );
+
+          return {
+            contents: transformedContent,
+            loader: 'css',
+          };
+        } catch (error) {
+          return {
+            errors: [{
+              text: `Failed to process CSS imports: ${error.message}`,
+              location: { file: args.path },
+            }],
+          };
+        }
+      });
+    },
+  };
+};
\ No newline at end of file

From 41cbaa9cd113c5f5d45c13944f7a03023a4e96d2 Mon Sep 17 00:00:00 2001
From: "zhuoling.lcl" <zhuoling.lcl@alibaba-inc.com>
Date: Tue, 15 Jul 2025 19:54:01 +0800
Subject: [PATCH 2/7] chore: add changeset

---
 .changeset/pink-feet-jog.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pink-feet-jog.md

diff --git a/.changeset/pink-feet-jog.md b/.changeset/pink-feet-jog.md
new file mode 100644
index 0000000000..bae5d7b150
--- /dev/null
+++ b/.changeset/pink-feet-jog.md
@@ -0,0 +1,5 @@
+---
+'@ice/plugin-rax-compat': patch
+---
+
+Support css build

From 837946a37f82ffff6e2420517e03d8625953bdd4 Mon Sep 17 00:00:00 2001
From: "zhuoling.lcl" <zhuoling.lcl@alibaba-inc.com>
Date: Wed, 16 Jul 2025 10:12:06 +0800
Subject: [PATCH 3/7] fix: css in ~

---
 .../styles/applyServerSideProcessor.ts        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts b/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
index 858e05e4cb..5db57cf5c3 100644
--- a/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
+++ b/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
@@ -1,4 +1,5 @@
 import fs from 'fs';
+import { createRequire } from 'module';
 
 import styleSheetLoader from '../../lib/transform-styles.js';
 
@@ -11,6 +12,29 @@ const ESBuildInlineStylePlugin = (options: NormalizedRaxCompatPluginOptions): ES
   return {
     name: 'esbuild-inline-style',
     setup: (build) => {
+      build.onResolve({ filter: /\.(css|sass|scss|less)$/ }, async (args) => {
+        if (args.path.startsWith('~')) {
+          const cleanPath = args.path.slice(1);
+
+          try {
+            // Try to resolve as absolute path
+            const require = createRequire(args.importer || import.meta.url);
+            const resolvedPath = require.resolve(cleanPath);
+            return {
+              path: resolvedPath,
+              namespace: args.namespace,
+            };
+          } catch (resolveError) {
+            // If unable to resolve, mark as external dependency
+            return {
+              path: cleanPath,
+              external: true,
+            };
+          }
+        }
+        return null;
+      });
+
       build.onLoad({ filter: /\.(css|sass|scss|less)$/ }, async (args) => {
         if (checkInlineStyleEnable(args.path, options.inlineStyle) === false) {
           return null;

From 2c40f39fffada9dcea47ba07b18f293bc4f0f4bf Mon Sep 17 00:00:00 2001
From: "zhuoling.lcl" <zhuoling.lcl@alibaba-inc.com>
Date: Wed, 16 Jul 2025 10:15:16 +0800
Subject: [PATCH 4/7] fix: remove useless files

---
 .../src/services/styles/README.md             |  8 ++--
 .../styles/applyServerSideProcessor.ts        | 11 +----
 .../services/styles/esbuildCSSImportPlugin.ts | 48 -------------------
 3 files changed, 6 insertions(+), 61 deletions(-)
 delete mode 100644 packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts

diff --git a/packages/plugin-rax-compat/src/services/styles/README.md b/packages/plugin-rax-compat/src/services/styles/README.md
index f545aedad8..66e3fdc4df 100644
--- a/packages/plugin-rax-compat/src/services/styles/README.md
+++ b/packages/plugin-rax-compat/src/services/styles/README.md
@@ -10,11 +10,11 @@
 
 ### 1. 服务端渲染（SSR/SSG）- ESBuild 插件
 
-**文件：** `esbuildCSSImportPlugin.ts`
+**文件：** `applyServerSideProcessor.ts`
 
-- 在 esbuild 构建过程中拦截 CSS 文件
-- 对包含 `~` 引入语法的文件进行转换
-- 优先级设置在 CSS 模块处理之前
+- 在 `ESBuildInlineStylePlugin` 中添加了 `onResolve` 钩子
+- 拦截以 `~` 开头的模块路径并解析为正确的 node_modules 路径
+- 支持模块解析和外部依赖标记
 
 ### 2. 内联样式处理
 
diff --git a/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts b/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
index 5db57cf5c3..9c4aa559dd 100644
--- a/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
+++ b/packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts
@@ -4,8 +4,8 @@ import { createRequire } from 'module';
 import styleSheetLoader from '../../lib/transform-styles.js';
 
 import { checkInlineStyleEnable, checkStyleKind } from '../../utils.js';
+
 import type { ESBuildPlugin, NormalizedRaxCompatPluginOptions, PluginAPI } from '../../typings';
-import { createCSSImportPlugin } from './esbuildCSSImportPlugin.js';
 
 
 const ESBuildInlineStylePlugin = (options: NormalizedRaxCompatPluginOptions): ESBuildPlugin => {
@@ -70,16 +70,9 @@ export const applyServerSideStyleProcessor = (api: PluginAPI, options: Normalize
 
       const cssModuleIndex = currentOptions.plugins?.findIndex(({ name }) => name === 'esbuild-css-modules') as number;
 
-      // Add CSS import tilde transform plugin first
-      currentOptions.plugins?.splice(
-        cssModuleIndex >= 0 ? cssModuleIndex : 0,
-        0,
-        createCSSImportPlugin(),
-      );
-
       // Add custom transform for server compile.
       currentOptions.plugins?.splice(
-        options.cssModule ? cssModuleIndex + 2 : cssModuleIndex + 1,
+        options.cssModule ? cssModuleIndex + 1 : cssModuleIndex,
         0,
         ESBuildInlineStylePlugin(options),
       );
diff --git a/packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts b/packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts
deleted file mode 100644
index 755d73a1a1..0000000000
--- a/packages/plugin-rax-compat/src/services/styles/esbuildCSSImportPlugin.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import fs from 'fs';
-import type { ESBuildPlugin } from '../../typings';
-
-/**
- * ESBuild plugin to transform CSS imports with tilde (~) syntax
- * Converts @import "~@ali/xxx" to @import "@ali/xxx"
- *
- * Note: This plugin only handles CSS files that are not processed by the inline style plugin.
- * For inline styles, the transformation is handled in transform-styles.ts
- */
-export const createCSSImportPlugin = (): ESBuildPlugin => {
-  return {
-    name: 'esbuild-css-import-tilde',
-    setup: (build) => {
-      // Handle CSS files that are processed by esbuild's default CSS loader
-      // (not by our inline style plugin)
-      build.onLoad({ filter: /\.css$/ }, async (args) => {
-        try {
-          const source = await fs.promises.readFile(args.path, 'utf8');
-
-          // Check if this CSS contains tilde imports
-          if (!source.includes('@import "~') && !source.includes("@import '~")) {
-            // No tilde imports found, let default processing handle it
-            return null;
-          }
-
-          // Transform @import "~..." to @import "..."
-          const transformedContent = source.replace(
-            /@import\s+(['"])~([^'"]+)\1/g,
-            '@import $1$2$1',
-          );
-
-          return {
-            contents: transformedContent,
-            loader: 'css',
-          };
-        } catch (error) {
-          return {
-            errors: [{
-              text: `Failed to process CSS imports: ${error.message}`,
-              location: { file: args.path },
-            }],
-          };
-        }
-      });
-    },
-  };
-};
\ No newline at end of file

From f5005afad5bb4392d5fdbe0ae726b3489b740eb8 Mon Sep 17 00:00:00 2001
From: "zhuoling.lcl" <zhuoling.lcl@alibaba-inc.com>
Date: Wed, 16 Jul 2025 10:33:27 +0800
Subject: [PATCH 5/7] chore: delete 2 useless files

---
 .../src/services/styles/README.md             | 61 --------------
 .../__tests__/cssImportTransform.test.ts      | 84 -------------------
 2 files changed, 145 deletions(-)
 delete mode 100644 packages/plugin-rax-compat/src/services/styles/README.md
 delete mode 100644 packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts

diff --git a/packages/plugin-rax-compat/src/services/styles/README.md b/packages/plugin-rax-compat/src/services/styles/README.md
deleted file mode 100644
index 66e3fdc4df..0000000000
--- a/packages/plugin-rax-compat/src/services/styles/README.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# CSS Import Tilde Transform
-
-## 功能概述
-
-这个功能添加了对 CSS 中 `~` 引入语法的支持，将 `@import "~@ali/xxx"` 自动转换为 `@import "@ali/xxx"`，以兼容 esbuild 的模块解析。
-
-**注意：** webpack 本身已经支持 `~` 语法，所以客户端构建不需要额外处理。
-
-## 实现方式
-
-### 1. 服务端渲染（SSR/SSG）- ESBuild 插件
-
-**文件：** `applyServerSideProcessor.ts`
-
-- 在 `ESBuildInlineStylePlugin` 中添加了 `onResolve` 钩子
-- 拦截以 `~` 开头的模块路径并解析为正确的 node_modules 路径
-- 支持模块解析和外部依赖标记
-
-### 2. 内联样式处理
-
-**文件：** `transform-styles.ts`
-
-- 在 `styleSheetLoader` 函数中直接处理转换
-- 支持所有样式文件类型：CSS、LESS、SASS/SCSS
-
-## 转换规则
-
-| 输入格式 | 输出格式 |
-|---------|---------|
-| `@import "~@ali/package/style.css"` | `@import "@ali/package/style.css"` |
-| `@import '~@company/design/tokens.css'` | `@import '@company/design/tokens.css'` |
-
-## 使用场景
-
-1. **第三方包引入**
-   ```css
-   @import "~@ali/fusion-design/style.css";
-   @import "~antd/dist/antd.css";
-   ```
-
-2. **内部包引入**
-   ```css
-   @import "~@company/design-system/tokens.css";
-   @import "~@internal/shared-styles/base.css";
-   ```
-
-## 注意事项
-
-1. **仅影响 esbuild 构建**：webpack 本身支持 `~` 语法，所以只在服务端渲染（使用 esbuild）时需要转换
-2. 只转换 `@import` 语句中的 `~` 语法
-3. 保持引号类型不变（单引号或双引号）
-4. 不影响其他类型的导入语句
-5. 兼容现有的相对路径和绝对路径导入
-
-## 测试
-
-运行测试文件 `cssImportTransform.test.ts` 验证功能正常工作：
-
-```bash
-npm test -- src/services/styles/__tests__/cssImportTransform.test.ts
-```
\ No newline at end of file
diff --git a/packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts b/packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts
deleted file mode 100644
index 9c6345b262..0000000000
--- a/packages/plugin-rax-compat/src/services/styles/__tests__/cssImportTransform.test.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import styleSheetLoader from '../../../lib/transform-styles.js';
-
-describe('CSS Import Tilde Transform for ESBuild', () => {
-  it('should transform @import with tilde syntax in CSS', async () => {
-    const input = `
-@import "~@ali/some-package/style.css";
-@import '~@company/design-system/tokens.css';
-.test {
-  color: red;
-}
-`;
-
-    const result = await styleSheetLoader(input, '/fake/path/test.css', 'css');
-
-    // The result should be JavaScript module code for inline styles
-    expect(result).toContain('module.exports = _styles');
-
-    // We can't easily test the exact transformation here since it goes through
-    // the CSS parser, but we can verify it doesn't throw an error
-    expect(result).toBeDefined();
-  });
-
-  it('should transform @import with tilde syntax in LESS', async () => {
-    const input = `
-@import "~@ali/some-package/variables.less";
-@color: #333;
-.test {
-  color: @color;
-}
-`;
-
-    const result = await styleSheetLoader(input, '/fake/path/test.less', 'less');
-
-    expect(result).toContain('module.exports = _styles');
-    expect(result).toBeDefined();
-  });
-
-  it('should transform @import with tilde syntax in SASS/SCSS', async () => {
-    const input = `
-@import "~@ali/some-package/variables.scss";
-$color: #333;
-.test {
-  color: $color;
-}
-`;
-
-    const result = await styleSheetLoader(input, '/fake/path/test.scss', 'scss');
-
-    expect(result).toContain('module.exports = _styles');
-    expect(result).toBeDefined();
-  });
-
-  it('should handle mixed import styles', async () => {
-    const input = `
-@import "~@ali/package/style.css";
-@import "./local-style.css";
-@import url("https://example.com/remote.css");
-.test {
-  color: blue;
-}
-`;
-
-    const result = await styleSheetLoader(input, '/fake/path/test.css', 'css');
-
-    expect(result).toContain('module.exports = _styles');
-    expect(result).toBeDefined();
-  });
-
-  it('should not transform non-tilde imports', async () => {
-    const input = `
-@import "./local-style.css";
-@import url("https://example.com/remote.css");
-.test {
-  color: green;
-}
-`;
-
-    const result = await styleSheetLoader(input, '/fake/path/test.css', 'css');
-
-    expect(result).toContain('module.exports = _styles');
-    expect(result).toBeDefined();
-  });
-});
\ No newline at end of file

From 6c598277342ed7fd409c9496353ee3e4c3b096f9 Mon Sep 17 00:00:00 2001
From: "zhuoling.lcl" <zhuoling.lcl@alibaba-inc.com>
Date: Mon, 4 Aug 2025 15:57:21 +0800
Subject: [PATCH 6/7] chore: rax-compat@0.4.1

---
 .changeset/pink-feet-jog.md             | 5 -----
 packages/plugin-rax-compat/CHANGELOG.md | 6 ++++++
 packages/plugin-rax-compat/package.json | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/pink-feet-jog.md

diff --git a/.changeset/pink-feet-jog.md b/.changeset/pink-feet-jog.md
deleted file mode 100644
index bae5d7b150..0000000000
--- a/.changeset/pink-feet-jog.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@ice/plugin-rax-compat': patch
----
-
-Support css build
diff --git a/packages/plugin-rax-compat/CHANGELOG.md b/packages/plugin-rax-compat/CHANGELOG.md
index ce0d59ef19..0febdbce7f 100644
--- a/packages/plugin-rax-compat/CHANGELOG.md
+++ b/packages/plugin-rax-compat/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.1
+
+### Patch Changes
+
+- 41cbaa9c: Support css build
+
 ## 0.4.0
 
 ### Minor Changes
diff --git a/packages/plugin-rax-compat/package.json b/packages/plugin-rax-compat/package.json
index f465b9a044..2eb592c7f1 100644
--- a/packages/plugin-rax-compat/package.json
+++ b/packages/plugin-rax-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ice/plugin-rax-compat",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Provide rax compat support for ice.js",
   "license": "MIT",
   "type": "module",

From 71fd26f3bbbfa3248e58f66b556f91e9ce5f8680 Mon Sep 17 00:00:00 2001
From: "zhuoling.lcl" <zhuoling.lcl@alibaba-inc.com>
Date: Mon, 4 Aug 2025 16:08:54 +0800
Subject: [PATCH 7/7] chore: update changelogs for rax-compat plugin

---
 packages/plugin-rax-compat/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugin-rax-compat/CHANGELOG.md b/packages/plugin-rax-compat/CHANGELOG.md
index 0febdbce7f..8fc3dab0ed 100644
--- a/packages/plugin-rax-compat/CHANGELOG.md
+++ b/packages/plugin-rax-compat/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Patch Changes
 
-- 41cbaa9c: Support css build
+- 41cbaa9c: Adds support for the “tilde” (~) import syntax in CSS files when using esbuild, ensuring @import "~foo/bar.css" is rewritten to @import "foo/bar.css" during server-side builds.
 
 ## 0.4.0