Meituan-Dianping/mpvue · warning

style="${String(staticStyle)}": Interpolation inside attribu

Error message

style="${String(staticStyle)}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.

What it means

In the Weex template compiler, the style module detects interpolation ({{ }}) inside a static style attribute and warns that attribute interpolation is deprecated. The value is still parsed dynamically (styleResult), but the supported syntax is v-bind:style / :style.

Source

Thrown at src/platforms/weex/compiler/modules/style.js:23

import {
  getAndRemoveAttr,
  getBindingAttr,
  baseWarn
} from 'compiler/helpers'

type StaticStyleResult = {
  dynamic: boolean,
  styleResult: string
};

const normalize = cached(camelize)

function transformNode (el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticStyle = getAndRemoveAttr(el, 'style')
  const { dynamic, styleResult } = parseStaticStyle(staticStyle, options)
  if (process.env.NODE_ENV !== 'production' && dynamic) {
    warn(
      `style="${String(staticStyle)}": ` +
      'Interpolation inside attributes has been deprecated. ' +
      'Use v-bind or the colon shorthand instead.'
    )
  }
  if (!dynamic && styleResult) {
    el.staticStyle = styleResult
  }
  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  if (styleBinding) {
    el.styleBinding = styleBinding
  } else if (dynamic) {
    el.styleBinding = styleResult
  }
}

function genData (el: ASTElement): string {
  let data = ''

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Replace with :style="{ width: width, height: height }" (object syntax).
2. Or use string binding: :style="'width:' + width + '; height:' + height".
3. Combine static and dynamic styles via array syntax: :style="[staticStyleObj, dynamicStyleObj]".
4. Audit templates for {{ }} inside style attributes and migrate them.

Example fix

// before
style="width: {{width}}; height: {{height}}"
// after
:style="{ width: width, height: height }"

function hasStyleInterpolation(tpl) {
  return /style="[^"]*\{\{/.test(tpl)
}
// fail CI if hasStyleInterpolation(templateSource) is true

When it happens

Trigger: Compiling a Weex template containing style="width: {{width}}; height: {{height}}" or similar — the static style attribute contains {{...}}, so parseStaticStyle marks it dynamic and the warning fires (note: fires for any dynamic value even if staticStyle were empty-checked only on dynamic).

Common situations: Vue 1.x-era templates with interpolated style strings; inlining dynamic sizes/colors in style attributes instead of bindings; copy-pasted templates from old Weex examples.

Related errors

• class="${staticClass}": Interpolation inside attributes has
• tag <${tag}> has no matching end tag.
• [Vue tip]: ${msg}
• passive and prevent can't be used together. Passive handler
• Templates should only be responsible for mapping the state t

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/5a65434ad4c7df2c. Report an issue: GitHub.