Merge pull request #195 from jlesquembre/css-variables

Add support for css variables
snabbdom · Dec 14, 2016 · f79af82 · f79af82
2 parents f552b0e + ccbf30f
commit f79af82
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -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

diff --git a/src/modules/style.ts b/src/modules/style.ts
@@ -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;
diff --git a/test/style.js b/test/style.js
@@ -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,

diff --git a/tsconfig.json b/tsconfig.json
@@ -11,7 +11,8 @@
         "noUnusedLocals": true,
         "lib": [
             "dom",
-            "es5"
+            "es5",
+            "es2015.core"
         ]
     },
     "files": [