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,7 +581,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     const isOpened = this.state.isOpened;
     let date: moment.Moment | undefined = this.state.value;
 
-    const calendarMobile = <CalendarMobile
+    const calendarMobile = (
+      <CalendarMobile
         isDatePicker={true}
         timeFormat={timeFormat}
         inputFormat={inputFormat}
@@ -595,11 +596,21 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         close={this.close}
         confirm={this.handleChange}
         footerExtra={this.renderShortCuts(shortcuts)}
-      showViewMode={viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'}
+        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 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
+          mobileCalendarMode === 'calendar' && useCalendarMobile ? (
-          ? <PopUp
+            <PopUp
               isShow={isOpened}
               className={cx(`${ns}CalendarMobile-pop`)}
               onHide={this.close}
@@ -745,7 +756,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             >
               {calendarMobile}
             </PopUp>
-          : <PopUp
+          ) : (
+            <PopUp
               className={cx(`${ns}DatePicker-popup DatePicker-mobile`)}
               container={popOverContainer}
               isShow={isOpened}
@@ -773,6 +785,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                 // 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_style.min.css';
-import 'froala-editor/css/froala_editor.pkgd.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';
 
 /**