/* @flow */ import { cached, camelize, isPlainObject } from 'shared/util' import { parseText } from 'compiler/parser/text-parser' import { getAndRemoveAttr, getBindingAttr, baseWarn } from 'compiler/helpers' type StaticStyleResult = { dynamic: boolean, styleResult: string | Object | void }; 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.', el.rawAttrsMap['style'] ) } if (!dynamic && styleResult) { // $flow-disable-line el.staticStyle = styleResult } const styleBinding = getBindingAttr(el, 'style', false /* getStatic */) if (styleBinding) { el.styleBinding = styleBinding } else if (dynamic) { // $flow-disable-line el.styleBinding = styleResult } } function genData (el: ASTElement): string { let data = '' if (el.staticStyle) { data += `staticStyle:${el.staticStyle},` } if (el.styleBinding) { data += `style:${el.styleBinding},` } return data } function parseStaticStyle (staticStyle: ?string, options: CompilerOptions): StaticStyleResult { // "width: 200px; height: 200px;" -> {width: 200, height: 200} // "width: 200px; height: {{y}}" -> {width: 200, height: y} let dynamic = false let styleResult = '' if (typeof staticStyle === 'string') { const styleList = staticStyle.trim().split(';').map(style => { const result = style.trim().split(':') if (result.length !== 2) { return } const key = normalize(result[0].trim()) const value = result[1].trim() const dynamicValue = parseText(value, options.delimiters) if (dynamicValue) { dynamic = true return key + ':' + dynamicValue.expression } return key + ':' + JSON.stringify(value) }).filter(result => result) if (styleList.length) { styleResult = '{' + styleList.join(',') + '}' } } else if (isPlainObject(staticStyle)) { styleResult = JSON.stringify(staticStyle) || '' } return { dynamic, styleResult } } export default { staticKeys: ['staticStyle'], transformNode, genData }