wip(app): nvue styler

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

@@ -15,10 +15,34 @@ function addScoped(code: string) {
   return code.replace(/(<style\b[^><]*)>/gi, '$1 scoped>')
 }
 
+function removeScoped(code: string) {
+  if (!SCOPED_RE.test(code)) {
+    return code
+  }
+  return code.replace(/(<style.*)scoped(.*>)/gi, '$1$2')
+}
+
 interface UniCssScopedPluginOptions {
   filter: (id: string) => boolean
 }
 
+export function uniRemoveCssScopedPlugin(
+  { filter }: UniCssScopedPluginOptions = { filter: () => false }
+): Plugin {
+  return {
+    name: 'uni:css-remove-scoped',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!filter(id)) return null
+      debugScoped(id)
+      return {
+        code: removeScoped(code),
+        map: null,
+      }
+    },
+  }
+}
+
 export function uniCssScopedPlugin(
   { filter }: UniCssScopedPluginOptions = { filter: () => false }
 ): Plugin {

packages/vite-plugin-uni/src/configResolved/plugins/pre.ts

@@ -9,6 +9,8 @@ import {
   EXTNAME_VUE,
   parseVueRequest,
   withSourcemap,
+  preNVueJs,
+  preNVueHtml,
 } from '@dcloudio/uni-cli-shared'
 import { UniPluginFilterOptions } from '.'
 
@@ -18,12 +20,15 @@ const debugPreJsTry = debug('uni:pre-js-try')
 
 const PRE_JS_EXTNAME = ['.json', '.css'].concat(EXTNAME_VUE).concat(EXTNAME_JS)
 const PRE_HTML_EXTNAME = EXTNAME_VUE
+
 export function uniPrePlugin(
   config: ResolvedConfig,
   options: UniPluginFilterOptions
 ): Plugin {
   const filter = createFilter(options.include, options.exclude)
-
+  const isNVue = (config as any).nvue
+  const preJsFile = isNVue ? preNVueJs : preJs
+  const preHtmlFile = isNVue ? preNVueHtml : preHtml
   return {
     name: 'uni:pre',
     transform(code, id) {
@@ -44,11 +49,11 @@ export function uniPrePlugin(
         return
       }
       if (isHtml) {
-        code = preHtml(code)
+        code = preHtmlFile(code)
         debugPreHtml(id)
       }
       if (isJs) {
-        code = preJs(code)
+        code = preJsFile(code)
         debugPreJs(id)
       }
       return {

packages/vite-plugin-uni/src/configResolved/plugins/preCss.ts

 import debug from 'debug'
 import { Plugin, ResolvedConfig } from 'vite'
 import { createFilter } from '@rollup/pluginutils'
-import { preJs, withSourcemap } from '@dcloudio/uni-cli-shared'
+import { preJs, preNVueJs, withSourcemap } from '@dcloudio/uni-cli-shared'
 
 import { UniPluginFilterOptions } from '.'
 
@@ -18,6 +18,8 @@ export function uniPreCssPlugin(
   options: UniPluginFilterOptions
 ): Plugin {
   const filter = createFilter(options.include, options.exclude)
+  const isNVue = (config as any).nvue
+  const preJsFile = isNVue ? preNVueJs : preJs
   return {
     name: 'uni:pre-css',
     transform(code, id) {
@@ -33,7 +35,7 @@ export function uniPreCssPlugin(
       }
       debugPre(id)
       return {
-        code: preJs(code),
+        code: preJsFile(code),
         map: withSourcemap(config) ? this.getCombinedSourcemap() : null,
       }
     },

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

@@ -4,7 +4,6 @@ import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
 import type { Options as VueOptions } from '@vitejs/plugin-vue'
 import type { Options as ViteLegacyOptions } from '@vitejs/plugin-legacy'
 import type { VueJSXPluginOptions } from '@vue/babel-plugin-jsx'
-import vuePlugin from '@vitejs/plugin-vue'
 import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
 import legacyPlugin from '@vitejs/plugin-legacy'
 
@@ -23,6 +22,7 @@ import {
   rewriteCompilerSfcParse,
 } from './utils'
 import {
+  createPluginVueInstance,
   initPluginViteLegacyOptions,
   initPluginVueJsxOptions,
   initPluginVueOptions,
@@ -131,7 +131,9 @@ export default function uniPlugin(
   }
 
   plugins.unshift(
-    vuePlugin(initPluginVueOptions(options, uniPlugins, uniPluginOptions))
+    createPluginVueInstance(
+      initPluginVueOptions(options, uniPlugins, uniPluginOptions)
+    )
   )
 
   // 仅在 vue 或 纯原生 App.vue 编译时做 copy

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

 export * from './filter'
 export * from './plugin'
 export * from './polyfill'
+export * from './nvue'

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

+import { resolveBuiltIn } from '@dcloudio/uni-cli-shared'
+import { SFCParseOptions, SFCParseResult } from '@vue/compiler-sfc'
+import { extend } from '@vue/shared'
+
+/**
+ * nvue 需要移除 scoped
+ * @param nvuePages
+ */
+export function createNVueCompiler() {
+  const compileSfc = require(resolveBuiltIn('@vue/compiler-sfc'))
+  const { parse } = compileSfc
+
+  return extend({}, compileSfc, {
+    parse(source: string, options: SFCParseOptions = {}) {
+      const result = parse(source, options) as SFCParseResult
+      result.descriptor.styles.forEach((style) => {
+        if (style.scoped) {
+          delete style.scoped
+        }
+      })
+      return result
+    },
+  })
+}

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

 import { hasOwn, isArray, isPlainObject } from '@vue/shared'
 import type { TemplateCompiler } from '@vue/compiler-sfc'
+import type { Options as VueOptions } from '@vitejs/plugin-vue'
 import {
   EXTNAME_VUE_RE,
   UniVitePlugin,
@@ -7,9 +8,24 @@ import {
   createUniVueTransformAssetUrls,
   getBaseNodeTransforms,
   isExternalUrl,
+  normalizePath,
 } from '@dcloudio/uni-cli-shared'
 
 import { VitePluginUniResolvedOptions } from '..'
+import { createNVueCompiler } from '../utils'
+
+const pluginVuePath = require.resolve('@vitejs/plugin-vue')
+const normalizedPluginVuePath = normalizePath(pluginVuePath)
+/**
+ * 每次创建新的 plugin-vue 实例。因为该插件内部会 cache  descriptor，而相同的vue文件在编译到vue页面和nvue页面时，不能共享缓存（条件编译，css scoped等均不同）
+ * @returns
+ */
+export function createPluginVueInstance(options: VueOptions) {
+  delete require.cache[pluginVuePath]
+  delete require.cache[normalizedPluginVuePath]
+  const vuePlugin = require('@vitejs/plugin-vue')
+  return vuePlugin(options)
+}
 
 export function initPluginVueOptions(
   options: VitePluginUniResolvedOptions,
@@ -131,6 +147,10 @@ export function initPluginVueOptions(
   // app-nvue 需要启用 customElement 机制来内联 styles
   if (process.env.UNI_COMPILER === 'nvue') {
     vueOptions.customElement = true
+    if (process.env.UNI_RENDERER_NATIVE !== 'appService') {
+      // nvue 需要使用自己的 compiler，来移除 scoped
+      vueOptions.compiler = createNVueCompiler()
+    }
   }
   return vueOptions
 }