{"record":{"id":"5a65434ad4c7df2c","repo":"Meituan-Dianping/mpvue","slug":"style-string-staticstyle-interpolation-insi-5a6543","errorCode":null,"errorMessage":"style=\"${String(staticStyle)}\": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.","messagePattern":"style=\"(.+?)\": Interpolation inside attributes has been deprecated\\. Use v-bind or the colon shorthand instead\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/platforms/weex/compiler/modules/style.js","lineNumber":23,"sourceCode":"import {\n  getAndRemoveAttr,\n  getBindingAttr,\n  baseWarn\n} from 'compiler/helpers'\n\ntype StaticStyleResult = {\n  dynamic: boolean,\n  styleResult: string\n};\n\nconst normalize = cached(camelize)\n\nfunction transformNode (el: ASTElement, options: CompilerOptions) {\n  const warn = options.warn || baseWarn\n  const staticStyle = getAndRemoveAttr(el, 'style')\n  const { dynamic, styleResult } = parseStaticStyle(staticStyle, options)\n  if (process.env.NODE_ENV !== 'production' && dynamic) {\n    warn(\n      `style=\"${String(staticStyle)}\": ` +\n      'Interpolation inside attributes has been deprecated. ' +\n      'Use v-bind or the colon shorthand instead.'\n    )\n  }\n  if (!dynamic && styleResult) {\n    el.staticStyle = styleResult\n  }\n  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)\n  if (styleBinding) {\n    el.styleBinding = styleBinding\n  } else if (dynamic) {\n    el.styleBinding = styleResult\n  }\n}\n\nfunction genData (el: ASTElement): string {\n  let data = ''","sourceCodeStart":5,"sourceCodeEnd":41,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/weex/compiler/modules/style.js#L5-L41","documentation":"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.","triggerScenarios":"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).","commonSituations":"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.","solutions":["Replace with :style=\"{ width: width, height: height }\" (object syntax).","Or use string binding: :style=\"'width:' + width + '; height:' + height\".","Combine static and dynamic styles via array syntax: :style=\"[staticStyleObj, dynamicStyleObj]\".","Audit templates for {{ }} inside style attributes and migrate them."],"exampleFix":"// before\nstyle=\"width: {{width}}; height: {{height}}\"\n// after\n:style=\"{ width: width, height: height }\"","handlingStrategy":"validation","validationCode":"function hasStyleInterpolation(tpl) {\n  return /style=\"[^\"]*\\{\\{/.test(tpl)\n}\n// fail CI if hasStyleInterpolation(templateSource) is true","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Express dynamic styles as :style objects instead of interpolated strings.","Use array syntax to merge static and dynamic style objects.","Enable compiler warnings in development and fix them before release.","Migrate legacy Vue 1.x interpolated attributes during upgrades."],"tags":["vue","weex","compiler","deprecation","style-binding"],"backgroundTag":"attribute-interpolation-deprecated","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}