vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow css vars with uppercase characters (#2311)

Browse source 
* Allow css vars with uppercase characters

* Remove charAt

* Extract dash lowercase lambda

* Extract match uppercase regex

* Set key and value correctly in updateStyle

* Fix domMock style to work like the browser
This commit is contained in:
Rasmus Porsager 2018-11-26 15:40:08 +01:00 • committed by Isiah Meadows
parent 87033bf1e0
commit 7c299ab48c
3 changed files with 34 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

30
render/render.js
View file

@ -775,28 +775,28 @@ module.exports = function($window) {
) && key in vnode.dom
}
var matchUpperCase = /[A-Z]/g
function prependDashAndLowerCase(string){
return "-" + string.toLowerCase()
}
function normalizeProp(prop) {
return "-" && prop[1] === "-"
? prop
: prop.replace(matchUpperCase, prependDashAndLowerCase)
}
//style
function updateStyle(element, old, input) {
if(typeof input === "object") {
var style = {}
for(var key in input) {
style[key] = String(input[key]).replace(/[A-Z]/g, function(capital){
return "-" + capital.toLowerCase()
})
}
}
else {
var style = input
}
function updateStyle(element, old, style) {
if (old != null && style != null && typeof old === "object" && typeof style === "object" && style !== old) {
// Both old & new are (different) objects.
// Update style properties that have changed
for (var key in style) {
if (style[key] !== old[key]) element.style.setProperty(key, style[key])
if (style[key] !== old[key]) element.style.setProperty(normalizeProp(key), style[key])
}
// Remove style properties that no longer exist
for (var key in old) {
if (!(key in style)) element.style.removeProperty(key)
if (!(key in style)) element.style.removeProperty(normalizeProp(key))
}
return
}
@ -806,7 +806,7 @@ module.exports = function($window) {
else {
if (typeof old === "string") element.style.cssText = ""
for (var key in style) {
element.style.setProperty(key, style[key])
element.style.setProperty(normalizeProp(key), style[key])
}
}
}

12
render/tests/test-createElement.js
View file

@ -33,6 +33,18 @@ o.spec("createElement", function() {
o(vnode.dom.nodeName).equals("DIV")
o(vnode.dom.style.backgroundColor).equals("red")
})
o("allows css vars in style", function() {
var vnode = {tag: "div", attrs: {style: {"--css-var": "red"}}}
render(root, [vnode])
o(vnode.dom.style["--css-var"]).equals("red")
})
o("allows css vars in style with uppercase letters", function() {
var vnode = {tag: "div", attrs: {style: {"--cssVar": "red"}}}
render(root, [vnode])
o(vnode.dom.style["--cssVar"]).equals("red")
})
o("creates children", function() {
var vnode = {tag: "div", children: [{tag: "a"}, {tag: "b"}]}
render(root, [vnode])

11
test-utils/domMock.js
View file

@ -220,6 +220,9 @@ module.exports = function(options) {
parseMarkup(value, root, [], "http://www.w3.org/2000/svg")
return {documentElement: root}
}
function camelCase(string) {
return string.replace(/-\D/g, function(match) {return match[1].toUpperCase()})
}
var activeElement
var $window = {
DOMParser: DOMParser,
@ -240,10 +243,10 @@ module.exports = function(options) {
var colonIndex = rule.indexOf(":")
if (colonIndex > -1) {
var rawKey = rule.slice(0, colonIndex).trim()
var key = rawKey.replace(/-\D/g, function(match) {return match[1].toUpperCase()})
var key = camelCase(rawKey)
var value = rule.slice(colonIndex + 1).trim()
if (key !== "cssText") {
style[key] = value
style[key] = style[rawKey] = value
buf.push(rawKey + ": " + value + ";")
}
}
@ -256,10 +259,10 @@ module.exports = function(options) {
return style[key]
}},
removeProperty: {value: function(key){
style[key] = ""
style[key] = style[camelCase(key)] = ""
}},
setProperty: {value: function(key, value){
style[key] = value
style[key] = style[camelCase(key)] = value
}}
})
var events = {}