feat: 增加配置控制全局样式加载顺序 (#195)

* docs: remove pwa

* fix: 全局样式覆盖问题

* fix: 修复全局样式加载顺序问题

* chore: 优化代码

docs/.vitepress/config.ts

@@ -5,8 +5,7 @@ import { withPwa } from '@vite-pwa/vitepress';
 import { navbar, sidebar } from './configs';
 
 const BASE_URL = process.env.BASE ? `/${process.env.BASE}/` : '/';
-export default withPwa(
+export default defineConfig({
-    defineConfig({
         base: BASE_URL,
         title: 'Fes.js',
         description: '一个好用的前端应用解决方案',
@@ -45,6 +44,4 @@ export default withPwa(
             },
         },
 
-        pwa: {},
+});
-    }),
-);

docs/.vitepress/configs/navbar/zh.ts

@@ -29,11 +29,11 @@ export const zh = [
       {
         text: 'v2.0',
         link:
-          'https://fesjs.mumblefe.cn/2.0',
+          'https://fesjs.mumblefe.cn/2.0/',
       },
       {
         text: 'v1.0',
-        link: 'https://fesjs.mumblefe.cn/1.0',
+        link: 'https://fesjs.mumblefe.cn/1.0/',
       },
     ],
   },

docs/reference/config/index.md

@@ -119,7 +119,6 @@ export default {
 
     路由是否按需加载
 
-
 ### inlineLimit
 
 -   类型： `number`
@@ -128,6 +127,14 @@ export default {
 
     配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。
 
+### globalCSS
+
+-   类型： `beforeImports` | `afterImports`
+-   默认值： `afterImports`
+-   详情：
+
+    定义 globalCSS 的位置，处理一些 CSS 覆盖问题。
+
 ### mock
 
 -   类型： `object || boolean`
@@ -418,7 +425,6 @@ export default {
         },
     },
 };
