让示例可以跑起来

2024-11-29 10:38:16 +08:00 · 2022-06-01 21:35:49 +08:00 · 2022-06-01 21:35:49 +08:00 · dcfef5ddb6
commit dcfef5ddb6
parent 7a83562589
27 changed files with 249 additions and 166 deletions
--- a/examples/components/App.tsx
+++ b/examples/components/App.tsx
@ -11,8 +11,8 @@ import {
  Select,
  InputBox
 } from 'amis';
-import {eachTree, mapTree} from 'amis/lib/utils/helper';
-import 'amis/lib/locale/en-US';
+import {eachTree, mapTree} from 'amis-core';
+import 'amis-ui/lib/locale/en-US';
 import {withRouter} from 'react-router';
 import DocSearch from './DocSearch';
 import Doc from './Doc';
--- a/examples/components/Doc.tsx
+++ b/examples/components/Doc.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import {Switch} from 'react-router-dom';

-import {flattenTree, filterTree, mapTree} from 'amis/lib/utils/helper';
+import {flattenTree, filterTree, mapTree} from 'amis-core';
 import {navigations2route} from './App';

 import DocNavCN from './DocNavCN';
--- a/examples/components/ECharts.tsx
+++ b/examples/components/ECharts.tsx
@ -7,7 +7,7 @@ import example from './EChartsEditor/Example';

 import {lazyData} from './LazyData';
 import React from 'react';
