wip: shadow

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

@@ -243,7 +243,7 @@ export function normalizeEmitAssetFileName(fileName: string) {
   return fileName
 }
 
-export function createIdent() {
+function createIdent() {
   if (process.env.UNI_INPUT_DIR) {
     const manifestJson = parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
     const id = (manifestJson.appid || '').replace('__UNI__', '')
@@ -253,3 +253,11 @@ export function createIdent() {
   }
   return ''
 }
+
+export function createShadowImageUrl(cdn: number, type: string = 'grey') {
+  const ident = createIdent()
+  const identStr = ident ? `${ident}/` : ''
+  return `https://cdn${
+    (cdn || 0) + (process.env.UNI_APP_X === 'true' ? 1000 : 0) || ''
+  }.dcloud.net.cn/${identStr}img/shadow-${type}.png`
+}

packages/uni-h5-vite/src/plugins/css.ts

@@ -3,8 +3,10 @@ import path from 'path'
 import { type Plugin, type ResolvedConfig, normalizePath } from 'vite'
 
 import {
+  H5_FRAMEWORK_STYLE_PATH,
   buildInCssSet,
   createEncryptCssUrlReplacer,
+  createShadowImageUrl,
   cssPostPlugin,
   getAssetHash,
   injectAssetPlugin,
@@ -62,6 +64,26 @@ export function uniCssPlugin(): Plugin {
         injectAssetPlugin(config)
       }
     },
+    transform(code, id) {
+      if (normalizePath(id).endsWith(H5_FRAMEWORK_STYLE_PATH + 'shadow.css')) {
+        const url = createShadowImageUrl(0, 'grey')
+        return {
+          code:
+            code +
+            `
+@keyframes shadow-preload {
+  0% {
+    background-image: url(${url});
+  }
+  100% {
+    background-image: url(${url});
+  }
+}
+`,
+          map: { mappings: '' },
+        }
+      }
+    },
     async generateBundle() {
       if (!isCombineBuiltInCss(resolvedConfig) || !buildInCssSet.size) {
         return

packages/uni-h5/style/framework/shadow.css

@@ -6,12 +6,3 @@ body::after {
   animation: shadow-preload 0.1s;
   animation-delay: 3s;
 }
-
-@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);
-  }
-}

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

@@ -4,7 +4,7 @@ import type { Plugin, ResolvedConfig } from 'vite'
 import type { EmittedAsset } from 'rollup'
 import {
   createEncryptCssUrlReplacer,
-  createIdent,
+  createShadowImageUrl,
   cssPostPlugin,
   injectAssetPlugin,
   injectCssPlugin,
@@ -28,10 +28,9 @@ import {
 const debugNVueCss = debug('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 genShadowCss = (cdn: string) => {
-  const ident = createIdent()
-  const identStr = ident ? `${ident}/` : ''
-  return `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(${cdn}/${identStr}img/shadow-grey.png)}100%{background-image:url(${cdn}/${identStr}img/shadow-grey.png)}}@keyframes shadow-preload{0%{background-image:url(${cdn}/${identStr}img/shadow-grey.png)}100%{background-image:url(${cdn}/${identStr}img/shadow-grey.png)}}`
+const genShadowCss = (cdn: number) => {
+  const url = createShadowImageUrl(cdn, 'grey')
+  return `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(${url})}100%{background-image:url(${url})}}@keyframes shadow-preload{0%{background-image:url(${url})}100%{background-image:url(${url})}}`
 }
 
 const genComponentCustomHiddenCss = (name: string) =>
@@ -103,12 +102,7 @@ export function createConfigResolved({
             if (config.isProduction) {
               return (
                 cssCode +
-                genShadowCss(
-                  `https://cdn${
-                    (cdn || 0) +
-                      (process.env.UNI_APP_X === 'true' ? 1000 : 0) || ''
-                  }.dcloud.net.cn`
-                ) +
+                genShadowCss(cdn || 0) +
                 cssVars +
                 componentCustomHiddenCss
               )