-
 ```
 
 ### exportStatic

package.json

@@ -48,6 +48,7 @@
     "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
+    "typescript": "^5.0.4",
     "vite-plugin-pwa": "^0.14.7",
     "vitepress": "1.0.0-alpha.73",
     "vue": "^3.2.47",

packages/fes-plugin-jest/package.json

@@ -41,7 +41,7 @@
     "jest-transform-stub": "^2.0.0",
     "jest-watch-typeahead": "^2.2.2",
     "ts-jest": "^27.0.4",
-    "typescript": "^4.9.0",
+    "typescript": "^5.0.4",
     "vue3-jest": "^27.0.0-alpha.1"
   }
 }

packages/fes-preset-built-in/src/plugins/features/globalCSS.js

@@ -2,10 +2,16 @@ import { relative, join } from 'path';
 import { existsSync } from 'fs';
 
 export default (api) => {
-    const {
+    api.describe({
-        paths,
+        key: 'globalCSS',
-        utils: { winPath },
+        config: {
-    } = api;
+            schema(joi) {
+                return joi.string();
+            },
+        },
+        default: '',
+    });
+    const { paths, utils } = api;
     const { absSrcPath = '', absTmpPath = '' } = paths;
     const files = ['global.css', 'global.less', 'global.scss', 'global.sass', 'global.styl', 'global.stylus'];
     const globalCSSFile = files
@@ -13,5 +19,23 @@ export default (api) => {
         .filter((file) => existsSync(file))
         .slice(0, 1);
 
-    api.addEntryCodeAhead(() => `${globalCSSFile.map((file) => `import '${winPath(relative(absTmpPath, file))}';`).join('')}`);
+    const isBeforeImports = () => api.config.globalCSS === 'beforeImports';
+
+    if (globalCSSFile.length) {
+        api.addEntryImportsAhead({
+            stage: 1,
+            fn: () => {
+                if (isBeforeImports()) {
+                    return [{ source: relative(absTmpPath, globalCSSFile[0]) }];
+                }
+                return [];
+            },
+        });
+        api.addEntryCodeAhead(() => {
+            if (!isBeforeImports()) {
+                return `import '${utils.winPath(relative(absTmpPath, globalCSSFile[0]))}';`;
+            }
+            return [];
+        });
+    }
 };

packages/fes-preset-built-in/types.d.ts

@@ -42,6 +42,7 @@ declare module '@fesjs/fes' {
     }
 
     interface PluginBuildConfig {
+        globalCSS?: 'beforeImports' | 'afterImports';
         alias?: Record<string, string>;
         autoprefixer?: {
             /** environment for `Browserslist` */

pnpm-lock.yaml

@@ -56,6 +56,9 @@ importers:
       lint-staged:
         specifier: ^13.2.0
         version: 13.2.0(enquirer@2.3.6)
+      typescript:
+        specifier: ^5.0.4
+        version: 5.0.4
       vite-plugin-pwa:
         specifier: ^0.14.7
         version: 0.14.7(vite@4.3.1)(workbox-build@6.5.4)(workbox-window@6.5.4)
@@ -385,13 +388,13 @@ importers:
         version: 2.2.2(jest@27.0.6)
       ts-jest:
         specifier: ^27.0.4
-        version: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@4.9.3)
+        version: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@5.0.4)
       typescript:
-        specifier: ^4.9.0
+        specifier: ^5.0.4
-        version: 4.9.3
+        version: 5.0.4
       vue3-jest:
         specifier: ^27.0.0-alpha.1
-        version: 27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@4.9.3)(vue@3.2.47)
+        version: 27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@5.0.4)(vue@3.2.47)
 
   packages/fes-plugin-layout:
     dependencies:
@@ -487,7 +490,7 @@ importers:
         version: link:../fes-utils
       pinia:
         specifier: ^2.0.11
-        version: 2.0.33(typescript@4.9.3)(vue@3.2.47)
+        version: 2.0.33(typescript@5.0.4)(vue@3.2.47)
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -514,7 +517,7 @@ importers:
         version: 2.7.0
       vite-plugin-qiankun:
         specifier: ^1.0.15
-        version: 1.0.15(typescript@4.9.3)(vite@4.3.1)
+        version: 1.0.15(typescript@5.0.4)(vite@4.3.1)
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -800,7 +803,7 @@ importers:
         version: 3.29.1
       pinia:
         specifier: ^2.0.33
-        version: 2.0.33(typescript@4.9.3)(vue@3.2.47)
+        version: 2.0.33(typescript@5.0.4)(vue@3.2.47)
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -881,7 +884,7 @@ importers:
         version: 3.29.1
       pinia:
         specifier: ^2.0.11
-        version: 2.0.33(typescript@4.9.3)(vue@3.2.47)
+        version: 2.0.33(typescript@5.0.4)(vue@3.2.47)
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -2436,13 +2439,13 @@ packages:
       '@types/node': 18.15.13
       chalk: 4.1.2
       cosmiconfig: 8.1.3
-      cosmiconfig-typescript-loader: 4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@4.9.3)
+      cosmiconfig-typescript-loader: 4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@5.0.4)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1(@types/node@18.15.13)(typescript@4.9.3)
+      ts-node: 10.9.1(@types/node@18.15.13)(typescript@5.0.4)
-      typescript: 4.9.3
+      typescript: 5.0.4
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -5815,7 +5818,7 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
 
-  /cosmiconfig-typescript-loader@4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@4.9.3):
+  /cosmiconfig-typescript-loader@4.3.0(@types/node@18.15.13)(cosmiconfig@8.1.3)(ts-node@10.9.1)(typescript@5.0.4):
     resolution: {integrity: sha512-NTxV1MFfZDLPiBMjxbHRwSh5LaLcPMwNdCutmnHJCKoVnlvldPWlllonKwrsRJ5pYZBIBGRWWU2tfvzxgeSW5Q==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -5826,8 +5829,8 @@ packages:
     dependencies:
       '@types/node': 18.15.13
       cosmiconfig: 8.1.3
-      ts-node: 10.9.1(@types/node@18.15.13)(typescript@4.9.3)
+      ts-node: 10.9.1(@types/node@18.15.13)(typescript@5.0.4)
-      typescript: 4.9.3
+      typescript: 5.0.4
     dev: true
     optional: true
 
@@ -8805,7 +8808,7 @@ packages:
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@types/node@18.15.13)(typescript@4.9.3)
+      ts-node: 10.9.1(@types/node@18.15.13)(typescript@5.0.4)
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -10552,7 +10555,7 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /pinia@2.0.33(typescript@4.9.3)(vue@3.2.47):
+  /pinia@2.0.33(typescript@5.0.4)(vue@3.2.47):
     resolution: {integrity: sha512-HOj1yVV2itw6rNIrR2f7+MirGNxhORjrULL8GWgRwXsGSvEqIQ+SE0MYt6cwtpegzCda3i+rVTZM+AM7CG+kRg==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -10565,7 +10568,7 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.5.0
-      typescript: 4.9.3
+      typescript: 5.0.4
       vue: 3.2.47
       vue-demi: 0.14.0(vue@3.2.47)
     dev: false
@@ -12475,7 +12478,7 @@ packages:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
 
-  /ts-jest@27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@4.9.3):
+  /ts-jest@27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@5.0.4):
     resolution: {integrity: sha512-c4E1ECy9Xz2WGfTMyHbSaArlIva7Wi2p43QOMmCqjSSjHP06KXv+aT+eSY+yZMuqsMi3k7pyGsGj2q5oSl5WfQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -12505,11 +12508,11 @@ packages:
       make-error: 1.3.6
       mkdirp: 1.0.4
       semver: 7.3.6
-      typescript: 4.9.3
+      typescript: 5.0.4
       yargs-parser: 20.2.9
     dev: false
 
-  /ts-node@10.9.1(@types/node@18.15.13)(typescript@4.9.3):
+  /ts-node@10.9.1(@types/node@18.15.13)(typescript@5.0.4):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -12535,7 +12538,7 @@ packages:
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.9.3
+      typescript: 5.0.4
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
 
@@ -12635,9 +12638,9 @@ packages:
       is-typedarray: 1.0.0
     dev: false
 
-  /typescript@4.9.3:
+  /typescript@5.0.4:
-    resolution: {integrity: sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==}
+    resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
-    engines: {node: '>=4.2.0'}
+    engines: {node: '>=12.20'}
     hasBin: true
 
   /uglify-js@3.17.4:
@@ -12860,14 +12863,14 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-qiankun@1.0.15(typescript@4.9.3)(vite@4.3.1):
+  /vite-plugin-qiankun@1.0.15(typescript@5.0.4)(vite@4.3.1):
     resolution: {integrity: sha512-0QB0Wr8Eu/LGcuJAfuNXDb7BAFDszo3GCxq4bzgXdSFAlK425u1/UGMxaDEBVA1uPFrLsZPzig83Ufdfl6J45A==}
     peerDependencies:
       typescript: '>=4'
       vite: '>=2'
     dependencies:
       cheerio: 1.0.0-rc.12
-      typescript: 4.9.3
+      typescript: 5.0.4
       vite: 4.3.1(@types/node@18.15.13)
     dev: false
 
@@ -13086,7 +13089,7 @@ packages:
       vue: 3.2.47
     dev: false
 
-  /vue3-jest@27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@4.9.3)(vue@3.2.47):
+  /vue3-jest@27.0.0-alpha.1(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(ts-jest@27.0.4)(typescript@5.0.4)(vue@3.2.47):
     resolution: {integrity: sha512-F/pSFbpLcYVIv0ogNMFwT+W+r9tCRfLw84IIqqyocD1FZaW6m3RpfqwQsOXgYJVXFSdj4t3xbgj967s8WMrZjQ==}
     peerDependencies:
       '@babel/core': 7.x
@@ -13109,9 +13112,9 @@ packages:
       extract-from-css: 0.4.4
       jest: 27.0.6(ts-node@10.9.1)
       source-map: 0.5.6
-      ts-jest: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@4.9.3)
+      ts-jest: 27.0.4(@babel/core@7.21.3)(babel-jest@27.0.6)(jest@27.0.6)(typescript@5.0.4)
       tsconfig: 7.0.0
-      typescript: 4.9.3
+      typescript: 5.0.4
       vue: 3.2.47
     transitivePeerDependencies:
       - supports-color