chore: 去掉 js require css 用法, 依赖的 css 内嵌在 amis css 文件中 (#3399)

package.json

@@ -132,7 +132,7 @@
     "css": "3.0.0",
     "faker": "^5.5.3",
     "fis-optimizer-terser": "^1.0.1",
-    "fis-parser-sass": "^1.1.0",
+    "fis-parser-sass": "^1.1.1",
     "fis-parser-svgr": "^1.0.0",
     "fis3": "^3.4.41",
     "fis3-deploy-skip-packed": "0.0.5",

scss/_thirds.scss

@@ -0,0 +1,7 @@
+@import url('../node_modules/react-datetime/css/react-datetime.css?__inline');
+@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');

scss/themes/_common.scss

@@ -1,3 +1,5 @@
+@import '../thirds';
+
 @import '../mixins';
 @import '../base/reset';
 @import '../base/normalize';

src/components/CodeMirror.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import 'codemirror/lib/codemirror.css';
+// import 'codemirror/lib/codemirror.css';
 import type CodeMirror from 'codemirror';
 import {autobind} from '../utils/helper';
 import {resizeSensor} from '../utils/resize-sensor';

src/components/DatePicker.tsx

@@ -14,7 +14,7 @@ import Overlay from './Overlay';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
 import Calendar from './calendar/Calendar';
-import 'react-datetime/css/react-datetime.css';
+// import 'react-datetime/css/react-datetime.css';
 import {localeable, LocaleProps, TranslateFn} from '../locale';
 import {isMobile, ucFirst} from '../utils/helper';
 import CalendarMobile from './CalendarMobile';
@@ -581,25 +581,36 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     const isOpened = this.state.isOpened;
     let date: moment.Moment | undefined = this.state.value;
 
-    const calendarMobile = <CalendarMobile
-      isDatePicker={true}
-      timeFormat={timeFormat}
-      inputFormat={inputFormat}
-      startDate={date}
-      defaultDate={date}
-      minDate={minDate}
-      maxDate={maxDate}
-      dateFormat={dateFormat}
-      embed={embed}
-      viewMode={viewMode}
-      close={this.close}
-      confirm={this.handleChange}
-      footerExtra={this.renderShortCuts(shortcuts)}
-      showViewMode={viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'}
-      timeConstraints={timeConstraints}
-    />;
-    const CalendarMobileTitle = <div className={`${ns}CalendarMobile-title`}>{__('Calendar.datepicker')}</div>;
-    const useCalendarMobile = useMobileUI && isMobile() && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
+    const calendarMobile = (
+      <CalendarMobile
+        isDatePicker={true}
+        timeFormat={timeFormat}
+        inputFormat={inputFormat}
+        startDate={date}
+        defaultDate={date}
+        minDate={minDate}
+        maxDate={maxDate}
+        dateFormat={dateFormat}
+        embed={embed}
+        viewMode={viewMode}
+        close={this.close}
+        confirm={this.handleChange}
+        footerExtra={this.renderShortCuts(shortcuts)}
+        showViewMode={
+          viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'
+        }
+        timeConstraints={timeConstraints}
+      />
+    );
+    const CalendarMobileTitle = (
+      <div className={`${ns}CalendarMobile-title`}>
+        {__('Calendar.datepicker')}
+      </div>
+    );
+    const useCalendarMobile =
+      useMobileUI &&
+      isMobile() &&
+      ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
 
     if (embed) {
       let schedulesData: DateProps['schedules'] = undefined;
@@ -736,8 +747,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           </Overlay>
         ) : null}
         {useMobileUI && isMobile() ? (
-          mobileCalendarMode === 'calendar' && useCalendarMobile
-          ? <PopUp
+          mobileCalendarMode === 'calendar' && useCalendarMobile ? (
+            <PopUp
               isShow={isOpened}
               className={cx(`${ns}CalendarMobile-pop`)}
               onHide={this.close}
@@ -745,34 +756,36 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             >
               {calendarMobile}
             </PopUp>
-          : <PopUp
-            className={cx(`${ns}DatePicker-popup DatePicker-mobile`)}
-            container={popOverContainer}
-            isShow={isOpened}
-            showClose={false}
-            onHide={this.handleClick}
-          >
-            {this.renderShortCuts(shortcuts)}
+          ) : (
+            <PopUp
+              className={cx(`${ns}DatePicker-popup DatePicker-mobile`)}
+              container={popOverContainer}
+              isShow={isOpened}
+              showClose={false}
+              onHide={this.handleClick}
+            >
+              {this.renderShortCuts(shortcuts)}
 
-            <Calendar
-              value={date}
-              onChange={this.handleChange}
-              requiredConfirm={!!(dateFormat && timeFormat)}
-              dateFormat={dateFormat}
-              inputFormat={inputFormat}
-              timeFormat={timeFormat}
-              isValidDate={this.checkIsValidDate}
-              viewMode={viewMode}
-              timeConstraints={timeConstraints}
-              input={false}
-              onClose={this.close}
-              locale={locale}
-              minDate={minDate}
-              maxDate={maxDate}
-              useMobileUI={useMobileUI}
-              // utc={utc}
-            />
-          </PopUp>
+              <Calendar
+                value={date}
+                onChange={this.handleChange}
+                requiredConfirm={!!(dateFormat && timeFormat)}
+                dateFormat={dateFormat}
+                inputFormat={inputFormat}
+                timeFormat={timeFormat}
+                isValidDate={this.checkIsValidDate}
+                viewMode={viewMode}
+                timeConstraints={timeConstraints}
+                input={false}
+                onClose={this.close}
+                locale={locale}
+                minDate={minDate}
+                maxDate={maxDate}
+                useMobileUI={useMobileUI}
+                // utc={utc}
+              />
+            </PopUp>
+          )
         ) : null}
       </div>
     );

src/components/RichText.tsx

@@ -42,8 +42,8 @@ import 'froala-editor/js/plugins/word_paste.min';
 import 'froala-editor/js/languages/zh_cn.js';
 
 // Require Editor CSS files.
-import 'froala-editor/css/froala_style.min.css';
-import 'froala-editor/css/froala_editor.pkgd.min.css';
+// import 'froala-editor/css/froala_style.min.css';
+// import 'froala-editor/css/froala_editor.pkgd.min.css';
 
 export interface FroalaEditorComponentProps {
   config: any;

src/components/Tinymce.tsx

@@ -6,7 +6,7 @@ import tinymce from 'tinymce/tinymce';
 // A theme is also required
 import 'tinymce/icons/default/index';
 import 'tinymce/themes/silver';
-import 'tinymce/skins/ui/oxide/skin.css';
+// import 'tinymce/skins/ui/oxide/skin.css';
 
 // Any plugins you want to use has to be imported
 import 'tinymce/plugins/advlist';

src/renderers/Form/InputImage.tsx

@@ -1,6 +1,6 @@
 import React, {Suspense} from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
-import 'cropperjs/dist/cropper.css';
+// import 'cropperjs/dist/cropper.css';
 const Cropper = React.lazy(() => import('react-cropper'));
 import DropZone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';

src/renderers/Video.tsx

@@ -18,7 +18,7 @@ import {Renderer, RendererProps} from '../factory';
 import {resolveVariable} from '../utils/tpl-builtin';
 import {filter} from '../utils/tpl';
 // import css
-import 'video-react/dist/video-react.css';
+// import 'video-react/dist/video-react.css';
 import {BaseSchema, SchemaClassName, SchemaUrlPath} from '../Schema';
 
 /**