openxiangda 1.0.2 → 1.0.4

package/packages/sdk/src/build-source/scripts/build-forms.mjs

@@ -233,7 +233,7 @@ function createRuntimeEntryContent() {
   return `import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { StyleProvider } from '@ant-design/cssinjs';
-import { App as AntdApp, ConfigProvider } from 'antd';
+import { App as AntdApp, ConfigProvider, message } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import * as SyFormComponentsModule from 'openxiangda';
 import { antdTheme } from 'openxiangda/antd-theme';
@@ -245,8 +245,10 @@ const roots = new WeakMap();
 const portalContainerCleanups = new WeakMap();
 const { StandardFormPage, defineFormSchema } = SyFormComponentsModule;
 const NAMESPACE_ROOT_CLASS = 'sy-app-workspace';
+const RUNTIME_PORTAL_ATTR = 'data-sy-runtime-portal';
 const PORTAL_CONTAINER_STACK_GLOBAL = '__OPENXIANGDA_PORTAL_CONTAINER_STACK__';
 const PORTAL_CONTAINER_RESOLVER_GLOBAL = '${portalContainerResolverGlobal}';
+const portalContainers = new WeakMap();
 
 function getStyleContainer(el) {
   const rootNode = el.getRootNode?.();
@@ -255,13 +257,12 @@ function getStyleContainer(el) {
     : document.head;
 }
 
-function isInShadowRoot(el) {
-  const rootNode = el.getRootNode?.();
+function isShadowRoot(rootNode) {
   return typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot;
 }
 
-function getNamespaceRoot(el, triggerNode) {
-  if (isInShadowRoot(el)) return el;
+function getRuntimeRoot(el, triggerNode) {
+  if (isShadowRoot(el.getRootNode?.())) return el;
   const triggerRoot = triggerNode?.closest?.('.' + NAMESPACE_ROOT_CLASS);
   return (
     triggerRoot ||
@@ -271,47 +272,73 @@ function getNamespaceRoot(el, triggerNode) {
   );
 }
 
-function getPopupContainer(el) {
-  return (triggerNode) => getNamespaceRoot(el, triggerNode);
+function getOverlayRoot(el, portalContainer, triggerNode) {
+  return portalContainer?.isConnected ? portalContainer : getRuntimeRoot(el, triggerNode);
+}
+
+function getPopupContainer(el, portalContainer) {
+  return (triggerNode) => getOverlayRoot(el, portalContainer, triggerNode);
 }
 
 function getTargetContainer(el) {
-  return () => getNamespaceRoot(el);
+  return () => getRuntimeRoot(el);
 }
 
-function createAntdConfig(el) {
+function createAntdConfig(el, portalContainer) {
   return {
     locale: zhCN,
     prefixCls: 'sy-ant',
     iconPrefixCls: 'sy-anticon',
     theme: antdTheme,
-    getPopupContainer: getPopupContainer(el),
+    getPopupContainer: getPopupContainer(el, portalContainer),
     getTargetContainer: getTargetContainer(el),
   };
 }
 
+function createPortalContainer(el) {
+  const rootNode = el.getRootNode?.();
+  const parent = isShadowRoot(rootNode) ? rootNode : el.ownerDocument.body;
+  const portalContainer = el.ownerDocument.createElement('div');
+  portalContainer.setAttribute(RUNTIME_PORTAL_ATTR, '');
+  portalContainer.classList.add(NAMESPACE_ROOT_CLASS);
+  parent.appendChild(portalContainer);
+  return portalContainer;
+}
+
 function installRuntimePortalContainer(el) {
+  const portalContainer = createPortalContainer(el);
   const stack = Array.isArray(globalThis[PORTAL_CONTAINER_STACK_GLOBAL])
     ? globalThis[PORTAL_CONTAINER_STACK_GLOBAL]
     : [];
-  stack.push(el);
+  stack.push(portalContainer);
   globalThis[PORTAL_CONTAINER_STACK_GLOBAL] = stack;
   globalThis[PORTAL_CONTAINER_RESOLVER_GLOBAL] = () => {
     for (let index = stack.length - 1; index >= 0; index -= 1) {
       const candidate = stack[index];
       if (candidate?.isConnected) {
-        return getNamespaceRoot(candidate);
+        return candidate;
       }
     }
-    return document.querySelector('.' + NAMESPACE_ROOT_CLASS) || document.body;
+    return (
+      document.querySelector('[' + RUNTIME_PORTAL_ATTR + ']') ||
+      document.querySelector('.' + NAMESPACE_ROOT_CLASS) ||
+      document.body
+    );
   };
-  return () => {
-    const position = stack.lastIndexOf(el);
-    if (position >= 0) stack.splice(position, 1);
+  return {
+    container: portalContainer,
+    release: () => {
+      const position = stack.lastIndexOf(portalContainer);
+      if (position >= 0) stack.splice(position, 1);
+      portalContainer.remove();
+    },
   };
 }
 
-function installAntdStaticHolder(el) {
+function installAntdStaticHolder(el, portalContainer) {
+  const getMessageContainer = () =>
+    portalContainer?.isConnected ? portalContainer : getRuntimeRoot(el);
+
   ConfigProvider.config({
     prefixCls: 'sy-ant',
     iconPrefixCls: 'sy-anticon',
@@ -326,27 +353,37 @@ function installAntdStaticHolder(el) {
       }
       return (
         <StyleProvider hashPriority="high" container={getStyleContainer(el)}>
-          <ConfigProvider {...createAntdConfig(el)}>{children}</ConfigProvider>
+          <ConfigProvider {...createAntdConfig(el, portalContainer)}>{children}</ConfigProvider>
         </StyleProvider>
       );
     },
   });
+  message.config({
+    prefixCls: 'sy-ant-message',
+    getContainer: getMessageContainer,
+  });
 }
 
 function renderStandardForm(el, schemaInput, context = {}) {
   let root = roots.get(el);
   el.classList.add(NAMESPACE_ROOT_CLASS);
-  if (!portalContainerCleanups.has(el)) {
-    portalContainerCleanups.set(el, installRuntimePortalContainer(el));
+  let portalContainer = portalContainers.get(el);
+  if (!portalContainer?.isConnected) {
+    const cleanup = portalContainerCleanups.get(el);
+    if (cleanup) cleanup();
+    const portalHandle = installRuntimePortalContainer(el);
+    portalContainer = portalHandle.container;
+    portalContainers.set(el, portalContainer);
+    portalContainerCleanups.set(el, portalHandle.release);
   }
-  installAntdStaticHolder(el);
+  installAntdStaticHolder(el, portalContainer);
   if (!root) {
     root = createRoot(el);
     roots.set(el, root);
   }
 
   const schema = defineFormSchema(schemaInput);
-  const antdConfig = createAntdConfig(el);
+  const antdConfig = createAntdConfig(el, portalContainer);
   root.render(
     <StyleProvider hashPriority="high" container={getStyleContainer(el)}>
       <ConfigProvider {...antdConfig}>
@@ -380,6 +417,7 @@ function unmountStandardForm(el) {
   if (releasePortalContainer) {
     releasePortalContainer();
     portalContainerCleanups.delete(el);
+    portalContainers.delete(el);
   }
 }
 

package/packages/sdk/src/build-source/scripts/utils/namespace-css.mjs

@@ -37,6 +37,18 @@ function shouldSkipSelector(selector, prefix) {
   return false;
 }
 
+function createAntdPrefixAlias(selector) {
+  const aliased = selector
+    .replace(/(^|[^A-Za-z0-9_-])\.ant-/g, "$1.sy-ant-")
+    .replace(/(^|[^A-Za-z0-9_-])\.anticon-/g, "$1.sy-anticon-")
+    .replace(/(^|[^A-Za-z0-9_-])\.anticon(?=$|[^A-Za-z0-9_-])/g, "$1.sy-anticon");
+  return aliased === selector ? null : aliased;
+}
+
+function uniqueSelectors(selectors) {
+  return Array.from(new Set(selectors));
+}
+
 export function createNamespaceCssPlugin(prefix = DEFAULT_PREFIX) {
   return {
     postcssPlugin: "openxiangda-namespace-css",
@@ -49,11 +61,15 @@ export function createNamespaceCssPlugin(prefix = DEFAULT_PREFIX) {
         }
         parent = parent.parent;
       }
-      rule.selector = splitSelectors(rule.selector)
-        .map((selector) =>
-          shouldSkipSelector(selector, prefix) ? selector : `${prefix} ${selector}`,
-        )
-        .join(", ");
+      rule.selector = uniqueSelectors(
+        splitSelectors(rule.selector).flatMap((selector) => {
+          const scopedSelector = shouldSkipSelector(selector, prefix)
+            ? selector
+            : `${prefix} ${selector}`;
+          const antdAlias = createAntdPrefixAlias(scopedSelector);
+          return antdAlias ? [scopedSelector, antdAlias] : [scopedSelector];
+        }),
+      ).join(", ");
     },
   };
 }

package/packages/sdk/src/build-source/scripts/utils/namespace-css.test.ts

@@ -0,0 +1,29 @@
+import postcss from "postcss";
+import { describe, expect, it } from "vitest";
+
+import { createNamespaceCssPlugin } from "./namespace-css.mjs";
+
+function transform(css: string) {
+  return postcss([createNamespaceCssPlugin()]).process(css, {
+    from: undefined,
+  }).css;
+}
+
+describe("createNamespaceCssPlugin", () => {
+  it("adds sy-ant aliases for developer CSS that targets default antd classes", () => {
+    const css = transform(
+      ".portal-search .ant-input-affix-wrapper,.ant-select-dropdown .ant-select-item,.anticon-close{background:#fff}",
+    );
+
+    expect(css).toContain(
+      ".sy-app-workspace .portal-search .ant-input-affix-wrapper",
+    );
+    expect(css).toContain(
+      ".sy-app-workspace .portal-search .sy-ant-input-affix-wrapper",
+    );
+    expect(css).toContain(".ant-select-dropdown .ant-select-item");
+    expect(css).toContain(".sy-ant-select-dropdown .sy-ant-select-item");
+    expect(css).toContain(".anticon-close");
+    expect(css).toContain(".sy-anticon-close");
+  });
+});

package/packages/sdk/src/build-source/scripts/utils/tailwind-config.mjs

@@ -29,6 +29,18 @@ const layeredTailwindCss = `@import "openxiangda/styles/tokens.css";
 @tailwind components;
 @tailwind utilities;
 `;
+const canonicalPostcssConfig = `const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+const { createOpenXiangdaNamespaceCssPlugin } = require("openxiangda/build");
+
+module.exports = {
+  plugins: [
+    tailwindcss(),
+    createOpenXiangdaNamespaceCssPlugin(),
+    autoprefixer(),
+  ],
+};
+`;
 
 export const canonicalTailwindConfig = `${managedHeader}
 /** @type {import('tailwindcss').Config} */
@@ -71,6 +83,15 @@ export function isWorkspaceTailwindCssCurrent(content) {
   );
 }
 
