Merge f5005afad5 into ace5e1dd15

hotfix: add isPHA and isKraken env for backward compatibility

.changeset/pink-feet-jog.md

@@ -0,0 +1,5 @@
+---
+'@ice/plugin-rax-compat': patch
+---
+
+Support css build

packages/ice/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.6.5
+
+- hotfix: add isPHA and isKraken env for backward compatibility.
+
 ## 3.6.4
 
 ### Patch Changes

packages/ice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/app",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "description": "provide scripts and configuration used by web framework ice",
   "type": "module",
   "main": "./esm/index.js",

packages/ice/templates/core/env.ts.ejs

@@ -11,9 +11,11 @@ export const isKuaiShouMiniProgram = isClient && import.meta.target === 'kuaisho
 export const isWeChatMiniProgram = isClient && import.meta.target === 'wechat-miniprogram';
 export const isQuickApp = false; // Now ice.js will not implement quick app target.
 export const isMiniApp = isAliMiniApp; // in universal-env, isMiniApp is equals to isAliMiniApp
+export const isKraken = isClient && import.meta.target === 'kraken';
 
 // Following variables are runtime executed envs.
 // See also @uni/env.
+export const isPHA = isWeb && typeof pha === 'object';
 const ua = typeof navigator === 'object' ? navigator.userAgent || navigator.swuserAgent : '';
 export const isThemis = /Themis/.test(ua);
 export const isWindVane = /WindVane/i.test(ua) && isWeb && typeof WindVane !== 'undefined' && typeof WindVane.call !== 'undefined';
@@ -25,6 +27,8 @@ export default {
   isWeb,
   isNode,
   isWeex,
+  isKraken,
+  isPHA,
   isThemis,
   isMiniApp,
   isByteDanceMicroApp,

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/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,4 +1,5 @@
 import fs from 'fs';
+import { createRequire } from 'module';
 
 import styleSheetLoader from '../../lib/transform-styles.js';
 
@@ -6,10 +7,34 @@ 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;