wip(mp): nvue css

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

@@ -8,15 +8,25 @@ import {
   injectCssPostPlugin,
 } from '@dcloudio/uni-cli-shared'
 
+let appCss = ''
+
 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'
-    ),
+    chunkCss(filename, cssCode) {
+      if (filename === 'app.css') {
+        if (!appCss) {
+          appCss = fs.readFileSync(
+            require.resolve('@dcloudio/uni-app-plus/dist/style.css'),
+            'utf8'
+          )
+        }
+        return appCss + '\n' + cssCode
+      }
+      return cssCode
+    },
   })
   injectAssetPlugin(config)
 }

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

@@ -10,7 +10,6 @@ import {
 } from '@dcloudio/uni-cli-shared'
 
 export function uniManifestJsonPlugin(): Plugin {
-  let manifestJson: Record<string, any>
   return defineUniManifestJsonPlugin((opts) => {
     return {
       name: 'vite:uni-app-manifest-json',
@@ -27,19 +26,13 @@ export function uniManifestJsonPlugin(): Plugin {
         ).forEach((filepath) => {
           this.addWatchFile(filepath)
         })
-        manifestJson = normalizeAppManifestJson(
+        const manifestJson = normalizeAppManifestJson(
           parseJson(code),
           parsePagesJsonOnce(
             process.env.UNI_INPUT_DIR,
             process.env.UNI_PLATFORM
           )
         )
-        return {
-          code: '',
-          map: this.getCombinedSourcemap(),
-        }
-      },
-      generateBundle() {
         // 生成一个空的app-config.js，兼容基座已有规范
         this.emitFile({
           fileName: `app-config.js`,
@@ -51,6 +44,10 @@ export function uniManifestJsonPlugin(): Plugin {
           type: 'asset',
           source: JSON.stringify(manifestJson, null, 2),
         })
+        return {
+          code: '',
+          map: this.getCombinedSourcemap(),
+        }
       },
     }
   })

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

@@ -11,7 +11,6 @@ import {
 } from '@dcloudio/uni-cli-shared'
 
 export function uniPagesJsonPlugin(): Plugin {
-  let pagesJson: UniApp.PagesJson
   return defineUniPagesJsonPlugin((opts) => {
     return {
       name: 'vite:uni-app-pages-json',
@@ -26,20 +25,13 @@ export function uniPagesJsonPlugin(): Plugin {
         ).forEach((filepath) => {
           this.addWatchFile(filepath)
         })
-        pagesJson = normalizePagesJson(code, process.env.UNI_PLATFORM)
+        const pagesJson = normalizePagesJson(code, process.env.UNI_PLATFORM)
         // TODO subpackages
         pagesJson.pages.forEach((page) => {
           this.addWatchFile(
             path.resolve(process.env.UNI_INPUT_DIR, page.path + '.vue')
           )
         })
-        return {
-          code:
-            `import './manifest.json.js'\n` + normalizeAppPagesJson(pagesJson),
-          map: this.getCombinedSourcemap(),
-        }
-      },
-      generateBundle() {
         this.emitFile({
           fileName: `app-config-service.js`,
           type: 'asset',
@@ -48,6 +40,11 @@ export function uniPagesJsonPlugin(): Plugin {
             parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
           ),
         })
+        return {
+          code:
+            `import './manifest.json.js'\n` + normalizeAppPagesJson(pagesJson),
+          map: this.getCombinedSourcemap(),
+        }
       },
     }
   })

packages/uni-cli-nvue/src/webpack/config/module/rules/cssLoader/oneOf.ts

@@ -13,6 +13,7 @@ const postcssLoader = {
   options: {
     sourceMap: false,
     postcssOptions: {
+      config: false,
       parser: require('postcss-comment'),
       plugins: [
         require('postcss-import')({

packages/uni-cli-shared/lib/nvue.css

+view,
+label,
+swiper-item,
+scroll-view {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+view,
+image,
+input,
+scroll-view,
+swiper,
+swiper-item,
+text,
+textarea,
+video {
+  position: relative;
+  border: 0px solid #000000;
+  box-sizing: border-box;
+}
+swiper-item {
+  position: absolute;
+}
+button {
+  margin: 0;
+}

packages/uni-cli-shared/src/json/mp/pages.ts

+import fs from 'fs'
 import path from 'path'
 import { hasOwn } from '@vue/shared'
 import { parseJson } from '../json'
@@ -41,6 +42,7 @@ function parsePagesJson(
     pages: [],
   }
   const pageJsons: Record<string, PageWindowOptions> = {}
+  const nvuePages: string[] = []
   // preprocess
   const pagesJson = parseJson(jsonStr, true) as UniApp.PagesJson
   if (!pagesJson) {
@@ -48,6 +50,11 @@ function parsePagesJson(
   }
 
   function addPageJson(pagePath: string, style: UniApp.PagesJsonPageStyle) {
+    if (
+      fs.existsSync(path.join(process.env.UNI_INPUT_DIR, pagePath + '.nvue'))
+    ) {
+      nvuePages.push(pagePath)
+    }
     pageJsons[pagePath] = parseWindowOptions(style, platform, windowOptionsMap)
   }
   // pages
@@ -116,5 +123,6 @@ function parsePagesJson(
   return {
     appJson,
     pageJsons,
+    nvuePages,
   }
 }

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

+export * from './nvue'
 export * from './event'
 export { transformVueComponentImports } from './transformImports'

packages/uni-cli-shared/src/mp/nvue.ts

+import fs from 'fs'
+import path from 'path'
+import { getNVueFlexDirection } from '../json/app/manifest/nvue'
+export function genNVueCssCode(manifestJson: Record<string, any>) {
+  let nvueCssCode = fs.readFileSync(
+    path.resolve(__dirname, '../../lib/nvue.css'),
+    'utf8'
+  )
+  const flexDirection = getNVueFlexDirection(manifestJson)
+  if (flexDirection !== 'column') {
+    nvueCssCode = nvueCssCode.replace('column', flexDirection)
+  }
+  return nvueCssCode
+}

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

@@ -228,7 +228,13 @@ function findCssModuleIds(
  */
 export function cssPostPlugin(
   config: ResolvedConfig,
-  { appCss, extname }: { appCss?: string; extname: string }
+  {
+    chunkCss,
+    extname,
+  }: {
+    chunkCss: (filename: string, cssCode: string) => string
+    extname: string
+  }
 ): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
   const styles: Map<string, string> = new Map<string, string>()
@@ -303,9 +309,9 @@ export function cssPostPlugin(
           .join('\n')
       }
       for (const filename of cssChunks.keys()) {
+        const cssCode = genCssCode(filename)
         let source = await processChunkCSS(
-          (filename === 'app.css' ? (appCss || '') + '\n' : '') +
-            genCssCode(filename),
+          chunkCss ? chunkCss(filename, cssCode) : cssCode,
           { dirname: path.dirname(filename), inlined: false, minify: true }
         )
         this.emitFile({

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

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

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

+import debug from 'debug'
 import { Plugin } from 'vite'
-
 import {
   removePlugins,
   injectAssetPlugin,
   injectCssPlugin,
   injectCssPostPlugin,
+  normalizePath,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '.'
+import { getNVueCssPaths } from '../plugins/pagesJson'
+
+const debugNVueCss = debug('vite:uni:nvue-css')
+
+const shadowCss = `page::after{position:fixed;content:'';left:-1000px;top:-1000px;-webkit-animation:shadow-preload .1s;-webkit-animation-delay:3s;animation:shadow-preload .1s;animation-delay:3s}@-webkit-keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}@keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}`
 
 export function createConfigResolved({
   style: { extname },
@@ -16,7 +22,21 @@ export function createConfigResolved({
     injectCssPlugin(config)
     injectCssPostPlugin(config, {
       extname,
-      appCss: '',
+      chunkCss(filename, cssCode) {
+        if (config.isProduction && filename === 'app' + extname) {
+          return cssCode + shadowCss
+        }
+        const nvueCssPaths = getNVueCssPaths(config)
+        if (!nvueCssPaths || !nvueCssPaths.length) {
+          return cssCode
+        }
+        const normalized = normalizePath(filename)
+        if (nvueCssPaths.find((pageCssPath) => pageCssPath === normalized)) {
+          debugNVueCss(normalized)
+          return `@import "/nvue.wxss";\n` + cssCode
+        }
+        return cssCode
+      },
     })
     injectAssetPlugin(config)
   }

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

@@ -8,6 +8,8 @@ import {
   normalizeNodeModules,
   resolveBuiltIn,
   UniVitePlugin,
+  genNVueCssCode,
+  parseManifestJsonOnce,
 } from '@dcloudio/uni-cli-shared'
 
 import { uniOptions } from './uni'
@@ -59,6 +61,7 @@ export function uniMiniProgramPlugin(
   const {
     vite: { alias, copyOptions },
     template,
+    style,
   } = options
   const emitFile: (emittedFile: EmittedFile) => string = (emittedFile) => {
     if (emittedFile.type === 'asset') {
@@ -70,11 +73,12 @@ export function uniMiniProgramPlugin(
         )
       ).replace(EXTNAME_VUE_RE, template.extname)
       debugMp(outputFilename)
-      fs.outputFileSync(outputFilename, emittedFile.source!)
+      fs.outputFile(outputFilename, emittedFile.source!)
       return outputFilename
     }
     return ''
   }
+  let isFirst = true
   return {
     name: 'vite:uni-mp',
     uni: uniOptions({
@@ -93,5 +97,18 @@ export function uniMiniProgramPlugin(
       }
     },
     configResolved: createConfigResolved(options),
+    generateBundle() {
+      if (isFirst) {
+        // 仅生成一次
+        isFirst = false
+        this.emitFile({
+          type: 'asset',
+          fileName: 'nvue' + style.extname,
+          source: genNVueCssCode(
+            parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
+          ),
+        })
+      }
+    },
   }
 }

packages/uni-mp-vite/src/plugins/pagesJson.ts

 import fs from 'fs'
 import path from 'path'
 import debug from 'debug'
-import { Plugin } from 'vite'
-
+import { Plugin, ResolvedConfig } from 'vite'
 import {
   AppJson,
   defineUniPagesJsonPlugin,
@@ -19,13 +18,22 @@ import { UniMiniProgramPluginOptions } from '../plugin'
 
 const debugPagesJson = debug('vite:uni:pages-json')
 
+const nvueCssPathsCache = new Map<ResolvedConfig, string[]>()
+export function getNVueCssPaths(config: ResolvedConfig) {
+  return nvueCssPathsCache.get(config)
+}
+
 export function uniPagesJsonPlugin(
   options: UniMiniProgramPluginOptions
 ): Plugin {
+  let resolvedConfig: ResolvedConfig
   return defineUniPagesJsonPlugin((opts) => {
     return {
       name: 'vite:uni-mp-pages-json',
       enforce: 'pre',
+      configResolved(config) {
+        resolvedConfig = config
+      },
       transform(code, id) {
         if (!opts.filter(id)) {
           return
@@ -36,7 +44,7 @@ export function uniPagesJsonPlugin(
           this.addWatchFile(filepath)
         })
         const manifestJson = parseManifestJsonOnce(inputDir)
-        const { appJson, pageJsons } = parseMiniProgramPagesJson(
+        const { appJson, pageJsons, nvuePages } = parseMiniProgramPagesJson(
           code,
           process.env.UNI_PLATFORM,
           {
@@ -48,6 +56,11 @@ export function uniPagesJsonPlugin(
             subpackages: options.app.subpackages,
           }
         )
+        nvueCssPathsCache.set(
+          resolvedConfig,
+          nvuePages.map((pagePath) => pagePath + options.style.extname)
+        )
+
         addMiniProgramAppJson(appJson)
         Object.keys(pageJsons).forEach((name) => {
           addMiniProgramPageJson(name, pageJsons[name])