From 58ddc00854032934b95b0c7b63ba62574057988e Mon Sep 17 00:00:00 2001 From: fxy060608 Date: Mon, 24 May 2021 17:33:54 +0800 Subject: [PATCH] feat: add css plugin --- packages/uni-h5/dist/uni-h5.es.js | 34 ++++++------ .../src/configResolved/plugins/css.ts | 44 ++++++++++++++++ .../src/configResolved/plugins/easycom.ts | 52 +++++++++++++------ .../src/configResolved/plugins/index.ts | 36 ++++++++++--- 4 files changed, 127 insertions(+), 39 deletions(-) create mode 100644 packages/vite-plugin-uni/src/configResolved/plugins/css.ts diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js index 0e22efdf4..7fef435ac 100644 --- a/packages/uni-h5/dist/uni-h5.es.js +++ b/packages/uni-h5/dist/uni-h5.es.js @@ -485,7 +485,7 @@ var safeAreaInsets = { onChange, offChange }; -var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets; +var out = safeAreaInsets; const onEventPrevent = /* @__PURE__ */ withModifiers(() => { }, ["prevent"]); const onEventStop = /* @__PURE__ */ withModifiers(() => { @@ -497,10 +497,10 @@ function getWindowOffset() { const left = parseInt(style.getPropertyValue("--window-left")); const right = parseInt(style.getPropertyValue("--window-right")); return { - top: top ? top + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top : 0, - bottom: bottom ? bottom + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom : 0, - left: left ? left + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left : 0, - right: right ? right + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right : 0 + top: top ? top + out.top : 0, + bottom: bottom ? bottom + out.bottom : 0, + left: left ? left + out.left : 0, + right: right ? right + out.right : 0 }; } function updateCssVar(cssVars) { @@ -1194,7 +1194,7 @@ function normalizePageMeta(pageMeta) { let offset = rpx2px(refreshOptions.offset); const {type} = navigationBar; if (type !== "transparent" && type !== "none") { - offset += NAVBAR_HEIGHT + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top; + offset += NAVBAR_HEIGHT + out.top; } refreshOptions.offset = offset; refreshOptions.height = rpx2px(refreshOptions.height); @@ -15020,7 +15020,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", () const windowWidth = getWindowWidth(screenWidth); let windowHeight = window.innerHeight; const language = navigator.language; - const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top; + const statusBarHeight = out.top; let osname; let osversion; let model; @@ -15133,12 +15133,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", () const system = `${osname} ${osversion}`; const platform = osname.toLocaleLowerCase(); const safeArea = { - left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left, - right: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right, - top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top, - bottom: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom, - width: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right, - height: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom + left: out.left, + right: windowWidth - out.right, + top: out.top, + bottom: windowHeight - out.bottom, + width: windowWidth - out.left - out.right, + height: windowHeight - out.top - out.bottom }; const {top: windowTop, bottom: windowBottom} = getWindowOffset(); windowHeight -= windowTop; @@ -15158,10 +15158,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", () model, safeArea, safeAreaInsets: { - top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top, - right: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right, - bottom: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom, - left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left + top: out.top, + right: out.right, + bottom: out.bottom, + left: out.left } }; }); diff --git a/packages/vite-plugin-uni/src/configResolved/plugins/css.ts b/packages/vite-plugin-uni/src/configResolved/plugins/css.ts new file mode 100644 index 000000000..b233324d5 --- /dev/null +++ b/packages/vite-plugin-uni/src/configResolved/plugins/css.ts @@ -0,0 +1,44 @@ +import fs from 'fs' +import { OutputAsset, OutputChunk } from 'rollup' +import { Plugin, ResolvedConfig } from 'vite' + +import { resolveBuiltIn } from '@dcloudio/uni-cli-shared' + +export const buildInCssSet = new Set() + +export function isCombineBuiltInCss(config: ResolvedConfig) { + return config.command === 'build' && config.build.cssCodeSplit +} + +export function uniCssPlugin(config: ResolvedConfig): Plugin { + return { + name: 'vite:uni-css', + apply: 'build', + generateBundle(_opts, bundle) { + if (!isCombineBuiltInCss(config) || !buildInCssSet.size) { + return + } + const chunks = Object.values(bundle) + const entryChunk = chunks.find( + (chunk) => chunk.type === 'chunk' && chunk.isEntry + ) as OutputChunk | undefined + if (!entryChunk) { + return + } + const entryName = entryChunk.name + const entryCssAsset = chunks.find( + ({ name }) => name === entryName + '.css' + ) as OutputAsset + if (entryCssAsset) { + entryCssAsset.source += + '\n' + generateBuiltInCssCode([...buildInCssSet]) + } + }, + } +} + +function generateBuiltInCssCode(cssImports: string[]) { + return cssImports + .map((cssImport) => fs.readFileSync(resolveBuiltIn(cssImport), 'utf8')) + .join('\n') +} diff --git a/packages/vite-plugin-uni/src/configResolved/plugins/easycom.ts b/packages/vite-plugin-uni/src/configResolved/plugins/easycom.ts index 5f64e3635..f381f0134 100644 --- a/packages/vite-plugin-uni/src/configResolved/plugins/easycom.ts +++ b/packages/vite-plugin-uni/src/configResolved/plugins/easycom.ts @@ -1,5 +1,5 @@ import path from 'path' -import { Plugin } from 'vite' +import { Plugin, ResolvedConfig } from 'vite' import { createFilter } from '@rollup/pluginutils' import { camelize, capitalize } from '@vue/shared' @@ -14,6 +14,7 @@ import { import { UniPluginFilterOptions } from '.' import { debugEasycom, matchEasycom } from '../../utils' +import { buildInCssSet, isCombineBuiltInCss } from './css' const H5_COMPONENTS_PATH = '@dcloudio/uni-h5' @@ -51,8 +52,12 @@ const baseComponents = [ const identifierRE = /^([a-zA-Z_$][a-zA-Z\\d_$]*)$/ -export function uniEasycomPlugin(options: UniPluginFilterOptions): Plugin { +export function uniEasycomPlugin( + options: UniPluginFilterOptions, + config: ResolvedConfig +): Plugin { const filter = createFilter(options.include, options.exclude) + const needCombineBuiltInCss = isCombineBuiltInCss(config) return { name: 'vite:uni-easycom', transform(code, id) { @@ -74,9 +79,22 @@ export function uniEasycomPlugin(options: UniPluginFilterOptions): Plugin { (str, name) => { if (name && !name.startsWith('_')) { if (isBuiltInComponent(name)) { + const local = `__syscom_${i++}` + if (needCombineBuiltInCss) { + // 发行模式下，应该将内置组件css输出到入口css中 + resolveBuiltInCssImport(name).forEach((cssImport) => + buildInCssSet.add(cssImport) + ) + return addImportDeclaration( + importDeclarations, + local, + H5_COMPONENTS_PATH, + capitalize(camelize(name)) + ) + } return addBuiltInImportDeclaration( importDeclarations, - `__syscom_${i++}`, + local, name ) } @@ -106,24 +124,26 @@ export function uniEasycomPlugin(options: UniPluginFilterOptions): Plugin { } } +function resolveBuiltInCssImport(name: string) { + const cssImports: string[] = [] + if (baseComponents.includes(name)) { + cssImports.push(BASE_COMPONENTS_STYLE_PATH + name + '.css') + } else { + cssImports.push(H5_COMPONENTS_STYLE_PATH + name + '.css') + } + const deps = COMPONENT_DEPS_CSS[name as keyof typeof COMPONENT_DEPS_CSS] + deps && deps.forEach((dep) => cssImports.push(dep)) + return cssImports +} + function addBuiltInImportDeclaration( importDeclarations: string[], local: string, name: string ) { - if (baseComponents.includes(name)) { - importDeclarations.push( - `import '${BASE_COMPONENTS_STYLE_PATH + name + '.css'}';` - ) - } else { - importDeclarations.push( - `import '${H5_COMPONENTS_STYLE_PATH + name + '.css'}';` - ) - } - const deps = COMPONENT_DEPS_CSS[name as keyof typeof COMPONENT_DEPS_CSS] - if (deps) { - deps.forEach((dep) => importDeclarations.push(`import '${dep}';`)) - } + resolveBuiltInCssImport(name).forEach((cssImport) => + importDeclarations.push(`import '${cssImport}';`) + ) return addImportDeclaration( importDeclarations, local, diff --git a/packages/vite-plugin-uni/src/configResolved/plugins/index.ts b/packages/vite-plugin-uni/src/configResolved/plugins/index.ts index 570a512fe..03cf457f9 100644 --- a/packages/vite-plugin-uni/src/configResolved/plugins/index.ts +++ b/packages/vite-plugin-uni/src/configResolved/plugins/index.ts @@ -24,6 +24,7 @@ import { uniRenderjsPlugin } from './renderjs' import { uniPreVuePlugin } from './preVue' import { uniSSRPlugin } from './ssr' import { uniResolveIdPlugin } from './resolveId' +import { uniCssPlugin, buildInCssSet, isCombineBuiltInCss } from './css' const debugPlugin = debug('vite:uni:plugin') @@ -70,7 +71,13 @@ const uniInjectPluginOptions: Partial = { getCurrentPages: ['@dcloudio/uni-h5', 'getCurrentPages'], UniServiceJSBridge: ['@dcloudio/uni-h5', 'UniServiceJSBridge'], UniViewJSBridge: ['@dcloudio/uni-h5', 'UniViewJSBridge'], - callback(imports, mod) { +} + +function createUniInjectCallback( + config: ResolvedConfig +): InjectOptions['callback'] { + const needCombineBuiltInCss = isCombineBuiltInCss(config) + return (imports, mod) => { const styles = mod[0] === '@dcloudio/uni-h5' && API_DEPS_CSS[mod[1] as keyof typeof API_DEPS_CSS] @@ -78,11 +85,15 @@ const uniInjectPluginOptions: Partial = { return } styles.forEach((style) => { - if (!imports.has(style)) { - imports.set(style, `import '${style}';`) + if (needCombineBuiltInCss) { + buildInCssSet.add(style) + } else { + if (!imports.has(style)) { + imports.set(style, `import '${style}';`) + } } }) - }, + } } export function initPlugins( @@ -124,7 +135,15 @@ export function initPlugins( // 可以考虑使用apply:'build' if (command === 'build') { - addPlugin(plugins, uniInjectPlugin(uniInjectPluginOptions), 'vite:vue') + addPlugin( + plugins, + uniInjectPlugin( + extend(uniInjectPluginOptions, { + callback: createUniInjectCallback(config), + }) + ), + 'vite:vue' + ) } addPlugin( @@ -135,12 +154,17 @@ export function initPlugins( addPlugin( plugins, - uniEasycomPlugin(extend(uniEasycomPluginOptions, options)), + uniEasycomPlugin(extend(uniEasycomPluginOptions, options), config), 'vite:vue' ) addPlugin(plugins, uniPageVuePlugin(options), 'vite:vue') addPlugin(plugins, uniJsonPlugin(options), 'vite:json', 'pre') addPlugin(plugins, uniStaticPlugin(options, config), 'vite:asset', 'pre') + + if (isCombineBuiltInCss(config)) { + addPlugin(plugins, uniCssPlugin(config), 'vite:asset') + } + if (command === 'build' && !config.build.ssr) { addPlugin(plugins, uniCopyPlugin(options), plugins.length) } -- GitLab