提交 58ddc008 编写于 作者: fxy060608's avatar fxy060608

feat: add css plugin

上级 9a0fe6f7
...@@ -485,7 +485,7 @@ var safeAreaInsets = { ...@@ -485,7 +485,7 @@ var safeAreaInsets = {
onChange, onChange,
offChange offChange
}; };
var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets; var out = safeAreaInsets;
const onEventPrevent = /* @__PURE__ */ withModifiers(() => { const onEventPrevent = /* @__PURE__ */ withModifiers(() => {
}, ["prevent"]); }, ["prevent"]);
const onEventStop = /* @__PURE__ */ withModifiers(() => { const onEventStop = /* @__PURE__ */ withModifiers(() => {
...@@ -497,10 +497,10 @@ function getWindowOffset() { ...@@ -497,10 +497,10 @@ function getWindowOffset() {
const left = parseInt(style.getPropertyValue("--window-left")); const left = parseInt(style.getPropertyValue("--window-left"));
const right = parseInt(style.getPropertyValue("--window-right")); const right = parseInt(style.getPropertyValue("--window-right"));
return { return {
top: top ? top + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top : 0, top: top ? top + out.top : 0,
bottom: bottom ? bottom + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom : 0, bottom: bottom ? bottom + out.bottom : 0,
left: left ? left + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left : 0, left: left ? left + out.left : 0,
right: right ? right + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right : 0 right: right ? right + out.right : 0
}; };
} }
function updateCssVar(cssVars) { function updateCssVar(cssVars) {
...@@ -1194,7 +1194,7 @@ function normalizePageMeta(pageMeta) { ...@@ -1194,7 +1194,7 @@ function normalizePageMeta(pageMeta) {
let offset = rpx2px(refreshOptions.offset); let offset = rpx2px(refreshOptions.offset);
const {type} = navigationBar; const {type} = navigationBar;
if (type !== "transparent" && type !== "none") { 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.offset = offset;
refreshOptions.height = rpx2px(refreshOptions.height); refreshOptions.height = rpx2px(refreshOptions.height);
...@@ -15020,7 +15020,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", () ...@@ -15020,7 +15020,7 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
const windowWidth = getWindowWidth(screenWidth); const windowWidth = getWindowWidth(screenWidth);
let windowHeight = window.innerHeight; let windowHeight = window.innerHeight;
const language = navigator.language; const language = navigator.language;
const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top; const statusBarHeight = out.top;
let osname; let osname;
let osversion; let osversion;
let model; let model;
...@@ -15133,12 +15133,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", () ...@@ -15133,12 +15133,12 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
const system = `${osname} ${osversion}`; const system = `${osname} ${osversion}`;
const platform = osname.toLocaleLowerCase(); const platform = osname.toLocaleLowerCase();
const safeArea = { const safeArea = {
left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left, left: out.left,
right: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right, right: windowWidth - out.right,
top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top, top: out.top,
bottom: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom, bottom: windowHeight - out.bottom,
width: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right, width: windowWidth - out.left - out.right,
height: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom height: windowHeight - out.top - out.bottom
}; };
const {top: windowTop, bottom: windowBottom} = getWindowOffset(); const {top: windowTop, bottom: windowBottom} = getWindowOffset();
windowHeight -= windowTop; windowHeight -= windowTop;
...@@ -15158,10 +15158,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", () ...@@ -15158,10 +15158,10 @@ const getSystemInfoSync = /* @__PURE__ */ defineSyncApi("getSystemInfoSync", ()
model, model,
safeArea, safeArea,
safeAreaInsets: { safeAreaInsets: {
top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top, top: out.top,
right: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right, right: out.right,
bottom: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom, bottom: out.bottom,
left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left left: out.left
} }
}; };
}); });
......
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<string>()
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')
}
import path from 'path' import path from 'path'
import { Plugin } from 'vite' import { Plugin, ResolvedConfig } from 'vite'
import { createFilter } from '@rollup/pluginutils' import { createFilter } from '@rollup/pluginutils'
import { camelize, capitalize } from '@vue/shared' import { camelize, capitalize } from '@vue/shared'
...@@ -14,6 +14,7 @@ import { ...@@ -14,6 +14,7 @@ import {
import { UniPluginFilterOptions } from '.' import { UniPluginFilterOptions } from '.'
import { debugEasycom, matchEasycom } from '../../utils' import { debugEasycom, matchEasycom } from '../../utils'
import { buildInCssSet, isCombineBuiltInCss } from './css'
const H5_COMPONENTS_PATH = '@dcloudio/uni-h5' const H5_COMPONENTS_PATH = '@dcloudio/uni-h5'
...@@ -51,8 +52,12 @@ const baseComponents = [ ...@@ -51,8 +52,12 @@ const baseComponents = [
const identifierRE = /^([a-zA-Z_$][a-zA-Z\\d_$]*)$/ 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 filter = createFilter(options.include, options.exclude)
const needCombineBuiltInCss = isCombineBuiltInCss(config)
return { return {
name: 'vite:uni-easycom', name: 'vite:uni-easycom',
transform(code, id) { transform(code, id) {
...@@ -74,9 +79,22 @@ export function uniEasycomPlugin(options: UniPluginFilterOptions): Plugin { ...@@ -74,9 +79,22 @@ export function uniEasycomPlugin(options: UniPluginFilterOptions): Plugin {
(str, name) => { (str, name) => {
if (name && !name.startsWith('_')) { if (name && !name.startsWith('_')) {
if (isBuiltInComponent(name)) { 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( return addBuiltInImportDeclaration(
importDeclarations, importDeclarations,
`__syscom_${i++}`, local,
name name
) )
} }
...@@ -106,24 +124,26 @@ export function uniEasycomPlugin(options: UniPluginFilterOptions): Plugin { ...@@ -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( function addBuiltInImportDeclaration(
importDeclarations: string[], importDeclarations: string[],
local: string, local: string,
name: string name: string
) { ) {
if (baseComponents.includes(name)) { resolveBuiltInCssImport(name).forEach((cssImport) =>
importDeclarations.push( importDeclarations.push(`import '${cssImport}';`)
`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}';`))
}
return addImportDeclaration( return addImportDeclaration(
importDeclarations, importDeclarations,
local, local,
......
...@@ -24,6 +24,7 @@ import { uniRenderjsPlugin } from './renderjs' ...@@ -24,6 +24,7 @@ import { uniRenderjsPlugin } from './renderjs'
import { uniPreVuePlugin } from './preVue' import { uniPreVuePlugin } from './preVue'
import { uniSSRPlugin } from './ssr' import { uniSSRPlugin } from './ssr'
import { uniResolveIdPlugin } from './resolveId' import { uniResolveIdPlugin } from './resolveId'
import { uniCssPlugin, buildInCssSet, isCombineBuiltInCss } from './css'
const debugPlugin = debug('vite:uni:plugin') const debugPlugin = debug('vite:uni:plugin')
...@@ -70,7 +71,13 @@ const uniInjectPluginOptions: Partial<InjectOptions> = { ...@@ -70,7 +71,13 @@ const uniInjectPluginOptions: Partial<InjectOptions> = {
getCurrentPages: ['@dcloudio/uni-h5', 'getCurrentPages'], getCurrentPages: ['@dcloudio/uni-h5', 'getCurrentPages'],
UniServiceJSBridge: ['@dcloudio/uni-h5', 'UniServiceJSBridge'], UniServiceJSBridge: ['@dcloudio/uni-h5', 'UniServiceJSBridge'],
UniViewJSBridge: ['@dcloudio/uni-h5', 'UniViewJSBridge'], UniViewJSBridge: ['@dcloudio/uni-h5', 'UniViewJSBridge'],
callback(imports, mod) { }
function createUniInjectCallback(
config: ResolvedConfig
): InjectOptions['callback'] {
const needCombineBuiltInCss = isCombineBuiltInCss(config)
return (imports, mod) => {
const styles = const styles =
mod[0] === '@dcloudio/uni-h5' && mod[0] === '@dcloudio/uni-h5' &&
API_DEPS_CSS[mod[1] as keyof typeof API_DEPS_CSS] API_DEPS_CSS[mod[1] as keyof typeof API_DEPS_CSS]
...@@ -78,11 +85,15 @@ const uniInjectPluginOptions: Partial<InjectOptions> = { ...@@ -78,11 +85,15 @@ const uniInjectPluginOptions: Partial<InjectOptions> = {
return return
} }
styles.forEach((style) => { styles.forEach((style) => {
if (!imports.has(style)) { if (needCombineBuiltInCss) {
imports.set(style, `import '${style}';`) buildInCssSet.add(style)
} else {
if (!imports.has(style)) {
imports.set(style, `import '${style}';`)
}
} }
}) })
}, }
} }
export function initPlugins( export function initPlugins(
...@@ -124,7 +135,15 @@ export function initPlugins( ...@@ -124,7 +135,15 @@ export function initPlugins(
// 可以考虑使用apply:'build' // 可以考虑使用apply:'build'
if (command === 'build') { if (command === 'build') {
addPlugin(plugins, uniInjectPlugin(uniInjectPluginOptions), 'vite:vue') addPlugin(
plugins,
uniInjectPlugin(
extend(uniInjectPluginOptions, {
callback: createUniInjectCallback(config),
})
),
'vite:vue'
)
} }
addPlugin( addPlugin(
...@@ -135,12 +154,17 @@ export function initPlugins( ...@@ -135,12 +154,17 @@ export function initPlugins(
addPlugin( addPlugin(
plugins, plugins,
uniEasycomPlugin(extend(uniEasycomPluginOptions, options)), uniEasycomPlugin(extend(uniEasycomPluginOptions, options), config),
'vite:vue' 'vite:vue'
) )
addPlugin(plugins, uniPageVuePlugin(options), 'vite:vue') addPlugin(plugins, uniPageVuePlugin(options), 'vite:vue')
addPlugin(plugins, uniJsonPlugin(options), 'vite:json', 'pre') addPlugin(plugins, uniJsonPlugin(options), 'vite:json', 'pre')
addPlugin(plugins, uniStaticPlugin(options, config), 'vite:asset', 'pre') addPlugin(plugins, uniStaticPlugin(options, config), 'vite:asset', 'pre')
if (isCombineBuiltInCss(config)) {
addPlugin(plugins, uniCssPlugin(config), 'vite:asset')
}
if (command === 'build' && !config.build.ssr) { if (command === 'build' && !config.build.ssr) {
addPlugin(plugins, uniCopyPlugin(options), plugins.length) addPlugin(plugins, uniCopyPlugin(options), plugins.length)
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册