Permalink
Browse files

Add support for css variables

  • Loading branch information...
1 parent cd952ac commit ccbf30f0c6c7a7f54515e698145296885d99e52e @jlesquembre jlesquembre committed Nov 19, 2016
Showing with 57 additions and 4 deletions.
  1. +11 −0 README.md
  2. +11 −3 src/modules/style.ts
  3. +33 −0 test/style.js
  4. +2 −1 tsconfig.json
View
@@ -333,6 +333,17 @@ h('div', {
}, 'I, I follow, I follow you');
```
+#### Custom properties (CSS variables)
+
+CSS custom properties (aka CSS variables) are supported, they must be prefixed
+with `--`
+
+```javascript
+h('div', {
+ style: {'--warnColor': 'yellow'}
+}, 'Warning');
+```
+
#### Delayed properties
You can specify properties as being delayed. Whenever these properties
View
@@ -20,7 +20,11 @@ function updateStyle(oldVnode: VNode, vnode: VNode): void {
for (name in oldStyle) {
if (!style[name]) {
- (elm as any).style[name] = '';
+ if (name.startsWith('--')) {
+ (elm as any).style.removeProperty(name);
+ } else {
+ (elm as any).style[name] = '';
+ }
}
}
for (name in style) {
@@ -33,7 +37,11 @@ function updateStyle(oldVnode: VNode, vnode: VNode): void {
}
}
} else if (name !== 'remove' && cur !== oldStyle[name]) {
- (elm as any).style[name] = cur;
+ if (name.startsWith('--')) {
+ (elm as any).style.setProperty(name, cur);
+ } else {
+ (elm as any).style[name] = cur;
+ }
}
}
}
@@ -75,4 +83,4 @@ export const styleModule = {
destroy: applyDestroyStyle,
remove: applyRemoveStyle
} as Module;
-export default styleModule;
+export default styleModule;
View
@@ -54,6 +54,39 @@ describe('style', function() {
patch(vnode2, vnode3);
assert.equal(elm.firstChild.style.fontSize, '10px');
});
+ it('updates css variables', function() {
+ var vnode1 = h('div', {style: {'--myVar': 1}});
+ var vnode2 = h('div', {style: {'--myVar': 2}});
+ var vnode3 = h('div', {style: {'--myVar': 3}});
+ elm = patch(vnode0, vnode1).elm;
+ assert.equal(elm.style.getPropertyValue('--myVar'), 1);
+ elm = patch(vnode1, vnode2).elm;
+ assert.equal(elm.style.getPropertyValue('--myVar'), 2);
+ elm = patch(vnode2, vnode3).elm;
+ assert.equal(elm.style.getPropertyValue('--myVar'), 3);
+ });
+ it('explicialy removes css variables', function() {
+ var vnode1 = h('i', {style: {'--myVar': 1}});
+ var vnode2 = h('i', {style: {'--myVar': ''}});
+ var vnode3 = h('i', {style: {'--myVar': 2}});
+ elm = patch(vnode0, vnode1).elm;
+ assert.equal(elm.style.getPropertyValue('--myVar'), 1);
+ patch(vnode1, vnode2);
+ assert.equal(elm.style.getPropertyValue('--myVar'), '');
+ patch(vnode2, vnode3);
+ assert.equal(elm.style.getPropertyValue('--myVar'), 2);
+ });
+ it('implicially removes css variables from element', function() {
+ var vnode1 = h('div', [h('i', {style: {'--myVar': 1}})]);
+ var vnode2 = h('div', [h('i')]);
+ var vnode3 = h('div', [h('i', {style: {'--myVar': 2}})]);
+ patch(vnode0, vnode1);
+ assert.equal(elm.firstChild.style.getPropertyValue('--myVar'), 1);
+ patch(vnode1, vnode2);
+ assert.equal(elm.firstChild.style.getPropertyValue('--myVar'), '');
+ patch(vnode2, vnode3);
+ assert.equal(elm.firstChild.style.getPropertyValue('--myVar'), 2);
+ });
it('updates delayed styles in next frame', function() {
var patch = snabbdom.init([
require('../modules/style').default,
View
@@ -11,7 +11,8 @@
"noUnusedLocals": true,
"lib": [
"dom",
- "es5"
+ "es5",
+ "es2015.core"
]
},
"files": [

0 comments on commit ccbf30f

Please sign in to comment.