feat: add css plugin

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
     }
   };
 });

packages/vite-plugin-uni/src/configResolved/plugins/css.ts

+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')
+}

packages/vite-plugin-uni/src/configResolved/plugins/easycom.ts

 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'}';`
+  resolveBuiltInCssImport(name).forEach((cssImport) =>
+    importDeclarations.push(`import '${cssImport}';`)
   )
-  } 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(
     importDeclarations,
     local,

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<InjectOptions> = {
   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<InjectOptions> = {
       return
     }
     styles.forEach((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)
   }