From a7702be4aa908ca2764449b0d81711e68339328d Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Tue, 25 Jun 2024 14:08:31 +0800 Subject: [PATCH] wip: shadow --- packages/uni-cli-shared/src/utils.ts | 10 ++++++++- packages/uni-h5-vite/src/plugins/css.ts | 22 +++++++++++++++++++ packages/uni-h5/style/framework/shadow.css | 9 -------- .../uni-mp-vite/src/plugin/configResolved.ts | 16 +++++--------- 4 files changed, 36 insertions(+), 21 deletions(-) diff --git a/packages/uni-cli-shared/src/utils.ts b/packages/uni-cli-shared/src/utils.ts index 26e3fc4ee1..dfc7b333ff 100644 --- a/packages/uni-cli-shared/src/utils.ts +++ b/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` +} diff --git a/packages/uni-h5-vite/src/plugins/css.ts b/packages/uni-h5-vite/src/plugins/css.ts index 3585126822..9a89d99f20 100644 --- a/packages/uni-h5-vite/src/plugins/css.ts +++ b/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 diff --git a/packages/uni-h5/style/framework/shadow.css b/packages/uni-h5/style/framework/shadow.css index a293ddc6a6..f4938f6dfe 100644 --- a/packages/uni-h5/style/framework/shadow.css +++ b/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); - } -} diff --git a/packages/uni-mp-vite/src/plugin/configResolved.ts b/packages/uni-mp-vite/src/plugin/configResolved.ts index 5494c73363..cab9914e7b 100644 --- a/packages/uni-mp-vite/src/plugin/configResolved.ts +++ b/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 ) -- GitLab