diff --git a/src/platforms/web/util/style.js b/src/platforms/web/util/style.js index fc3f8a9e1ae..7d45034ac5e 100644 --- a/src/platforms/web/util/style.js +++ b/src/platforms/web/util/style.js @@ -4,10 +4,8 @@ import { cached, extend, toObject } from 'shared/util' export const parseStyleText = cached(function (cssText) { const res = {} - const hasBackground = cssText.indexOf('background') >= 0 - // maybe with background-image: url(http://xxx) or base64 img - const listDelimiter = hasBackground ? /;(?![^(]*\))/g : ';' - const propertyDelimiter = hasBackground ? /:(.+)/ : ':' + const listDelimiter = /;(?![^(]*\))/g + const propertyDelimiter = /:(.+)/ cssText.split(listDelimiter).forEach(function (item) { if (item) { var tmp = item.split(propertyDelimiter) diff --git a/test/unit/features/directives/static-style-parser.spec.js b/test/unit/features/directives/static-style-parser.spec.js new file mode 100644 index 00000000000..13dd675bda1 --- /dev/null +++ b/test/unit/features/directives/static-style-parser.spec.js @@ -0,0 +1,41 @@ +import { parseStyleText } from 'web/util/style' +const base64ImgUrl = 'url("data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==")' +const logoUrl = 'url(https://vuejs.org/images/logo.png)' + +it('should parse normal static style', () => { + const staticStyle = `font-size: 12px;background: ${logoUrl};color:red` + const res = parseStyleText(staticStyle) + expect(res.background).toBe(logoUrl) + expect(res.color).toBe('red') + expect(res['font-size']).toBe('12px') +}) + +it('should parse base64 background', () => { + const staticStyle = `background: ${base64ImgUrl}` + const res = parseStyleText(staticStyle) + expect(res.background).toBe(base64ImgUrl) +}) + +it('should parse multiple background images ', () => { + let staticStyle = `background: ${logoUrl}, ${logoUrl};` + let res = parseStyleText(staticStyle) + expect(res.background).toBe(`${logoUrl}, ${logoUrl}`) + + staticStyle = `background: ${base64ImgUrl}, ${base64ImgUrl}` + res = parseStyleText(staticStyle) + expect(res.background).toBe(`${base64ImgUrl}, ${base64ImgUrl}`) +}) + +it('should parse other images ', () => { + let staticStyle = `shape-outside: ${logoUrl}` + let res = parseStyleText(staticStyle) + expect(res['shape-outside']).toBe(logoUrl) + + staticStyle = `list-style-image: ${logoUrl}` + res = parseStyleText(staticStyle) + expect(res['list-style-image']).toBe(logoUrl) + + staticStyle = `border-image: ${logoUrl} 30 30 repeat` + res = parseStyleText(staticStyle) + expect(res['border-image']).toBe(`${logoUrl} 30 30 repeat`) +})