Rax Compat CSS Import Tilde Transform

packages/plugin-rax-compat/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.1
+
+### Patch Changes
+
+- 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
 
 ### Minor Changes

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);
+}

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",

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

packages/plugin-rax-compat/src/services/styles/applyServerSideProcessor.ts

@@ -1,15 +1,40 @@
 import fs from 'fs';
+import { createRequire } from 'module';
 
 import styleSheetLoader from '../../lib/transform-styles.js';
 
 import { checkInlineStyleEnable, checkStyleKind } from '../../utils.js';
 
 import type { ESBuildPlugin, NormalizedRaxCompatPluginOptions, PluginAPI } from '../../typings';
 
+
 const ESBuildInlineStylePlugin = (options: NormalizedRaxCompatPluginOptions): ESBuildPlugin => {
   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;