Rax Compat CSS Import Tilde Transform

[wssgcg1213]

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. 第三方包引入

   @import "~@ali/fusion-design/style.css";
   @import "~antd/dist/antd.css";

2. 内部包引入

   @import "~@company/design-system/tokens.css";
   @import "~@internal/shared-styles/base.css";

注意事项

1. 仅影响 esbuild 构建：webpack 本身支持 ~ 语法，所以只在服务端渲染（使用 esbuild）时需要转换
2. 只转换 @import 语句中的 ~ 语法
3. 保持引号类型不变（单引号或双引号）
4. 不影响其他类型的导入语句
5. 兼容现有的相对路径和绝对路径导入

[Copilot]

Pull Request Overview

This PR 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.

• Introduce createCSSImportPlugin to handle tilde imports in pure CSS files.
• Integrate the new plugin ahead of CSS modules and inline‐style transforms in the esbuild pipeline.
• Update the inline loader and add tests/README/example to cover tilde‐syntax handling.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
esbuildCSSImportPlugin.ts	New esbuild plugin to rewrite @import "~..." lines.
applyServerSideProcessor.ts	Splice in the CSS import plugin before other style plugins.
tests/cssImportTransform.test.ts	Tests for inline loader’s tilde import support.
README.md	Documentation for tilde import transform feature.
transform-styles.ts	Global inline loader update for tilde import handling.
example/css-import-example.css	Usage example demonstrating tilde imports.
.changeset/pink-feet-jog.md	Version bump and summary for CSS build support.

Comments suppressed due to low confidence (1)

packages/plugin-rax-compat/src/services/styles/tests/cssImportTransform.test.ts:4

• Tests currently only exercise the inline loader. It would be valuable to add unit tests directly for createCSSImportPlugin to verify that pure .css files are correctly rewritten by the plugin.

describe('CSS Import Tilde Transform for ESBuild', () => {

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (release/next@bb60ab5). Learn more about missing BASE report.

Additional details and impacted files

@@               Coverage Diff               @@
##             release/next    #7121   +/-   ##
===============================================
  Coverage                ?   78.83%           
===============================================
  Files                   ?      223           
  Lines                   ?    20117           
  Branches                ?     2535           
===============================================
  Hits                    ?    15860           
  Misses                  ?     4217           
  Partials                ?       40           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

The base branch was changed.

[wssgcg1213]

https://lesscss.org/features/#import-atrules-feature-import-options 考虑到使用率很低, 暂不在本版本做支持