feat: add component css dependency configuration

packages/playground/ssr/src/components/ssr-image/ssr-image.vue

+<template>
+    <image src="/static/logo.png"/>
+</template>
\ No newline at end of file

packages/playground/ssr/src/pages/index/index.vue

@@ -2,6 +2,7 @@
   <ssr-cover-image />
   <ssr-cover-view />
   <ssr-icon />
+  <ssr-image />
   <!-- <ssr-match-media /> -->
   <!-- <ssr-movable-area /> -->
   <ssr-progress />

packages/uni-cli-shared/src/api.ts → packages/uni-cli-shared/src/deps.ts

 import { BASE_COMPONENTS_STYLE_PATH, H5_API_STYLE_PATH } from './constants'
 
-export const API_STYLES = {
+export const API_DEPS_CSS = {
   showModal: [`${H5_API_STYLE_PATH}/modal.css`],
   showToast: [`${H5_API_STYLE_PATH}/toast.css`],
   showActionSheet: [`${H5_API_STYLE_PATH}/action-sheet.css`],
@@ -12,3 +12,16 @@ export const API_STYLES = {
   ],
   openLocation: [`${H5_API_STYLE_PATH}/location-view.css`],
 }
+
+const RESIZE_SENSOR_CSS = BASE_COMPONENTS_STYLE_PATH + 'resize-sensor.css'
+
+export const COMPONENT_DEPS_CSS = {
+  canvas: [RESIZE_SENSOR_CSS],
+  image: [RESIZE_SENSOR_CSS],
+  'movable-area': [RESIZE_SENSOR_CSS],
+  'picker-view': [RESIZE_SENSOR_CSS],
+  'picker-view-column': [RESIZE_SENSOR_CSS],
+  'rich-text': [RESIZE_SENSOR_CSS],
+  textarea: [RESIZE_SENSOR_CSS],
+  'web-view': [RESIZE_SENSOR_CSS],
+}

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

-export * from './api'
 export * from './ssr'
 export * from './uni'
 export * from './url'
+export * from './deps'
 export * from './json'
 export * from './utils'
 export * from './constants'

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

@@ -8,6 +8,7 @@ import {
   EXTNAME_VUE,
   H5_COMPONENTS_STYLE_PATH,
   BASE_COMPONENTS_STYLE_PATH,
+  COMPONENT_DEPS_CSS,
   parseVueRequest,
 } from '@dcloudio/uni-cli-shared'
 
@@ -48,17 +49,6 @@ const baseComponents = [
   'view',
 ]
 
-const resizeComponents = [
-  'canvas',
-  'image',
-  'movable-area',
-  'picker-view',
-  'picker-view-column',
-  'rich-text',
-  'textarea',
-  'web-view',
-]
-
 export function uniEasycomPlugin(options: UniPluginFilterOptions): Plugin {
   const filter = createFilter(options.include, options.exclude)
   return {
@@ -110,11 +100,6 @@ function addBuiltInImportDeclaration(
   local: string,
   name: string
 ) {
-  if (resizeComponents.includes(name)) {
-    importDeclarations.push(
-      `import '${BASE_COMPONENTS_STYLE_PATH + 'resize-sensor.css'}';`
-    )
-  }
   if (baseComponents.includes(name)) {
     importDeclarations.push(
       `import '${BASE_COMPONENTS_STYLE_PATH + name + '.css'}';`
@@ -124,6 +109,10 @@ function addBuiltInImportDeclaration(
       `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

@@ -4,7 +4,7 @@ import { Plugin, ResolvedConfig } from 'vite'
 import { FilterPattern } from '@rollup/pluginutils'
 import vue from '@vitejs/plugin-vue'
 
-import { API_STYLES } from '@dcloudio/uni-cli-shared'
+import { API_DEPS_CSS } from '@dcloudio/uni-cli-shared'
 
 import { VitePluginUniResolvedOptions } from '../..'
 import { uniPrePlugin } from './pre'
@@ -72,7 +72,7 @@ const uniInjectPluginOptions: Partial<InjectOptions> = {
   callback(imports, mod) {
     const styles =
       mod[0] === '@dcloudio/uni-h5' &&
-      API_STYLES[mod[1] as keyof typeof API_STYLES]
+      API_DEPS_CSS[mod[1] as keyof typeof API_DEPS_CSS]
     if (!styles) {
       return
     }

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

@@ -8,7 +8,7 @@ import {
   H5_FRAMEWORK_STYLE_PATH,
   BASE_COMPONENTS_STYLE_PATH,
   normalizePagesJson,
-  API_STYLES,
+  API_DEPS_CSS,
 } from '@dcloudio/uni-cli-shared'
 import { VitePluginUniResolvedOptions } from '../..'
 import { FEATURE_DEFINES } from '../../utils'
@@ -147,8 +147,8 @@ function generateCssCode(
   }
   if (options.command === 'serve') {
     // 开发模式，自动添加所有API相关css
-    Object.keys(API_STYLES).forEach((name) => {
-      const styles = API_STYLES[name as keyof typeof API_STYLES]
+    Object.keys(API_DEPS_CSS).forEach((name) => {
+      const styles = API_DEPS_CSS[name as keyof typeof API_DEPS_CSS]
       styles.forEach((style) => {
         if (!cssFiles.includes(style)) {
           cssFiles.push(style)