wip(app): uni-app-vite

package.json

@@ -86,7 +86,7 @@
     "semver": "^7.3.4",
     "ts-jest": "^27.0.3",
     "typescript": "~4.1.3",
-    "vite": "^2.4.0-beta.2",
+    "vite": "^2.4.0-beta.3",
     "vue": "^3.1.2",
     "yorkie": "^2.0.0"
   },

packages/playground/ssr/package.json

@@ -31,6 +31,6 @@
     "compression": "^1.7.4",
     "cypress": "^7.3.0",
     "serve-static": "^1.14.1",
-    "vite": "^2.4.0-beta.2"
+    "vite": "^2.4.0-beta.3"
   }
 }

packages/playground/ssr/yarn.lock

@@ -2243,7 +2243,7 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vite@^2.4.0-beta.2:
+vite@^2.4.0-beta.3:
   version "2.4.0-beta.3"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.0-beta.3.tgz#81da5e6cbfb4cb710610e5757567cbe58b667c44"
   integrity sha512-sSUbH0mPMbqqOVZ1/LD/Wiu347yvn4BXjS/94mn5Q7E/zd50hxEnKU1NC4x59TBKq5OeboPhyXwibyCEpyAQKQ==

packages/uni-app-plus/dist/uni-app-view.umd.js

@@ -1235,7 +1235,11 @@
       }
       const appErrorHandler = instance.appContext.config.errorHandler;
       if (appErrorHandler) {
-        callWithErrorHandling(appErrorHandler, null, 10, [err, exposedInstance, errorInfo]);
+        callWithErrorHandling(appErrorHandler, null, 10, [
+          err,
+          exposedInstance,
+          errorInfo
+        ]);
         return;
       }
     }
@@ -1551,7 +1555,11 @@
   function resolveMergedOptions(instance) {
     const base = instance.type;
     const { mixins, extends: extendsOptions } = base;
-    const { mixins: globalMixins, optionsCache: cache, config: { optionMergeStrategies } } = instance.appContext;
+    const {
+      mixins: globalMixins,
+      optionsCache: cache,
+      config: { optionMergeStrategies }
+    } = instance.appContext;
     const cached = cache.get(base);
     let resolved;
     if (cached) {

packages/uni-app-vite/dist/index.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
 const plugin_1 = require("./plugin");
 const copy_1 = require("./plugins/copy");
 const mainJs_1 = require("./plugins/mainJs");
@@ -13,4 +18,7 @@ exports.default = [
     manifestJson_1.uniManifestJsonPlugin(),
     pagesJson_1.uniPagesJsonPlugin(),
     plugin_1.UniAppPlugin,
+    uni_cli_shared_1.uniCssPlugin({
+        app: fs_1.default.readFileSync(require.resolve('@dcloudio/uni-app-plus/dist/style.css'), 'utf8'),
+    }),
 ];

packages/uni-app-vite/dist/plugin.js

@@ -34,7 +34,7 @@ exports.UniAppPlugin = {
             },
         };
     },
