wip(mp): css

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

@@ -12,6 +12,7 @@ export const configResolved: Plugin['configResolved'] = (config) => {
   removePlugins('vite:import-analysis', config)
   injectCssPlugin(config)
   injectCssPostPlugin(config, {
+    extname: '.css',
     appCss: fs.readFileSync(
       require.resolve('@dcloudio/uni-app-plus/dist/style.css'),
       'utf8'

packages/uni-cli-shared/src/utils.ts

@@ -49,3 +49,15 @@ export function removeExt(str: string, ext?: string) {
   }
   return normalizePath(str.replace(/\.\w+$/g, ''))
 }
+
+const NODE_MODULES_REGEX = /(\.\.\/)?node_modules/g
+
+export function normalizeNodeModules(str: string) {
+  str = normalizePath(str).replace(NODE_MODULES_REGEX, 'node-modules')
+  // HBuilderX 内置模块路径转换
+  str = str.replace(/.*\/plugins\/uniapp-cli\/node[-_]modules/, 'node-modules')
+  if (process.env.UNI_PLATFORM === 'mp-alipay') {
+    str = str.replace('node-modules/@', 'node-modules/npm-scope-')
+  }
+  return str
+}

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

 import type { Plugin } from 'vite'
+import type { EmittedFile } from 'rollup'
 import type { ParserOptions } from '@vue/compiler-core'
 import type { CompilerOptions, TemplateCompiler } from '@vue/compiler-sfc'
 import { UniViteCopyPluginOptions } from './plugins/copy'
+
 export interface CopyOptions {
   /**
    * 静态资源，配置的目录，在 uni_modules 中同样支持
@@ -13,6 +15,9 @@ export interface CopyOptions {
 interface UniVitePluginUniOptions {
   compiler?: TemplateCompiler
   compilerOptions?: {
+    miniProgram?: {
+      emitFile?: (emittedFile: EmittedFile) => string
+    }
     isNativeTag: ParserOptions['isNativeTag']
     isCustomElement: ParserOptions['isCustomElement']
     directiveTransforms?: CompilerOptions['directiveTransforms']

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

@@ -178,14 +178,14 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
-function normalizeCssChunkFilename(id: string) {
+function normalizeCssChunkFilename(id: string, extname: string = '.css') {
   return normalizePath(
     path.relative(
       process.env.UNI_INPUT_DIR,
       id
         .split('?')[0]
-        .replace(EXTNAME_VUE_RE, '.css')
-        .replace(EXTNAME_JS_RE, '.css')
+        .replace(EXTNAME_VUE_RE, extname)
+        .replace(EXTNAME_JS_RE, extname)
     )
   )
 }
@@ -228,7 +228,7 @@ function findCssModuleIds(
  */
 export function cssPostPlugin(
   config: ResolvedConfig,
-  { appCss }: { appCss?: string }
+  { appCss, extname }: { appCss?: string; extname: string }
 ): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
   const styles: Map<string, string> = new Map<string, string>()
@@ -259,11 +259,11 @@ export function cssPostPlugin(
       moduleIds.forEach((id) => {
         if (id === mainPath) {
           // 全局样式
-          cssChunks.set('app.css', findCssModuleIds.call(this, id))
+          cssChunks.set('app' + extname, findCssModuleIds.call(this, id))
         } else if (id.includes('mpType=page')) {
           // 页面样式
           cssChunks.set(
-            normalizeCssChunkFilename(id),
+            normalizeCssChunkFilename(id, extname),
             findCssModuleIds.call(this, id)
           )
         }

packages/uni-cli-shared/src/vite/utils/plugin.ts

@@ -19,9 +19,9 @@ export function injectCssPlugin(config: ResolvedConfig) {
 
 export function injectCssPostPlugin(
   config: ResolvedConfig,
-  { appCss }: { appCss?: string }
+  { appCss, extname }: { appCss?: string; extname: string }
 ) {
-  replacePlugins([cssPostPlugin(config, { appCss })], config)
+  replacePlugins([cssPostPlugin(config, { appCss, extname })], config)
 }
 
 export function replacePlugins(plugins: Plugin[], config: ResolvedConfig) {

packages/uni-mp-compiler/src/compile.ts

@@ -48,8 +48,11 @@ export function baseCompile(template: string, options: CompilerOptions = {}) {
     })
   )
   const result = extend(generate(context.scope, options), { ast })
-  if (options.filename && options.emitFile) {
-    genTemplate(ast, { filename: options.filename, emitFile: options.emitFile })
+  if (options.filename && options.miniProgram?.emitFile) {
+    genTemplate(ast, {
+      filename: options.filename,
+      emitFile: options.miniProgram.emitFile,
+    })
   }
 
   return result

packages/uni-mp-compiler/src/options.ts

@@ -60,7 +60,9 @@ export interface CodegenOptions extends SharedTransformCodegenOptions {
   scopeId?: string | null
   runtimeModuleName?: string
   runtimeGlobalName?: string
-  emitFile?: (emittedFile: EmittedFile) => string
+  miniProgram?: {
+    emitFile?: (emittedFile: EmittedFile) => string
+  }
 }
 
 export interface TemplateCodegenOptions {

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

@@ -3,6 +3,7 @@ import { uniMainJsPlugin } from './plugins/mainJs'
 import { uniManifestJsonPlugin } from './plugins/manifestJson'
 import { uniPagesJsonPlugin } from './plugins/pagesJson'
 import { uniVirtualPlugin } from './plugins/virtual'
+export { UniMiniProgramPluginOptions } from './plugin'
 export default (options: UniMiniProgramPluginOptions) => {
   return [
     uniMainJsPlugin(options),

packages/uni-mp-vite/src/plugin/build.ts

+import fs from 'fs'
 import path from 'path'
 import { UserConfig } from 'vite'
 
 import {
+  emptyDir,
   isCSSRequest,
   normalizePath,
   resolveMainPathOnce,
@@ -16,8 +18,14 @@ import {
 
 export function buildOptions(): UserConfig['build'] {
   const inputDir = process.env.UNI_INPUT_DIR
+  const outputDir = process.env.UNI_OUTPUT_DIR
+  // 开始编译时，清空输出目录
+  if (fs.existsSync(outputDir)) {
+    emptyDir(outputDir)
+  }
   return {
     // sourcemap: 'inline', // TODO
+    emptyOutDir: false, // 不清空输出目录，否则会影响自定义的一些文件输出，比如wxml
     assetsInlineLimit: 0, // TODO
     lib: {
       entry: resolveMainPathOnce(inputDir),

packages/uni-mp-vite/src/plugin/configResolved.ts

@@ -6,12 +6,18 @@ import {
   injectCssPlugin,
   injectCssPostPlugin,
 } from '@dcloudio/uni-cli-shared'
+import { UniMiniProgramPluginOptions } from '.'
 
-export const configResolved: Plugin['configResolved'] = (config) => {
-  removePlugins('vite:import-analysis', config)
-  injectCssPlugin(config)
-  injectCssPostPlugin(config, {
-    appCss: '',
-  })
-  injectAssetPlugin(config)
+export function createConfigResolved({
+  style: { extname },
+}: UniMiniProgramPluginOptions): Plugin['configResolved'] {
+  return (config) => {
+    removePlugins('vite:import-analysis', config)
+    injectCssPlugin(config)
+    injectCssPostPlugin(config, {
+      extname,
+      appCss: '',
+    })
+    injectAssetPlugin(config)
+  }
 }

packages/uni-mp-vite/src/plugin/index.ts

+import path from 'path'
+import debug from 'debug'
+import fs from 'fs-extra'
 import { AliasOptions } from 'vite'
-import { resolveBuiltIn, UniVitePlugin } from '@dcloudio/uni-cli-shared'
+import {
+  EXTNAME_VUE_RE,
+  normalizeNodeModules,
+  resolveBuiltIn,
+  UniVitePlugin,
+} from '@dcloudio/uni-cli-shared'
 
 import { uniOptions } from './uni'
 import { buildOptions } from './build'
-import { configResolved } from './configResolved'
+import { createConfigResolved } from './configResolved'
+import { EmittedFile } from 'rollup'
 
+const debugMp = debug('vite:uni:mp')
 export interface UniMiniProgramPluginOptions {
+  vite: {
+    alias: AliasOptions
+  }
   global: string
-  alias?: AliasOptions
+  app: {
+    darkmode: boolean
+    subpackages: boolean
+  }
+  project: {
+    filename: string
+  }
+  template: {
+    extname: string
+  }
+  style: {
+    extname: string
+    cssVars: {
+      '--status-bar-height': string
+      '--window-top': string
+      '--window-bottom': string
+      '--window-left': string
+      '--window-right': string
+    }
+  }
+  filter?: {
+    extname: string
+    tag: string
+  }
 }
 
-export function uniMiniProgramPlugin({
-  alias,
-}: UniMiniProgramPluginOptions): UniVitePlugin {
+export function uniMiniProgramPlugin(
+  options: UniMiniProgramPluginOptions
+): UniVitePlugin {
+  const {
+    vite: { alias },
+    template,
+  } = options
+  const emitFile: (emittedFile: EmittedFile) => string = (emittedFile) => {
+    if (emittedFile.type === 'asset') {
+      const filename = emittedFile.fileName!
+      const outputFilename = normalizeNodeModules(
+        path.resolve(
+          process.env.UNI_OUTPUT_DIR,
+          path.relative(process.env.UNI_INPUT_DIR, filename)
+        )
+      ).replace(EXTNAME_VUE_RE, template.extname)
+      debugMp(outputFilename)
+      fs.outputFileSync(outputFilename, emittedFile.source!)
+      return outputFilename
+    }
+    return ''
+  }
   return {
     name: 'vite:uni-mp',
-    uni: uniOptions(),
+    uni: uniOptions({ emitFile }),
     config() {
       return {
         resolve: {
@@ -27,6 +82,6 @@ export function uniMiniProgramPlugin({
         build: buildOptions(),
       }
     },
-    configResolved,
+    configResolved: createConfigResolved(options),
   }
 }

packages/uni-mp-vite/src/plugin/uni/index.ts

@@ -2,15 +2,19 @@ import {
   isServiceNativeTag,
   isServiceCustomElement,
 } from '@dcloudio/uni-shared'
+import { EmittedFile } from 'rollup'
 import { UniVitePlugin } from '@dcloudio/uni-cli-shared'
 import { TemplateCompiler } from '@vue/compiler-sfc'
 
 import * as compiler from '@dcloudio/uni-mp-compiler'
 
-export function uniOptions(): UniVitePlugin['uni'] {
+export function uniOptions(miniProgram: {
+  emitFile?: (emittedFile: EmittedFile) => string
+}): UniVitePlugin['uni'] {
   return {
     compiler: compiler as TemplateCompiler,
     compilerOptions: {
+      miniProgram,
       isNativeTag: isServiceNativeTag,
       isCustomElement: isServiceCustomElement,
     },

packages/uni-mp-weixin/dist/uni.compiler.js

@@ -17,14 +17,38 @@ const uniMiniProgramWeixinPlugin = {
         };
     },
 };
-var index = [
-    uniMiniProgramWeixinPlugin,
-    ...initMiniProgramPlugin__default["default"]({
-        global: 'wx',
+const options = {
+    vite: {
         alias: {
             'uni-mp-runtime': uniCliShared.resolveBuiltIn('@dcloudio/uni-mp-weixin/dist/uni.mp.esm.js'),
         },
-    }),
-];
+    },
+    global: 'wx',
+    app: {
+        darkmode: true,
+        subpackages: true,
+    },
+    project: {
+        filename: 'project.config.json',
+    },
+    template: {
+        extname: '.wxml',
+    },
+    style: {
+        extname: '.wxss',
+        cssVars: {
+            '--status-bar-height': '25px',
+            '--window-top': '0px',
+            '--window-bottom': '0px',
+            '--window-left': '0px',
+            '--window-right': '0px',
+        },
+    },
+    filter: {
+        extname: '.wxs',
+        tag: 'wxs',
+    },
+};
+var index = [uniMiniProgramWeixinPlugin, ...initMiniProgramPlugin__default["default"](options)];
 
 module.exports = index;

packages/uni-mp-weixin/src/plugin/index.ts

 import { Plugin } from 'vite'
 import { resolveBuiltIn } from '@dcloudio/uni-cli-shared'
-import initMiniProgramPlugin from '@dcloudio/uni-mp-vite'
+import initMiniProgramPlugin, {
+  UniMiniProgramPluginOptions,
+} from '@dcloudio/uni-mp-vite'
 
 const uniMiniProgramWeixinPlugin: Plugin = {
   name: 'vite:uni-mp-weixin',
@@ -13,14 +15,39 @@ const uniMiniProgramWeixinPlugin: Plugin = {
   },
 }
 
-export default [
-  uniMiniProgramWeixinPlugin,
-  ...initMiniProgramPlugin({
-    global: 'wx',
+const options: UniMiniProgramPluginOptions = {
+  vite: {
     alias: {
       'uni-mp-runtime': resolveBuiltIn(
         '@dcloudio/uni-mp-weixin/dist/uni.mp.esm.js'
       ),
     },
-  }),
-]
+  },
+  global: 'wx',
+  app: {
+    darkmode: true,
+    subpackages: true,
+  },
+  project: {
+    filename: 'project.config.json',
+  },
+  template: {
+    extname: '.wxml',
+  },
+  style: {
+    extname: '.wxss',
+    cssVars: {
+      '--status-bar-height': '25px',
+      '--window-top': '0px',
+      '--window-bottom': '0px',
+      '--window-left': '0px',
+      '--window-right': '0px',
+    },
+  },
+  filter: {
+    extname: '.wxs',
+    tag: 'wxs',
+  },
+}
+
+export default [uniMiniProgramWeixinPlugin, ...initMiniProgramPlugin(options)]

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

@@ -39,16 +39,7 @@ export function initPluginUniOptions(UniVitePlugins: UniVitePlugin[]) {
       compiler = pluginTemplateCompiler
     }
     if (pluginCompilerOptions) {
-      if (pluginCompilerOptions.isNativeTag) {
-        compilerOptions.isNativeTag = pluginCompilerOptions.isNativeTag
-      }
-      if (pluginCompilerOptions.isCustomElement) {
-        compilerOptions.isCustomElement = pluginCompilerOptions.isCustomElement
-      }
-      if (pluginCompilerOptions.directiveTransforms) {
-        compilerOptions.directiveTransforms =
-          pluginCompilerOptions.directiveTransforms
-      }
+      extend(compilerOptions, pluginCompilerOptions)
     }
     if (pluginTransformEvent) {
       extend(transformEvent, pluginTransformEvent)

packages/vite-plugin-uni/src/vue/options.ts

@@ -72,6 +72,7 @@ export function initPluginVueOptions(
   const {
     compiler,
     compilerOptions: {
+      miniProgram,
       isNativeTag,
       isCustomElement,
       nodeTransforms,
@@ -81,6 +82,9 @@ export function initPluginVueOptions(
   if (compiler) {
     templateOptions.compiler = compiler
   }
+  if (miniProgram) {
+    ;(compilerOptions as any).miniProgram = miniProgram
+  }
   compilerOptions.isNativeTag = isNativeTag
   compilerOptions.isCustomElement = isCustomElement
   if (directiveTransforms) {