+export function isWorkspacePostcssConfigCurrent(content) {
+  return Boolean(
+    content.includes("createOpenXiangdaNamespaceCssPlugin") &&
+      content.includes("openxiangda/build") &&
+      content.includes("tailwindcss") &&
+      content.includes("autoprefixer"),
+  );
+}
+
 function hasBlocklistEntry(content, entry) {
   const singleQuoted = `'${entry.slice(1, -1)}'`;
   return content.includes(entry) || content.includes(singleQuoted);
@@ -176,6 +197,22 @@ export function patchWorkspaceTailwindCss(content) {
   return customCss ? `${layeredTailwindCss}\n${customCss}` : layeredTailwindCss;
 }
 
+function isStandardPostcssConfig(content) {
+  return (
+    /plugins\s*:\s*\{[\s\S]*tailwindcss\s*:\s*\{[\s\S]*autoprefixer\s*:\s*\{[\s\S]*\}/s.test(
+      content,
+    ) || /plugins\s*:\s*\[[\s\S]*tailwindcss\([\s\S]*autoprefixer\(/s.test(content)
+  );
+}
+
+export function patchWorkspacePostcssConfig(content) {
+  if (isWorkspacePostcssConfigCurrent(content)) return content;
+  if (!content.trim() || isStandardPostcssConfig(content)) {
+    return canonicalPostcssConfig;
+  }
+  return content;
+}
+
 export function ensureWorkspaceTailwindConfig(workspaceRoot) {
   const configPath = path.join(workspaceRoot, "tailwind.config.cjs");
   const current = fs.existsSync(configPath)
@@ -196,10 +233,23 @@ export function ensureWorkspaceTailwindConfig(workspaceRoot) {
     fs.writeFileSync(cssPath, nextCss, "utf-8");
   }
 
+  const postcssPath = path.join(workspaceRoot, "postcss.config.cjs");
+  const currentPostcss = fs.existsSync(postcssPath)
+    ? fs.readFileSync(postcssPath, "utf-8")
+    : "";
+  const nextPostcss = patchWorkspacePostcssConfig(currentPostcss);
+  if (currentPostcss !== nextPostcss) {
+    fs.writeFileSync(postcssPath, nextPostcss, "utf-8");
+  }
+
   return {
-    changed: current !== nextContent || currentCss !== nextCss,
+    changed:
+      current !== nextContent ||
+      currentCss !== nextCss ||
+      currentPostcss !== nextPostcss,
     path: configPath,
     cssPath,
+    postcssPath,
   };
 }
 

package/packages/sdk/src/build-source/scripts/utils/tailwind-config.test.ts

@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it } from "vitest";
 
 import {
   ensureWorkspaceTailwindConfig,
+  patchWorkspacePostcssConfig,
   patchWorkspaceTailwindCss,
   patchWorkspaceTailwindConfig,
   validateWorkspaceTailwindConfig,
@@ -42,6 +43,10 @@ describe("workspace Tailwind config helpers", () => {
       path.join(workspaceRoot, "src", "index.css"),
       "utf-8",
     );
+    const postcssContent = fs.readFileSync(
+      path.join(workspaceRoot, "postcss.config.cjs"),
+      "utf-8",
+    );
 
     expect(result.changed).toBe(true);
     expect(nextContent).toContain(
@@ -53,6 +58,8 @@ describe("workspace Tailwind config helpers", () => {
     expect(cssContent).toContain("@tailwind base;");
     expect(cssContent).toContain("@tailwind components;");
     expect(cssContent).toContain("@tailwind utilities;");
+    expect(postcssContent).toContain("createOpenXiangdaNamespaceCssPlugin");
+    expect(postcssContent).toContain('require("openxiangda/build")');
     expect(validateWorkspaceTailwindConfig(workspaceRoot)).toEqual([]);
   });
 
@@ -115,7 +122,7 @@ module.exports = {
 }
 `);
 
-    expect(nextContent.startsWith("@layer tailwind-base {")).toBe(true);
+    expect(nextContent).toContain("@layer tailwind-base {");
     expect(nextContent).toContain("@tailwind components;");
     expect(nextContent).toContain("#root");
   });
@@ -136,6 +143,28 @@ module.exports = {
     expect(patchWorkspaceTailwindCss(source)).toBe(source);
   });
 
+  it("patches standard PostCSS config with openxiangda namespace css plugin", () => {
+    const nextContent = patchWorkspacePostcssConfig(`module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`);
+
+    expect(nextContent).toContain("createOpenXiangdaNamespaceCssPlugin");
+    expect(nextContent).toContain("tailwindcss()");
+    expect(nextContent).toContain("autoprefixer()");
+  });
+
+  it("preserves custom PostCSS config when it cannot be patched safely", () => {
+    const source = `const custom = require("./postcss-custom");
+module.exports = { plugins: [custom()] };
+`;
+
+    expect(patchWorkspacePostcssConfig(source)).toBe(source);
+  });
+
   it("removes stale antd layer declaration from index css", () => {
     const nextContent = patchWorkspaceTailwindCss(`@layer tailwind-base, antd;
 
@@ -148,7 +177,7 @@ module.exports = {
 `);
 
     expect(nextContent).not.toContain("@layer tailwind-base, antd;");
-    expect(nextContent.startsWith("@layer tailwind-base {")).toBe(true);
+    expect(nextContent).toContain("@layer tailwind-base {");
   });
 
   it("reports stale config during update check", () => {

package/templates/sy-lowcode-app-workspace/postcss.config.cjs

@@ -1,6 +1,24 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+function loadOpenXiangdaBuild() {
+  try {
+    return require("openxiangda/build");
+  } catch (error) {
+    try {
+      return require("../../packages/sdk/dist/build/index.cjs");
+    } catch {
+      throw error;
+    }
+  }
+}
+
+const { createOpenXiangdaNamespaceCssPlugin } = loadOpenXiangdaBuild();
+
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [
+    tailwindcss(),
+    createOpenXiangdaNamespaceCssPlugin(),
+    autoprefixer(),
+  ],
 };