-import Spinner from 'amis/lib/components/Spinner';
+import {Spinner} from 'amis-ui';

 const LazyComponent = lazyData(
  async () =>
--- a/examples/components/Editor.jsx
+++ b/examples/components/Editor.jsx
@ -1,7 +1,7 @@
 import React from 'react';
-import Editor from 'amis/editor/Editor';
-import Switch from 'amis/components/Switch';
-import Button from 'amis/components/Button';
+import {Editor} from 'amis-ui';
+import {Switch} from 'amis-ui';
+import {Button} from 'amis-ui';
 import schema from './Form/Test';
 import Portal from 'react-overlays/Portal';

--- a/examples/components/Example.jsx
+++ b/examples/components/Example.jsx
@ -117,9 +117,6 @@ import Tab1Schema from './Tabs/Tab1';
 import Tab2Schema from './Tabs/Tab2';
 import Tab3Schema from './Tabs/Tab3';

-import TestComponent from './Test';
-
-import {normalizeLink} from 'amis/utils/normalizeLink';
 import {Switch} from 'react-router-dom';
 import {navigations2route} from './App';

--- a/examples/components/Form/Custom.jsx
+++ b/examples/components/Form/Custom.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import {FormItem, Renderer} from 'amis';
+import {FormItem, Renderer} from 'amis-core';

@FormItem({
  type: 'my-custom'
--- a/examples/components/Form/Schem.jsx
+++ b/examples/components/Form/Schem.jsx
@ -1,5 +1,5 @@
 import React from 'react';
-import TitleBar from 'amis/components/TitleBar';
+import {TitleBar} from 'amis-ui';
 import {render} from 'amis';

 const Schema = {
--- a/examples/components/MdRenderer.jsx
+++ b/examples/components/MdRenderer.jsx
@ -3,12 +3,9 @@ import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {createRoot} from 'react-dom/client';
 import {getTheme, render} from 'amis';
-import axios from 'axios';
-import TitleBar from 'amis/lib/components/TitleBar';
-import LazyComponent from 'amis/lib/components/LazyComponent';
-import Overlay from 'amis/lib/components/Overlay';
-import PopOver from 'amis/lib/components/PopOver';
-import NestedLinks from 'amis/lib/components/AsideNav';
+import {LazyComponent} from 'amis-core';
+import {Overlay} from 'amis-ui';
+import {PopOver} from 'amis-ui';
 import classnames from 'classnames';
 import {Link} from 'react-router-dom';
 import Play from './Play';
--- a/examples/components/Play.jsx
+++ b/examples/components/Play.jsx
@ -1,15 +1,15 @@
 import React from 'react';
 import {toast, render, makeTranslator} from 'amis';
-import {normalizeLink} from 'amis/lib/utils/normalizeLink';
-import {isMobile} from 'amis/lib/utils/helper';
-import attachmentAdpator from 'amis/lib/utils/attachmentAdpator';
-import {alert, confirm} from 'amis/lib/components/Alert';
+import {normalizeLink} from 'amis-core';
+import {isMobile} from 'amis-core';
+import {attachmentAdpator} from 'amis-core';
+import {alert, confirm} from 'amis-ui';
 import axios from 'axios';
 import JSON5 from 'json5';
-import CodeEditor from 'amis/lib/components/Editor';
+import {Editor as CodeEditor} from 'amis-ui';
 import copy from 'copy-to-clipboard';
 import {matchPath} from 'react-router-dom';
-import Drawer from 'amis/lib/components/Drawer';
+import {Drawer} from 'amis-ui';

 const DEFAULT_CONTENT = `{
    "$schema": "/schemas/page.json#",
--- a/examples/components/SchemaRender.jsx
+++ b/examples/components/SchemaRender.jsx
@ -3,16 +3,14 @@ import {render, toast, Button, LazyComponent, Drawer} from 'amis';
 import axios from 'axios';
 import Portal from 'react-overlays/Portal';
 import {toast} from 'amis';
-import {normalizeLink} from 'amis/lib/utils/normalizeLink';
+import {normalizeLink} from 'amis-core';
 import {withRouter} from 'react-router';
-import {matchPath} from 'react-router-dom';
 import copy from 'copy-to-clipboard';
-import {qsparse} from 'amis/lib/utils/helper';
+import {qsparse} from 'amis-core';

 function loadEditor() {
  return new Promise(resolve =>
-    require(['amis/lib/components/Editor'], component =>
-      resolve(component.default))
+    require(['amis-ui'], component => resolve(component.Editor))
  );
 }

--- a/examples/embed.tsx
+++ b/examples/embed.tsx
@ -4,7 +4,7 @@ import {createRoot} from 'react-dom/client';
 import axios from 'axios';
 import {match} from 'path-to-regexp';
 import copy from 'copy-to-clipboard';
-import {normalizeLink} from 'amis/lib/utils/normalizeLink';
+import {normalizeLink} from 'amis-core';

 import qs from 'qs';
 import {
@ -17,11 +17,11 @@ import {
  makeTranslator
 } from 'amis';

-import 'amis/lib/locale/en-US';
+import 'amis-ui/lib/locale/en-US';
 import 'history';
-import attachmentAdpator from 'amis/lib/utils/attachmentAdpator';
+import {attachmentAdpator} from 'amis-core';

-import type {ToastLevel, ToastConf} from 'amis/lib/components/Toast';
+import type {ToastLevel, ToastConf} from 'amis-ui/lib/components/Toast';

 export function embed(
  container: string | HTMLElement,
--- a/examples/index.html
+++ b/examples/index.html
@ -1,36 +1,31 @@
 <!DOCTYPE html>
 <html lang="zh">
-  <head>
-    <meta charset="UTF-8" />
-    <title>amis - 低代码前端框架</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link type="image/x-icon" rel="shortcut icon" href="./static/favicon.png" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
-    />
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
-    <link rel="stylesheet" href="./static/iconfont.css" />
-    <link rel="stylesheet" href="@fortawesome/fontawesome-free/css/all.css" />
-    <link
-      rel="stylesheet"
-      href="@fortawesome/fontawesome-free/css/v4-shims.css"
-    />
-    <link rel="stylesheet" href="prismjs/themes/prism.css" />
-    <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
-    <link rel="stylesheet" href="./doc.css" />

-    <link rel="stylesheet" href="./style.scss" />
-    <!--STYLE_PLACEHOLDER-->
-    <style>
-      .app-wrapper,
-      .schema-wrapper {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-    <script type="text/x-jsx">
+<head>
+  <meta charset="UTF-8" />
+  <title>amis - 低代码前端框架</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <link type="image/x-icon" rel="shortcut icon" href="./static/favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <link rel="stylesheet" href="./static/iconfont.css" />
+  <link rel="stylesheet" href="@fortawesome/fontawesome-free/css/all.css" />
+  <link rel="stylesheet" href="@fortawesome/fontawesome-free/css/v4-shims.css" />
+  <link rel="stylesheet" href="prismjs/themes/prism.css" />
+  <!--DEPENDENCIES_INJECT_PLACEHOLDER-->
+  <link rel="stylesheet" href="./doc.css" />
+
+  <link rel="stylesheet" href="./style.scss" />
+  <!--STYLE_PLACEHOLDER-->
+  <style>
+    .app-wrapper,
+    .schema-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+  <script type="text/x-jsx">
      // gitee 最近特别慢
      if (location.hostname === 'baidu.gitee.io') {
        location.hostname = 'aisuda.bce.baidu.com';
@ -46,75 +41,76 @@
        document.write(
          `<link rel="stylesheet" title="ang" ${
            theme !== 'ang' ? 'disabled' : ''
-          }  href="${__uri('amis/scss/themes/ang.scss')}" />`
+          }  href="${__uri('amis-ui/lib/themes/ang.css')}" />`
        );
        document.write(
          `<link rel="stylesheet" title="cxd" ${
            theme !== 'cxd' ? 'disabled' : ''
-          } href="${__uri('amis/scss/themes/cxd.scss')}" />`
+          } href="${__uri('amis-ui/lib/themes/cxd.css')}" />`
        );
        document.write(
          `<link rel="stylesheet" title="dark" ${
            theme !== 'dark' ? 'disabled' : ''
-          } href="${__uri('amis/scss/themes/dark.scss')}" />`
+          } href="${__uri('amis-ui/lib/themes/dark.css')}" />`
        );
        document.write(
          `<link rel="stylesheet" title="antd" ${
            theme !== 'antd' ? 'disabled' : ''
-          } href="${__uri('amis/scss/themes/antd.scss')}" />`
+          } href="${__uri('amis-ui/lib/themes/antd.css')}" />`
        );
      } else {
        document.write(
          `<link rel="stylesheet" title="ang" ${
            theme !== 'ang' ? 'disabled' : ''
-          }  href="${__uri('amis/scss/themes/ang-ie11.scss')}" />`
+          }  href="${__uri('amis-ui/lib/themes/ang-ie11.css')}" />`
        );
        document.write(
          `<link rel="stylesheet" title="cxd" ${
            theme !== 'cxd' ? 'disabled' : ''
-          } href="${__uri('amis/scss/themes/cxd-ie11.scss')}" />`
+          } href="${__uri('amis-ui/lib/themes/cxd-ie11.css')}" />`
        );
        document.write(
          `<link rel="stylesheet" title="dark" ${
            theme !== 'dark' ? 'disabled' : ''
-          } href="${__uri('amis/scss/themes/dark-ie11.scss')}" />`
+          } href="${__uri('amis-ui/lib/themes/dark-ie11.css')}" />`
        );
        document.write(
          `<link rel="stylesheet" title="antd" ${
            theme !== 'antd' ? 'disabled' : ''
-          } href="${__uri('amis/scss/themes/antd-ie11.scss')}" />`
+          } href="${__uri('amis-ui/lib/themes/antd-ie11.css')}" />`
        );
      }
    </script>
-    <!--ignore-->
-    <link rel="stylesheet" href="amis/scss/helper.scss" />
-    <!--ignore-->
-  </head>
+  <!--ignore-->
+  <link rel="stylesheet" href="amis-ui/lib/helper.css" />
+  <!--ignore-->
+</head>

-  <body>
-    <div id="root" class="app-wrapper"></div>
-    <script src="./mod.js"></script>
-    <script type="text/javascript">
-      if (location.hostname !== 'localhost') {
-        var _hmt = _hmt || [];
+<body>
+  <div id="root" class="app-wrapper"></div>
+  <script src="./mod.js"></script>
+  <script type="text/javascript">
+    if (location.hostname !== 'localhost') {
+      var _hmt = _hmt || [];

-        // 百度统计
-        (function () {
-          var hm = document.createElement('script');
-          hm.src =
-            'https://hm.baidu.com/hm.js?286766a21abb57abefedbd5257a26dc8';
-          var s = document.getElementsByTagName('script')[0];
-          s.parentNode.insertBefore(hm, s);
-        })();
-      }
+      // 百度统计
+      (function () {
+        var hm = document.createElement('script');
+        hm.src =
+          'https://hm.baidu.com/hm.js?286766a21abb57abefedbd5257a26dc8';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    }

-      window.enableAMISDebug = true;
+    window.enableAMISDebug = true;

-      /* @require ./index.jsx 标记为同步依赖，提前加载 */
-      amis.require(['./index.jsx'], function (app) {
-        var initialState = {};
-        app.bootstrap(document.getElementById('root'), initialState);
-      });
-    </script>
-  </body>
-</html>
+    /* @require ./index.jsx 标记为同步依赖，提前加载 */
+    amis.require(['./index.jsx'], function (app) {
+      var initialState = {};
+      app.bootstrap(document.getElementById('root'), initialState);
+    });
+  </script>
+</body>
+
+</html>
--- a/examples/mobile.jsx
+++ b/examples/mobile.jsx
@ -9,7 +9,7 @@ import {createRoot} from 'react-dom/client';
 import axios from 'axios';
 import copy from 'copy-to-clipboard';
 import {toast} from 'amis';
-import 'amis/lib/locale/en-US';
+import 'amis-ui/lib/locale/en-US';

 import {render as renderAmis} from 'amis';

--- a/examples/style.scss
+++ b/examples/style.scss
@ -1,6 +1,6 @@
-@import 'node_modules/amis/scss/mixins';
-@import 'node_modules/amis/scss/functions';
-@import 'node_modules/amis/scss/variables';
+@import 'node_modules/amis-ui/scss/mixins';
+@import 'node_modules/amis-ui/scss/functions';
+@import 'node_modules/amis-ui/scss/variables';

 body {
  background-color: #fff !important;
--- a/package.json
+++ b/package.json
@ -9,5 +9,21 @@
    "stop": "fis3 server stop",
    "dev": "fis3 release -cwd ./public",
    "deploy-gh-page": "sh ./deploy-gh-pages.sh"
+  },
+  "devDependencies": {
+    "fis-optimizer-terser": "^1.0.1",
+    "fis-parser-sass": "^1.1.1",
+    "fis-parser-svgr": "^1.0.0",
+    "fis3": "^3.4.41",
+    "fis3-deploy-skip-packed": "0.0.5",
+    "fis3-hook-commonjs": "^0.1.31",
+    "fis3-hook-node_modules": "^2.3.1",
+    "fis3-hook-relative": "^2.0.3",
+    "fis3-packager-deps-pack": "^0.1.2",
+    "fis3-parser-typescript": "^1.4.0",
+    "fis3-postpackager-loader": "^2.1.12",
+    "fis3-prepackager-stand-alone-pack": "^1.0.0",
+    "fis3-preprocessor-js-require-css": "^0.1.3",
+    "fis3-preprocessor-js-require-file": "^0.1.3"
  }
 }
--- a/packages/amis-core/package.json
+++ b/packages/amis-core/package.json
@ -55,7 +55,9 @@
    "react-dom": "^18.0.0",
    "react-json-view": "1.21.3",
    "react-visibility-sensor": "5.1.1",
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "markdown-it": "^12.0.6",
+    "markdown-it-html5-media": "^0.7.1"
  },
  "jest": {
    "testEnvironment": "jsdom",
--- a/packages/amis-core/src/Root.tsx
+++ b/packages/amis-core/src/Root.tsx
@ -146,6 +146,7 @@ export function renderChild(

  return (
    <SchemaRenderer
+      render={renderChild as any}
      {...props}
      schema={schema}
      propKey={schema.key}
--- a/packages/amis-core/src/index.tsx
+++ b/packages/amis-core/src/index.tsx
@ -71,10 +71,6 @@ import {
 import {Schema} from './types';
 import ScopedRootRenderer, {RootRenderProps} from './Root';
 import {envOverwrite} from './envOverwrite';
-import {wrapFetcher} from './utils/api';
-import {autobind, promisify} from './utils/helper';
-import {enableDebug} from './utils/debug';
-import {replaceText} from './utils/replaceText';
 import {EnvContext, RendererEnv} from './env';
 import React from 'react';
 import {
@ -90,6 +86,7 @@ import {
 } from 'amis-formula';
 import LazyComponent from './components/LazyComponent';
 import {FormHorizontal, FormRenderer} from './renderers/Form';
+import {enableDebug, promisify, replaceText, wrapFetcher} from './utils/index';

 export {
  clearStoresCache,
@ -135,7 +132,6 @@ export {
  localeable,
  LocaleProps,
  TranslateFn,
-  autobind,
  ClassNamesFn,
  // amis-formula 相关
  parse,
--- a/packages/amis-core/src/theme.tsx
+++ b/packages/amis-core/src/theme.tsx
@ -36,7 +36,9 @@ const themes: {
  [propName: string]: ThemeConfig;
 } = {
  default: {},
-  cxd: {}
+  cxd: {
+    classPrefix: 'cxd-'
+  }
 };

 export function theme(name: string, config: Partial<ThemeConfig>) {
--- a/packages/amis-core/src/utils/attachmentAdpator.ts
+++ b/packages/amis-core/src/utils/attachmentAdpator.ts
@ -5,7 +5,7 @@
 * @returns
 */

-export default function attachmentAdpator(response: any, __: Function) {
+export function attachmentAdpator(response: any, __: Function) {
  if (response && response.headers && response.headers['content-disposition']) {
    const disposition = response.headers['content-disposition'];
    let filename = '';
@ -88,3 +88,5 @@ export default function attachmentAdpator(response: any, __: Function) {

  return response;
 }
+
+export default attachmentAdpator;
--- a/packages/amis-core/src/utils/helper.ts
+++ b/packages/amis-core/src/utils/helper.ts
@ -162,7 +162,7 @@ export function findIndex(
  return -1;
 }

-export function hasOwnProperty(
+export function hasOwnPropertyInPath(
  data: {[propName: string]: any},
  key: string
 ): boolean {
--- a/packages/amis-core/src/utils/index.ts
+++ b/packages/amis-core/src/utils/index.ts
@ -1,32 +1,54 @@
-export * from './helper';
-export * from './resize-sensor';
 export * from './api';
-export * from './tpl';
-export * from './tpl-builtin';
-export * from './DataScope';
-export * from './DataSchema';
-export * from './normalizeOptions';
-export * from './validations';
-export * from './icon';
-export * from './style';
-export * from './RootClose';
-export * from './dom';
+export * from './attachmentAdpator';
+export * from './autobind';
+export * from './ColorScale';
 export * from './columnsSplit';
-export * from './highlight';
+export * from './dataMapping';
+export * from './DataSchema';
+export * from './DataScope';
+export * from './date';
+export * from './debug';
+export * from './dom';
+export * from './errors';
+export * from './escapeHtml';
 export * from './filter-schema';
-export * from './SimpleMap';
-export * from './optionValueCompare';
+export * from './filter';
+export * from './formatDuration';
+export * from './formula';
+export * from './getVariable';
+export * from './grammar';
+export * from './handleAction';
+export * from './helper';
+export * from './highlight';
+export * from './icon';
 export * from './image';
+export * from './isPureVariable';
+export * from './json-schema-2-amis-schema';
+export * from './keyToPath';
+export * from './makeSorter';
+export * from './markdown';
+export * from './normalizeLink';
+export * from './normalizeOptions';
+export * from './object';
 export * from './offset';
 export * from './offsetParent';
-export * from './ColorScale';
+export * from './optionValueCompare';
+export * from './position';
+export * from './prettyBytes';
 export * from './renderer-event';
-export * from './handleAction';
+export * from './replaceText';
+export * from './resize-sensor';
+export * from './resolveVariable';
+export * from './resolveVariableAndFilter';
+export * from './RootClose';
 export * from './scrollPosition';
-export * from './formula';
-export * from './grammar';
-
-import './debug';
+export * from './SimpleMap';
+export * from './string2regExp';
+export * from './style';
+export * from './tokenize';
+export * from './tpl-builtin';
+export * from './tpl';
+export * from './validations';

 import animation from './Animation';
 import markdownRender from './markdown';
--- a/packages/amis-core/src/utils/markdown.ts
+++ b/packages/amis-core/src/utils/markdown.ts
@ -6,13 +6,15 @@ import markdownIt from 'markdown-it';
 // @ts-ignore
 import {html5Media} from 'markdown-it-html5-media';

-const markdown = markdownIt();
+const doMarkdown = markdownIt();

-markdown.use(html5Media);
+doMarkdown.use(html5Media);

-export default function (content: string, options?: markdownIt.Options) {
+export function markdown(content: string, options?: markdownIt.Options) {
  if (options) {
-    markdown.set(options);
+    doMarkdown.set(options);
  }
-  return markdown.render(content);
+  return doMarkdown.render(content);
 }
+
+export default markdown;
--- a/packages/amis-core/src/utils/position.ts
+++ b/packages/amis-core/src/utils/position.ts
@ -14,10 +14,7 @@ const nodeName = (node: Element) =>
 * @param node the element
 * @param offsetParent the offset parent
 */
-export default function position(
-  node: HTMLElement,
-  offsetParent?: HTMLElement
-) {
+export function position(node: HTMLElement, offsetParent?: HTMLElement) {
  let parentOffset = {top: 0, left: 0};
  let offset;
  // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
@ -53,3 +50,5 @@ export default function position(
    left: offset.left - parentOffset.left - (parseInt(marginLeft, 10) || 0)
  };
 }
+
+export default position;
--- a/packages/amis-ui/package.json
+++ b/packages/amis-ui/package.json
@ -59,17 +59,23 @@
    "@rollup/plugin-typescript": "^8.3.2",
    "@svgr/rollup": "^6.2.1",
    "@testing-library/jest-dom": "^5.16.4",
+    "@types/babel__core": "^7.1.19",
    "@types/jest": "^27.0.2",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
+    "autoprefixer": "^10.4.7",
    "jest": "^27.2.1",
    "moment-timezone": "^0.5.34",
+    "postcss-import": "^14.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "rimraf": "^3.0.2",
    "rollup": "^2.73.0",
    "rollup-plugin-auto-external": "^2.0.0",
    "rollup-plugin-license": "^2.7.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^3.0.0",
+    "sass": "^1.52.1",
    "typescript": "^4.6.4"
  }
 }
--- a/packages/amis-ui/rollup.config.js
+++ b/packages/amis-ui/rollup.config.js
@ -5,6 +5,11 @@ import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import license from 'rollup-plugin-license';
 import autoExternal from 'rollup-plugin-auto-external';
+import sass from 'sass';
+import postcss from 'rollup-plugin-postcss';
+import postcssImport from 'postcss-import';
+import autoprefixer from 'autoprefixer';
+
 import {
  name,
  version,
@ -41,7 +46,14 @@ const input = [

 export default [
  {
-    input,
+    input: input.concat([
+      './scss/themes/antd.scss',
+      './scss/themes/ang.scss',
+      './scss/themes/cxd.scss',
+      './scss/themes/dark.scss',
+      './scss/themes/default.scss',
+      './scss/helper.scss'
+    ]),

    output: [
      {
@ -55,24 +67,42 @@ export default [
    ],
    external,
    plugins: getPlugins('cjs')
-  },
-
-  {
-    input,
-
-    output: [
-      {
-        ...settings,
-        dir: path.dirname(module),
-        format: 'esm',
-        exports: 'named',
-        preserveModulesRoot: './src',
-        preserveModules: true // Keep directory structure and files
-      }
-    ],
-    external,
-    plugins: getPlugins('esm')
+      .concat(
+        ['antd', 'ang', 'cxd', 'dark', 'default'].map(theme =>
+          postcss({
+            include: `**/${theme}.scss`,
+            // process: processSass,
+            extract: path.resolve(`lib/themes/${theme}.css`),
+            plugins: [postcssImport(), autoprefixer()]
+          })
+        )
+      )
+      .concat(
+        postcss({
+          include: `**/helper.scss`,
+          // process: processSass,
+          extract: path.resolve(`lib/helper.css`),
+          plugins: [postcssImport(), autoprefixer()]
+        })
+      )
  }
+
+  // {
+  //   input,
+
+  //   output: [
+  //     {
+  //       ...settings,
+  //       dir: path.dirname(module),
+  //       format: 'esm',
+  //       exports: 'named',
+  //       preserveModulesRoot: './src',
+  //       preserveModules: true // Keep directory structure and files
+  //     }
+  //   ],
+  //   external,
+  //   plugins: getPlugins('esm')
+  // }
 ];

 function transpileDynamicImportForCJS(options) {
@ -135,3 +165,20 @@ function getPlugins(format = 'esm') {
    })
  ];
 }
+
+function processSass(context, payload) {
+  return new Promise((resolve, reject) => {
+    sass.render(
+      {
+        file: context
+      },
+      function (err, result) {
+        if (!err) {
+          resolve(result);
+        } else {
+          reject(err);
+        }
+      }
+    );
+  });
+}
--- a/packages/amis-ui/scss/_thirds.scss
+++ b/packages/amis-ui/scss/_thirds.scss
@ -1,8 +1,8 @@
-@import url('../node_modules/codemirror/lib/codemirror.css?__inline');
-@import url('../node_modules/froala-editor/css/froala_style.min.css?__inline');
-@import url('../node_modules/froala-editor/css/froala_editor.pkgd.min.css?__inline');
-@import url('../node_modules/tinymce/skins/ui/oxide/skin.css?__inline');
-@import url('../node_modules/video-react/dist/video-react.css?__inline');
-@import url('../node_modules/cropperjs/dist/cropper.css?__inline');
+@import url('codemirror/lib/codemirror.css');
+@import url('froala-editor/css/froala_style.min.css');
+@import url('froala-editor/css/froala_editor.pkgd.min.css');
+@import url('tinymce/skins/ui/oxide/skin.css');
+@import url('video-react/dist/video-react.css');
+@import url('cropperjs/dist/cropper.css');

@import './components/react-datetime';