123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- /* @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
- }
|