diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts index a9edc9870de..b672799adf4 100644 --- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts +++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts @@ -807,6 +807,37 @@ describe('compiler: element transform', () => { }) }) + test(':style with array literal', () => { + const { node, root } = parseWithElementTransform( + `
`, + { + nodeTransforms: [transformExpression, transformStyle, transformElement], + directiveTransforms: { + bind: transformBind + }, + prefixIdentifiers: true + } + ) + expect(root.helpers).toContain(NORMALIZE_STYLE) + expect(node.props).toMatchObject({ + type: NodeTypes.JS_OBJECT_EXPRESSION, + properties: [ + { + type: NodeTypes.JS_PROPERTY, + key: { + type: NodeTypes.SIMPLE_EXPRESSION, + content: `style`, + isStatic: true + }, + value: { + type: NodeTypes.JS_CALL_EXPRESSION, + callee: NORMALIZE_STYLE + } + } + ] + }) + }) + test(`props merging: class`, () => { const { node, root } = parseWithElementTransform( `
`, diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index 3e2f74c0d01..403c5c6e382 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -767,10 +767,11 @@ export function buildProps( } if ( styleProp && - !isStaticExp(styleProp.value) && // the static style is compiled into an object, // so use `hasStyleBinding` to ensure that it is a dynamic style binding (hasStyleBinding || + (styleProp.value.type === NodeTypes.SIMPLE_EXPRESSION && + styleProp.value.content.trim()[0] === `[`) || // v-bind:style and style both exist, // v-bind:style with static literal object styleProp.value.type === NodeTypes.JS_ARRAY_EXPRESSION)