wip(mp): scope css

packages/uni-app-vite/src/plugin/configResolved.ts

 import fs from 'fs'
+import path from 'path'
 import { Plugin } from 'vite'
 
 import {
@@ -6,16 +7,32 @@ import {
   injectAssetPlugin,
   injectCssPlugin,
   injectCssPostPlugin,
+  resolveMainPathOnce,
+  normalizePath,
+  removeExt,
 } from '@dcloudio/uni-cli-shared'
 
 let appCss = ''
 
+function normalizeCssChunkFilename(id: string) {
+  return (
+    removeExt(normalizePath(path.relative(process.env.UNI_INPUT_DIR, id))) +
+    '.css'
+  )
+}
 export const configResolved: Plugin['configResolved'] = (config) => {
+  const mainPath = resolveMainPathOnce(process.env.UNI_INPUT_DIR)
   removePlugins('vite:import-analysis', config)
   injectCssPlugin(config)
   injectCssPostPlugin(config, {
-    extname: '.css',
-    chunkCss(filename, cssCode) {
+    chunkCssFilename(id: string) {
+      if (id === mainPath) {
+        return 'app.css'
+      } else if (id.includes('mpType=page')) {
+        return normalizeCssChunkFilename(id)
+      }
+    },
+    chunkCssCode(filename, cssCode) {
       if (filename === 'app.css') {
         if (!appCss) {
           appCss = fs.readFileSync(

packages/uni-cli-shared/src/json/manifest.ts

@@ -18,7 +18,7 @@ export const parseManifestJson = (inputDir: string) => {
 export const parseManifestJsonOnce = once(parseManifestJson)
 
 export const parseRpx2UnitOnce = once(
-  (inputDir: string, platform: UniApp.PLATFORM) => {
+  (inputDir: string, platform: UniApp.PLATFORM = 'h5') => {
     const rpx2unit =
       platform === 'h5' || platform === 'app'
         ? defaultRpx2Unit

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

 export * from './nvue'
 export * from './event'
+export * from './style'
 export { transformVueComponentImports } from './transformImports'

packages/uni-cli-shared/src/mp/style.ts

+const scopedRE = /\[(data-v-[a-f0-9]{8})\]/gi
+export function transformScopedCss(cssCode: string) {
+  return cssCode.replace(scopedRE, (_, scopedId) => {
+    return '.' + scopedId
+  })
+}

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

@@ -63,7 +63,7 @@ export function normalizeMiniProgramFilename(
   filename: string,
   inputDir?: string
 ) {
-  if (!inputDir) {
+  if (!inputDir || !path.isAbsolute(filename)) {
     return normalizeNodeModules(filename)
   }
   return normalizeNodeModules(path.relative(inputDir, filename))

packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts

@@ -27,9 +27,6 @@ import type Stylus from 'stylus'
 import type Less from 'less'
 import { Alias } from 'types/alias'
 import { transform, formatMessages } from 'esbuild'
-
-import { resolveMainPathOnce } from '../../../../utils'
-import { EXTNAME_JS_RE, EXTNAME_VUE_RE } from '../../../../constants'
 // const debug = createDebugger('vite:css')
 
 export interface CSSOptions {
@@ -178,18 +175,6 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
-function normalizeCssChunkFilename(id: string, extname: string = '.css') {
-  return normalizePath(
-    path.relative(
-      process.env.UNI_INPUT_DIR,
-      id
-        .split('?')[0]
-        .replace(EXTNAME_VUE_RE, extname)
-        .replace(EXTNAME_JS_RE, extname)
-    )
-  )
-}
-
 function findCssModuleIds(
   this: PluginContext,
   moduleId: string,
@@ -229,11 +214,11 @@ function findCssModuleIds(
 export function cssPostPlugin(
   config: ResolvedConfig,
   {
-    chunkCss,
-    extname,
+    chunkCssFilename,
+    chunkCssCode,
   }: {
-    chunkCss: (filename: string, cssCode: string) => string
-    extname: string
+    chunkCssFilename: (id: string) => string | void
+    chunkCssCode: (filename: string, cssCode: string) => string
   }
 ): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
@@ -244,7 +229,7 @@ export function cssPostPlugin(
     buildStart() {
       cssChunks = new Map<string, Set<string>>()
     },
-    async transform(css, id, ssr) {
+    async transform(css, id) {
       if (!cssLangRE.test(id) || commonjsProxyRE.test(id)) {
         return
       }
@@ -261,17 +246,10 @@ export function cssPostPlugin(
 
     async generateBundle() {
       const moduleIds = Array.from(this.getModuleIds())
-      const mainPath = resolveMainPathOnce(process.env.UNI_INPUT_DIR)
       moduleIds.forEach((id) => {
-        if (id === mainPath) {
-          // 全局样式
-          cssChunks.set('app' + extname, findCssModuleIds.call(this, id))
-        } else if (id.includes('mpType=page')) {
-          // 页面样式
-          cssChunks.set(
-            normalizeCssChunkFilename(id, extname),
-            findCssModuleIds.call(this, id)
-          )
+        const filename = chunkCssFilename(id)
+        if (filename) {
+          cssChunks.set(filename, findCssModuleIds.call(this, id))
         }
       })
       if (!cssChunks.size) {
@@ -310,10 +288,11 @@ export function cssPostPlugin(
       }
       for (const filename of cssChunks.keys()) {
         const cssCode = genCssCode(filename)
-        let source = await processChunkCSS(
-          chunkCss ? chunkCss(filename, cssCode) : cssCode,
-          { dirname: path.dirname(filename), inlined: false, minify: true }
-        )
+        let source = await processChunkCSS(chunkCssCode(filename, cssCode), {
+          dirname: path.dirname(filename),
+          inlined: false,
+          minify: true,
+        })
         this.emitFile({
           fileName: filename,
           type: 'asset',

packages/uni-cli-shared/src/vite/utils/plugin.ts

@@ -20,14 +20,17 @@ export function injectCssPlugin(config: ResolvedConfig) {
 export function injectCssPostPlugin(
   config: ResolvedConfig,
   {
-    chunkCss,
-    extname,
+    chunkCssFilename,
+    chunkCssCode,
   }: {
-    chunkCss: (filename: string, cssCode: string) => string
-    extname: string
+    chunkCssFilename: (id: string) => string | void
+    chunkCssCode: (filename: string, cssCode: string) => string
   }
 ) {
-  replacePlugins([cssPostPlugin(config, { chunkCss, extname })], config)
+  replacePlugins(
+    [cssPostPlugin(config, { chunkCssFilename, chunkCssCode })],
+    config
+  )
 }
 
 export function replacePlugins(plugins: Plugin[], config: ResolvedConfig) {

packages/uni-mp-compiler/__tests__/scopeId.spec.ts

+import { assert } from './testUtils'
+
+describe('compiler: transform scopeId', () => {
+  const options = {
+    scopeId: 'data-v-5584ec96',
+  }
+  test(`without static class`, () => {
+    assert(
+      `<view/>`,
+      `<view class="data-v-5584ec96"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`,
+      options
+    )
+    assert(
+      `<view :class="foo"/>`,
+      `<view class="{{['data-v-5584ec96', a]}}"/>`,
+      `(_ctx, _cache) => {
+  return { a: _normalizeClass(_ctx.foo) }
+}`,
+      options
+    )
+  })
+  test(`with static class`, () => {
+    assert(
+      `<view class="foo"/>`,
+      `<view class="foo data-v-5584ec96"/>`,
+      `(_ctx, _cache) => {
+  return {}
+}`,
+      options
+    )
+    assert(
+      `<view class="bar" :class="foo"/>`,
+      `<view class="{{['bar data-v-5584ec96', a]}}"/>`,
+      `(_ctx, _cache) => {
+  return { a: _normalizeClass(_ctx.foo) }
+}`,
+      options
+    )
+    assert(
+      `<view :class="foo" class="bar"/>`,
+      `<view class="{{[a, 'bar data-v-5584ec96']}}"/>`,
+      `(_ctx, _cache) => {
+  return { a: _normalizeClass(_ctx.foo) }
+}`,
+      options
+    )
+  })
+})

packages/uni-mp-compiler/__tests__/style.spec.ts

@@ -22,14 +22,14 @@ describe('compiler: transform style', () => {
       `<view :style="foo"/>`,
       `<view style="{{a}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.foo) }
+  return { a: _stringifyStyle(_ctx.foo) }
 }`
     )
     assert(
       `<view :style="foo | bar"/>`,
       `<view style="{{a}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.foo | _ctx.bar) }
+  return { a: _stringifyStyle(_ctx.foo | _ctx.bar) }
 }`
     )
   })
@@ -38,14 +38,14 @@ describe('compiler: transform style', () => {
       `<view :style="foo" style="color:green;"/>`,
       `<view style="{{a + ';' + 'color:green;'}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.foo) }
+  return { a: _stringifyStyle(_ctx.foo) }
 }`
     )
     assert(
       `<view style="color:green;" :style="foo"/>`,
       `<view style="{{'color:green;' + ';' + a}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.foo) }
+  return { a: _stringifyStyle(_ctx.foo) }
 }`
     )
   })
@@ -70,7 +70,7 @@ describe('compiler: transform style', () => {
       `<view :style="{color:'green',fontSize:'15px',backgroundColor: handle(bg),fontWeight,[padding]:box.padding,...style,...{margin:'0px'}}"/>`,
       `<view style="{{'color:' + 'green' + ';' + ('font-size:' + '15px') + ';' + ('background-color:' + a) + ';' + ('font-weight:' + b) + ';' + (c + ':' + d) + ';' + e + ';' + f}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _normalizeStyle(_ctx.style), f: _normalizeStyle({ margin: '0px' }) }
+  return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _stringifyStyle(_ctx.style), f: _stringifyStyle({ margin: '0px' }) }
 }`
     )
   })
@@ -93,14 +93,14 @@ describe('compiler: transform style', () => {
       `<view :style="{color:'green',fontSize:'15px',backgroundColor: handle(bg),fontWeight,[padding]:box.padding,...style,...{margin:'0px'}}" style="font-size:15px"/>`,
       `<view style="{{'color:' + 'green' + ';' + ('font-size:' + '15px') + ';' + ('background-color:' + a) + ';' + ('font-weight:' + b) + ';' + (c + ':' + d) + ';' + e + ';' + f + ';' + 'font-size:15px'}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _normalizeStyle(_ctx.style), f: _normalizeStyle({ margin: '0px' }) }
+  return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _stringifyStyle(_ctx.style), f: _stringifyStyle({ margin: '0px' }) }
 }`
     )
     assert(
       `<view style="font-size:15px" :style="{color:'green',fontSize:'15px',backgroundColor: handle(bg),fontWeight,[padding]:box.padding,...style,...{margin:'0px'}}"/>`,
       `<view style="{{'font-size:15px' + ';' + ('color:' + 'green' + ';' + ('font-size:' + '15px') + ';' + ('background-color:' + a) + ';' + ('font-weight:' + b) + ';' + (c + ':' + d) + ';' + e + ';' + f)}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _normalizeStyle(_ctx.style), f: _normalizeStyle({ margin: '0px' }) }
+  return { a: _ctx.handle(_ctx.bg), b: _ctx.fontWeight, c: _hyphenate(_ctx.padding), d: _ctx.box.padding, e: _stringifyStyle(_ctx.style), f: _stringifyStyle({ margin: '0px' }) }
 }`
     )
   })
@@ -109,21 +109,21 @@ describe('compiler: transform style', () => {
       `<view :style="[styleA, \`\${styleB}\`]"/>`,
       `<view style="{{a + ';' + b}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(\`\${_ctx.styleB}\`) }
+  return { a: _stringifyStyle(_ctx.styleA), b: _stringifyStyle(\`\${_ctx.styleB}\`) }
 }`
     )
     assert(
       `<view :style="[styleA, styleB]"/>`,
       `<view style="{{a + ';' + b}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB) }
+  return { a: _stringifyStyle(_ctx.styleA), b: _stringifyStyle(_ctx.styleB) }
 }`
     )
     assert(
       `<view :style="[styleA, styleB, { color:'red',fontSize }, 'font-weight:bold', ...styleC, ...[styleD,styleE], handle(styleF) ]"/>`,
       `<view style="{{a + ';' + b + ';' + c + ';' + 'font-weight:bold' + ';' + d + ';' + e + ';' + f}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB), c: _normalizeStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _normalizeStyle(_ctx.styleC), e: _normalizeStyle([_ctx.styleD, _ctx.styleE]), f: _normalizeStyle(_ctx.handle(_ctx.styleF)) }
+  return { a: _stringifyStyle(_ctx.styleA), b: _stringifyStyle(_ctx.styleB), c: _stringifyStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _stringifyStyle(_ctx.styleC), e: _stringifyStyle([_ctx.styleD, _ctx.styleE]), f: _stringifyStyle(_ctx.handle(_ctx.styleF)) }
 }`
     )
   })
@@ -132,28 +132,28 @@ describe('compiler: transform style', () => {
       `<view :style="[styleA, styleB]" style="font-size:15px"/>`,
       `<view style="{{a + ';' + b + ';' + 'font-size:15px'}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB) }
+  return { a: _stringifyStyle(_ctx.styleA), b: _stringifyStyle(_ctx.styleB) }
 }`
     )
     assert(
       `<view style="font-size:15px" :style="[styleA, styleB]"/>`,
       `<view style="{{'font-size:15px' + ';' + (a + ';' + b)}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB) }
+  return { a: _stringifyStyle(_ctx.styleA), b: _stringifyStyle(_ctx.styleB) }
 }`
     )
     assert(
       `<view :style="[styleA, styleB, { color:'red',fontSize }, 'font-weight:bold', ...styleC, ...[styleD,styleE], handle(styleF) ]" style="font-size:15px"/>`,
       `<view style="{{a + ';' + b + ';' + c + ';' + 'font-weight:bold' + ';' + d + ';' + e + ';' + f + ';' + 'font-size:15px'}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB), c: _normalizeStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _normalizeStyle(_ctx.styleC), e: _normalizeStyle([_ctx.styleD, _ctx.styleE]), f: _normalizeStyle(_ctx.handle(_ctx.styleF)) }
+  return { a: _stringifyStyle(_ctx.styleA), b: _stringifyStyle(_ctx.styleB), c: _stringifyStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _stringifyStyle(_ctx.styleC), e: _stringifyStyle([_ctx.styleD, _ctx.styleE]), f: _stringifyStyle(_ctx.handle(_ctx.styleF)) }
 }`
     )
     assert(
       `<view style="font-size:15px" :style="[styleA, styleB, { color:'red',fontSize }, 'font-weight:bold', ...styleC, ...[styleD,styleE], handle(styleF) ]"/>`,
       `<view style="{{'font-size:15px' + ';' + (a + ';' + b + ';' + c + ';' + 'font-weight:bold' + ';' + d + ';' + e + ';' + f)}}"/>`,
       `(_ctx, _cache) => {
-  return { a: _normalizeStyle(_ctx.styleA), b: _normalizeStyle(_ctx.styleB), c: _normalizeStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _normalizeStyle(_ctx.styleC), e: _normalizeStyle([_ctx.styleD, _ctx.styleE]), f: _normalizeStyle(_ctx.handle(_ctx.styleF)) }
+  return { a: _stringifyStyle(_ctx.styleA), b: _stringifyStyle(_ctx.styleB), c: _stringifyStyle({ color: 'red', fontSize: _ctx.fontSize }), d: _stringifyStyle(_ctx.styleC), e: _stringifyStyle([_ctx.styleD, _ctx.styleE]), f: _stringifyStyle(_ctx.handle(_ctx.styleF)) }
 }`
     )
   })

packages/uni-mp-compiler/src/compile.ts

@@ -68,6 +68,7 @@ export function baseCompile(template: string, options: CompilerOptions = {}) {
   )
   if (options.filename && options.miniProgram?.emitFile) {
     genTemplate(ast, {
+      scopeId: options.scopeId,
       filename: options.filename,
       directive: options.miniProgram.directive,
       emitFile: options.miniProgram.emitFile,

packages/uni-mp-compiler/src/options.ts

@@ -30,6 +30,7 @@ interface SharedTransformCodegenOptions {
 export interface TransformOptions
   extends SharedTransformCodegenOptions,
     ErrorHandlingOptions {
+  scopeId?: string | null
   cacheHandlers?: boolean
   nodeTransforms?: NodeTransform[]
   directiveTransforms?: Record<string, DirectiveTransform | undefined>
@@ -78,6 +79,7 @@ export interface CodegenOptions extends SharedTransformCodegenOptions {
 }
 
 export interface TemplateCodegenOptions {
+  scopeId?: string | null
   filename: string
   directive: string
   emitFile: (emittedFile: EmittedFile) => string

packages/uni-mp-compiler/src/runtimeHelpers.ts

@@ -3,9 +3,10 @@ import { registerRuntimeHelpers } from '@vue/compiler-core'
 export const V_ON = Symbol(`vOn`)
 export const V_FOR = Symbol(`vFor`)
 export const HYPHENATE = Symbol(`hyphenate`)
-
+export const STRINGIFY_STYLE = Symbol(`stringifyStyle`)
 registerRuntimeHelpers({
   [V_ON]: 'vOn',
   [V_FOR]: 'vFor',
   [HYPHENATE]: 'hyphenate',
+  [STRINGIFY_STYLE]: 'stringifyStyle',
 })

packages/uni-mp-compiler/src/template/codegen.ts

@@ -20,15 +20,17 @@ import { IfElementNode, isIfElementNode } from '../transforms/vIf'
 interface TemplateCodegenContext {
   code: string
   directive: string
+  scopeId?: string | null
   push(code: string): void
 }
 
 export function generate(
   { children }: RootNode,
-  { emitFile, filename, directive }: TemplateCodegenOptions
+  { scopeId, emitFile, filename, directive }: TemplateCodegenOptions
 ) {
   const context: TemplateCodegenContext = {
     code: '',
+    scopeId,
     directive,
     push(code) {
       context.code += code

packages/uni-mp-compiler/src/transform.ts

@@ -214,6 +214,7 @@ export function createTransformContext(
     filename = '',
     isTS = false,
     inline = false,
+    scopeId = null,
     bindingMetadata = EMPTY_OBJ,
     cacheHandlers = false,
     prefixIdentifiers = false,
@@ -269,6 +270,7 @@ export function createTransformContext(
     selfName: nameMatch && capitalize(camelize(nameMatch[1])),
     isTS,
     inline,
+    scopeId,
     bindingMetadata,
     cacheHandlers,
     prefixIdentifiers,

packages/uni-mp-compiler/src/transforms/transformElement.ts

@@ -14,6 +14,8 @@ import {
   UNREF,
   toValidAssetId,
   findDir,
+  locStub,
+  AttributeNode,
 } from '@vue/compiler-core'
 import { errorMessages, MPErrorCodes } from '../errors'
 
@@ -45,6 +47,9 @@ export const transformElement: NodeTransform = (node, context) => {
     if (isComponent) {
       processComponent(node, context)
     }
+    if (context.scopeId) {
+      addScopeId(node, context.scopeId)
+    }
     const { props } = node
     if (props.length > 0) {
       processProps(node, context)
@@ -52,6 +57,37 @@ export const transformElement: NodeTransform = (node, context) => {
   }
 }
 
+function createClassAttribute(clazz: string): AttributeNode {
+  return {
+    type: NodeTypes.ATTRIBUTE,
+    loc: locStub,
+    name: 'class',
+    value: {
+      type: NodeTypes.TEXT,
+      loc: locStub,
+      content: clazz,
+    },
+  }
+}
+function addScopeId(node: ElementNode, scopeId: string) {
+  const classProp = node.props.find(
+    (prop) => prop.type === NodeTypes.ATTRIBUTE && prop.name === 'class'
+  ) as AttributeNode | undefined
+
+  if (!classProp) {
+    return node.props.unshift(createClassAttribute(scopeId))
+  }
+
+  if (classProp.value) {
+    return (classProp.value.content = classProp.value.content + ' ' + scopeId)
+  }
+  classProp.value = {
+    type: NodeTypes.TEXT,
+    loc: locStub,
+    content: scopeId,
+  }
+}
+
 function processComponent(node: ElementNode, context: TransformContext) {
   const { tag } = node
   if (context.bindingComponents[tag]) {

packages/uni-mp-compiler/src/transforms/transformStyle.ts

@@ -22,11 +22,10 @@ import {
   createSimpleExpression,
   ExpressionNode,
   createCompoundExpression,
-  NORMALIZE_STYLE,
   SourceLocation,
 } from '@vue/compiler-core'
 import { hyphenate } from '@vue/shared'
-import { HYPHENATE } from '../runtimeHelpers'
+import { HYPHENATE, STRINGIFY_STYLE } from '../runtimeHelpers'
 import { parseExpr, parseStringLiteral } from '../ast'
 import { genBabelExpr } from '../codegen'
 import { TransformContext } from '../transform'
@@ -106,7 +105,7 @@ function rewriteStyleExpression(
 ) {
   return rewriteExpression(
     createCompoundExpression([
-      context.helperString(NORMALIZE_STYLE) + '(',
+      context.helperString(STRINGIFY_STYLE) + '(',
       expr,
       ')',
     ]),
@@ -143,7 +142,7 @@ function rewriteStyleObjectExpression(
     if (isSpreadElement(prop)) {
       // <view :style="{...obj}"/>
       // <view style="{{a}}"/>
-      const newExpr = rewriteSpreadElement(NORMALIZE_STYLE, prop, loc, context)
+      const newExpr = rewriteSpreadElement(STRINGIFY_STYLE, prop, loc, context)
       if (newExpr) {
         prop.argument = newExpr
       }

packages/uni-mp-vite/src/plugin/configResolved.ts

@@ -6,9 +6,19 @@ import {
   injectCssPlugin,
   injectCssPostPlugin,
   normalizePath,
+  resolveMainPathOnce,
+  removeExt,
+  transformScopedCss,
+  normalizeMiniProgramFilename,
 } from '@dcloudio/uni-cli-shared'
 import { UniMiniProgramPluginOptions } from '.'
 import { getNVueCssPaths } from '../plugins/pagesJson'
+import {
+  isUniComponentUrl,
+  isUniPageUrl,
+  parseVirtualComponentPath,
+  parseVirtualPagePath,
+} from '../plugins/entry'
 
 const debugNVueCss = debug('vite:uni:nvue-css')
 
@@ -17,12 +27,31 @@ const shadowCss = `page::after{position:fixed;content:'';left:-1000px;top:-1000p
 export function createConfigResolved({
   style: { extname },
 }: UniMiniProgramPluginOptions): Plugin['configResolved'] {
+  function normalizeCssChunkFilename(id: string, extname: string) {
+    return (
+      removeExt(normalizeMiniProgramFilename(id, process.env.UNI_INPUT_DIR)) +
+      extname
+    )
+  }
   return (config) => {
+    const mainPath = resolveMainPathOnce(process.env.UNI_INPUT_DIR)
     removePlugins('vite:import-analysis', config)
     injectCssPlugin(config)
     injectCssPostPlugin(config, {
-      extname,
-      chunkCss(filename, cssCode) {
+      chunkCssFilename(id: string) {
+        if (id === mainPath) {
+          return 'app' + extname
+        } else if (isUniPageUrl(id)) {
+          return normalizeCssChunkFilename(parseVirtualPagePath(id), extname)
+        } else if (isUniComponentUrl(id)) {
+          return normalizeCssChunkFilename(
+            parseVirtualComponentPath(id),
+            extname
+          )
+        }
+      },
+      chunkCssCode(filename, cssCode) {
+        cssCode = transformScopedCss(cssCode)
         if (config.isProduction && filename === 'app' + extname) {
           return cssCode + shadowCss
         }

packages/uni-mp-vue/dist/vue.runtime.esm.js

-import { extend, isSymbol, isObject, toRawType, def, hasChanged, isArray, isFunction, NOOP, remove, toHandlerKey, camelize, capitalize, isString, normalizeClass, normalizeStyle, isOn, isPromise, EMPTY_OBJ, isSet, isMap, isPlainObject, invokeArrayFns, hasOwn, NO, isIntegerKey, toNumber, hyphenate, isReservedProp, EMPTY_ARR, makeMap, toTypeString } from '@vue/shared';
+import { extend, isSymbol, isObject, toRawType, def, hasChanged, isArray, isFunction, NOOP, remove, toHandlerKey, camelize, capitalize, isString, normalizeClass, normalizeStyle, isOn, isPromise, EMPTY_OBJ, isSet, isMap, isPlainObject, invokeArrayFns, hasOwn, NO, isIntegerKey, toNumber, hyphenate, isReservedProp, EMPTY_ARR, makeMap, toTypeString, stringifyStyle as stringifyStyle$1 } from '@vue/shared';
 export { camelize, hyphenate, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '@vue/shared';
 
 // lifecycle
@@ -5032,10 +5032,14 @@ function patchStopImmediatePropagation(e, value) {
     }
 }
 
+function stringifyStyle(value) {
+    return stringifyStyle$1(normalizeStyle(value));
+}
+
 function createApp(rootComponent, rootProps = null) {
     rootComponent && (rootComponent.mpType = 'app');
     return createVueApp(rootComponent, rootProps).use(plugin);
 }
 const createSSRApp = createApp;
 
-export { EffectScope, ReactiveEffect, callWithAsyncErrorHandling, callWithErrorHandling, computed, createApp, createSSRApp, createVNode$1 as createVNode, createVueApp, customRef, defineComponent, defineEmits, defineExpose, defineProps, effect, effectScope, getCurrentInstance, getCurrentScope, inject, injectHook, isInSSRComponentSetup, isProxy, isReactive, isReadonly, isRef, logError, markRaw, mergeDefaults, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onUnmounted, onUpdated, provide, proxyRefs, queuePostFlushCb, reactive, readonly, ref, resolveComponent, resolveDirective, resolveFilter, shallowReactive, shallowReadonly, shallowRef, stop, toHandlers, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useSSRContext, useSlots, vFor, vOn, version, warn$1 as warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withModifiers, withScopeId };
+export { EffectScope, ReactiveEffect, callWithAsyncErrorHandling, callWithErrorHandling, computed, createApp, createSSRApp, createVNode$1 as createVNode, createVueApp, customRef, defineComponent, defineEmits, defineExpose, defineProps, effect, effectScope, getCurrentInstance, getCurrentScope, inject, injectHook, isInSSRComponentSetup, isProxy, isReactive, isReadonly, isRef, logError, markRaw, mergeDefaults, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onUnmounted, onUpdated, provide, proxyRefs, queuePostFlushCb, reactive, readonly, ref, resolveComponent, resolveDirective, resolveFilter, shallowReactive, shallowReadonly, shallowRef, stop, stringifyStyle, toHandlers, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useSSRContext, useSlots, vFor, vOn, version, warn$1 as warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withModifiers, withScopeId };

packages/uni-mp-vue/src/helpers/index.ts

 export { vFor } from './vFor'
 export { vOn } from './vOn'
+export { stringifyStyle } from './style'

packages/uni-mp-vue/src/helpers/style.ts

+import { normalizeStyle, stringifyStyle as stringify } from '@vue/shared'
+export function stringifyStyle(value: unknown) {
+  return stringify(normalizeStyle(value))
+}