-    configResolved() {
+    configResolved(config) {
         const manifestJson = uni_cli_shared_1.parseManifestJsonOnce(process.env.UNI_INPUT_DIR);
         if (uni_cli_shared_1.getNVueCompiler(manifestJson) === 'uni-app') {
             process.env.UNI_USING_NVUE_COMPILER = 'uni-app';
@@ -42,6 +42,12 @@ exports.UniAppPlugin = {
         if (uni_cli_shared_1.getNVueStyleCompiler(manifestJson) === 'uni-app') {
             process.env.UNI_USING_NVUE_STYLE_COMPILER = 'uni-app';
         }
+        // 移除 vite 内置的 css post 处理
+        const index = config.plugins.findIndex((p) => p.name === 'vite:css-post');
+        if (index > -1) {
+            ;
+            config.plugins.splice(index, 1);
+        }
     },
     resolveId(id) {
         if (id === 'vue') {

packages/uni-app-vite/dist/plugins/copy.js

@@ -14,10 +14,6 @@ function uniCopyPlugin() {
                 src: slash_1.default(path_1.default.resolve(__dirname, '../../lib/template/*')),
                 dest: process.env.UNI_OUTPUT_DIR,
             },
-            {
-                src: slash_1.default(require.resolve('@dcloudio/uni-app-plus/dist/style.css')),
-                dest: process.env.UNI_OUTPUT_DIR,
-            },
             {
                 src: slash_1.default(require.resolve('@dcloudio/uni-app-plus/dist/uni-app-view.umd.js')),
                 dest: process.env.UNI_OUTPUT_DIR,

packages/uni-app-vite/lib/template/__uniappview.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>View</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="app.css" />
   </head>
   <body>
     <div id="app"></div>

packages/uni-app-vite/src/index.ts

+import fs from 'fs'
+import { uniCssPlugin } from '@dcloudio/uni-cli-shared'
 import { UniAppPlugin } from './plugin'
 import { uniCopyPlugin } from './plugins/copy'
 import { uniMainJsPlugin } from './plugins/mainJs'
@@ -12,4 +14,10 @@ export default [
   uniManifestJsonPlugin(),
   uniPagesJsonPlugin(),
   UniAppPlugin,
+  uniCssPlugin({
+    app: fs.readFileSync(
+      require.resolve('@dcloudio/uni-app-plus/dist/style.css'),
+      'utf8'
+    ),
+  }),
 ]

packages/uni-app-vite/src/plugin.ts

@@ -42,7 +42,7 @@ export const UniAppPlugin: UniVitePlugin = {
       },
     }
   },
-  configResolved() {
+  configResolved(config) {
     const manifestJson = parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
     if (getNVueCompiler(manifestJson) === 'uni-app') {
       process.env.UNI_USING_NVUE_COMPILER = 'uni-app'
@@ -50,6 +50,11 @@ export const UniAppPlugin: UniVitePlugin = {
     if (getNVueStyleCompiler(manifestJson) === 'uni-app') {
       process.env.UNI_USING_NVUE_STYLE_COMPILER = 'uni-app'
     }
+    // 移除 vite 内置的 css post 处理
+    const index = config.plugins.findIndex((p) => p.name === 'vite:css-post')
+    if (index > -1) {
+      ;(config.plugins as Plugin[]).splice(index, 1)
+    }
   },
   resolveId(id) {
     if (id === 'vue') {

packages/uni-app-vite/src/plugins/copy.ts

@@ -10,10 +10,6 @@ export function uniCopyPlugin() {
         src: slash(path.resolve(__dirname, '../../lib/template/*')),
         dest: process.env.UNI_OUTPUT_DIR,
       },
-      {
-        src: slash(require.resolve('@dcloudio/uni-app-plus/dist/style.css')),
-        dest: process.env.UNI_OUTPUT_DIR,
-      },
       {
         src: slash(
           require.resolve('@dcloudio/uni-app-plus/dist/uni-app-view.umd.js')

packages/uni-cli-shared/src/vite/plugins/css.ts

+import path from 'path'
+import debug from 'debug'
+import slash from 'slash'
+import { Plugin } from 'vite'
+import { resolveMainPathOnce } from '../../utils'
+
+const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
+const cssLangRE = new RegExp(cssLangs)
+// const cssModuleRE = new RegExp(`\\.module${cssLangs}`)
+// const directRequestRE = /(\?|&)direct\b/
+const commonjsProxyRE = /\?commonjs-proxy/
+
+const debugCss = debug('vite:uni:css')
+
+// const isCSSRequest = (request: string): boolean =>
+//   cssLangRE.test(request) && !directRequestRE.test(request)
+
+const isCss = (id: string): boolean =>
+  cssLangRE.test(id) && !commonjsProxyRE.test(id)
+
+function normalizeCssChunkFilename(id: string) {
+  return slash(
+    path.relative(
+      process.env.UNI_INPUT_DIR,
+      id.replace('.vue', '.css').split('?')[0]
+    )
+  )
+}
+
+interface UniCssPluginOptions {
+  /**
+   * 额外的全局样式
+   */
+  app: string
+}
+
+export function uniCssPlugin({ app }: UniCssPluginOptions): Plugin {
+  const styles: Map<string, string> = new Map<string, string>()
+  let cssChunks: Map<string, Set<string>>
+
+  return {
+    name: 'vite:uni-app-css',
+    buildStart() {
+      cssChunks = new Map<string, Set<string>>()
+    },
+    transform(css, id) {
+      if (!isCss(id)) {
+        return
+      }
+      debugCss(id)
+      styles.set(id, css)
+      return {
+        code: '',
+        map: { mappings: '' },
+        moduleSideEffects: 'no-treeshake',
+      }
+    },
+    buildEnd() {
+      const findCssModuleIds = (
+        moduleId: string,
+        cssModuleIds?: Set<string>
+      ) => {
+        if (!cssModuleIds) {
+          cssModuleIds = new Set<string>()
+        }
+        const moduleInfo = this.getModuleInfo(moduleId)
+        if (moduleInfo) {
+          moduleInfo.importedIds.forEach((id) => {
+            if (id.includes('pages.json.js')) {
+              // 查询main.js时，需要忽略pages.json.js，否则会把所有页面样式加进来
+              return
+            }
+            if (isCss(id)) {
+              cssModuleIds!.add(id)
+            } else {
+              findCssModuleIds(id, cssModuleIds)
+            }
+          })
+        }
+        return cssModuleIds
+      }
+      const moduleIds = Array.from(this.getModuleIds())
+      const mainPath = resolveMainPathOnce(process.env.UNI_INPUT_DIR)
+      moduleIds.forEach((id) => {
+        if (id === mainPath) {
+          // 全局样式
+          cssChunks.set('app.css', findCssModuleIds(id))
+        } else if (id.includes('mpType=page')) {
+          // 页面样式
+          cssChunks.set(normalizeCssChunkFilename(id), findCssModuleIds(id))
+        }
+      })
+    },
+    generateBundle() {
+      if (!cssChunks.size) {
+        return
+      }
+      const genCssCode = (fileName: string) => {
+        return [...cssChunks.get(fileName)!]
+          .map((id) => styles.get(id) || '')
+          .join('\n')
+      }
+      for (const fileName of cssChunks.keys()) {
+        this.emitFile({
+          fileName,
+          type: 'asset',
+          source:
+            (fileName === 'app.css' ? app + '\n' : '') + genCssCode(fileName),
+        })
+      }
+    },
+  }
+}

packages/uni-cli-shared/src/vite/plugins/index.ts

+export * from './css'
 export * from './copy'
 export * from './inject'
 export * from './mainJs'

yarn.lock

@@ -9362,7 +9362,7 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vite@^2.4.0-beta.2:
+vite@^2.4.0-beta.3:
   version "2.4.0-beta.3"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.0-beta.3.tgz#81da5e6cbfb4cb710610e5757567cbe58b667c44"
   integrity sha512-sSUbH0mPMbqqOVZ1/LD/Wiu347yvn4BXjS/94mn5Q7E/zd50hxEnKU1NC4x59TBKq5OeboPhyXwibyCEpyAQKQ==