Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 57x 57x 57x 1593x 772x 672x 13x 57x 13x 13x | import {
NodeTransform,
NodeTypes,
createSimpleExpression,
SimpleExpressionNode,
SourceLocation,
ConstantTypes
} from '@vue/compiler-core'
import { parseStringStyle } from '@vue/shared'
// Parse inline CSS strings for static style attributes into an object.
// This is a NodeTransform since it works on the static `style` attribute and
// converts it into a dynamic equivalent:
// style="color: red" -> :style='{ "color": "red" }'
// It is then processed by `transformElement` and included in the generated
// props.
export const transformStyle: NodeTransform = node => {
if (node.type === NodeTypes.ELEMENT) {
node.props.forEach((p, i) => {
if (p.type === NodeTypes.ATTRIBUTE && p.name === 'style' && p.value) {
// replace p with an expression node
node.props[i] = {
type: NodeTypes.DIRECTIVE,
name: `bind`,
arg: createSimpleExpression(`style`, true, p.loc),
exp: parseInlineCSS(p.value.content, p.loc),
modifiers: [],
loc: p.loc
}
}
})
}
}
const parseInlineCSS = (
cssText: string,
loc: SourceLocation
): SimpleExpressionNode => {
const normalized = parseStringStyle(cssText)
return createSimpleExpression(
JSON.stringify(normalized),
false,
loc,
ConstantTypes.CAN_STRINGIFY
)
}
|