wip(mp): css vars

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

@@ -21,7 +21,7 @@ import {
 } from '../plugins/entry'
 
 const debugNVueCss = debug('vite:uni:nvue-css')
-
+const cssVars = `page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}`
 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({
@@ -52,9 +52,14 @@ export function createConfigResolved({
       },
       chunkCssCode(filename, cssCode) {
         cssCode = transformScopedCss(cssCode)
-        if (config.isProduction && filename === 'app' + extname) {
-          return cssCode + shadowCss
+        if (filename === 'app' + extname) {
+          if (config.isProduction) {
+            return cssCode + shadowCss + cssVars
+          } else {
+            return cssCode + cssVars
+          }
         }
+
         const nvueCssPaths = getNVueCssPaths(config)
         if (!nvueCssPaths || !nvueCssPaths.length) {
           return cssCode

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

@@ -7,12 +7,14 @@ import {
   parseManifestJsonOnce,
   findMiniProgramTemplateFiles,
 } from '@dcloudio/uni-cli-shared'
+import { CompilerOptions } from '@vue/compiler-core'
 
 import { uniOptions } from './uni'
 import { buildOptions } from './build'
 import { createConfigResolved } from './configResolved'
 import { emitFile, getFilterFiles, getTemplateFiles } from './template'
-import { CompilerOptions } from '@vue/compiler-core'
+
+import { getNVueCssPaths } from '../plugins/pagesJson'
 
 export interface UniMiniProgramPluginOptions {
   vite: {
@@ -47,13 +49,6 @@ export interface UniMiniProgramPluginOptions {
   }
   style: {
     extname: string
-    cssVars: {
-      '--status-bar-height': string
-      '--window-top': string
-      '--window-bottom': string
-      '--window-left': string
-      '--window-right': string
-    }
   }
 }
 
@@ -66,7 +61,8 @@ export function uniMiniProgramPlugin(
     style,
   } = options
 
-  let isFirst = true
+  let nvueCssEmitted = false
+
   let resolvedConfig: ResolvedConfig
   return {
     name: 'vite:uni-mp',
@@ -117,16 +113,18 @@ export function uniMiniProgramPlugin(
           source: templateFiles[filename],
         })
       })
-      if (isFirst) {
-        // 仅生成一次
-        isFirst = false
-        this.emitFile({
-          type: 'asset',
-          fileName: 'nvue' + style.extname,
-          source: genNVueCssCode(
-            parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
-          ),
-        })
+      if (!nvueCssEmitted) {
+        const nvueCssPaths = getNVueCssPaths(resolvedConfig)
+        if (nvueCssPaths && nvueCssPaths.length) {
+          nvueCssEmitted = true
+          this.emitFile({
+            type: 'asset',
+            fileName: 'nvue' + style.extname,
+            source: genNVueCssCode(
+              parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
+            ),
+          })
+        }
       }
     },
   }

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

@@ -130,13 +130,6 @@ ${filter.code}
     },
     style: {
         extname: '.wxss',
-        cssVars: {
-            '--status-bar-height': '25px',
-            '--window-top': '0px',
-            '--window-bottom': '0px',
-            '--window-left': '0px',
-            '--window-right': '0px',
-        },
     },
 };
 var index = [uniMiniProgramWeixinPlugin, ...initMiniProgramPlugin__default["default"](options)];

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

@@ -84,13 +84,6 @@ ${filter.code}
   },
   style: {
     extname: '.wxss',
-    cssVars: {
-      '--status-bar-height': '25px',
-      '--window-top': '0px',
-      '--window-bottom': '0px',
-      '--window-left': '0px',
-      '--window-right': '0px',
-    },
   },
 }