Fix #491

src/core/__tests__/compile.test.js

@@ -23,9 +23,9 @@ describe('compile', () => {
     });
 
     it('value interpolations', () => {
-        // This interpolations are testing the ability to interpolate thruty and falsy values
+        // This interpolations are testing the ability to interpolate truthy and falsy values
         expect(template`prop: 1; ${() => 0},${() => undefined},${() => null},${2}`({})).toEqual(
-            'prop: 1; 0,,,2'
+            'prop: 1; 0,_;,_;,2' // '_;' represents a falsy value
         );
 
         const tmpl = template`
@@ -39,7 +39,7 @@ describe('compile', () => {
         `;
         expect(tmpl({})).toEqual(`
             background: dodgerblue;
-
+            _;
             border: 1px solid blue;
         `);
     });

src/core/__tests__/parse.test.js

@@ -281,12 +281,13 @@ describe('parse', () => {
                 {
                     div: {
                         opacity: 0,
-                        color: null
+                        color: null,
+                        content: '""'
                     }
                 },
                 ''
             )
-        ).toEqual('div{opacity:0;}');
+        ).toEqual('div{opacity:0;content:"";}');
         expect(
             parse(
                 {

src/core/compile.js

@@ -30,10 +30,11 @@ export let compile = (str, defs, data) => {
                 tail = res.props ? '' : parse(res, '');
             } else {
                 // Regular value returned. Can be falsy as well.
-                // Here we check if this is strictly a boolean with false value
-                // define it as `''` to be picked up as empty, otherwise use
-                // res value
-                tail = res === false ? '' : res;
+                // If this is `false`, `undefined` or `null`,
+                // define it as `_;` to be picked up as empty, otherwise use
+                // res value. The semicolon in `_;` is necessary to make `astish()`
+                // ignore such empty values.
+                tail = res === false || res == null ? '_;' : res;
             }
         }
         return out + next + (tail == null ? '' : tail);

src/core/parse.js

@@ -43,7 +43,7 @@ export let parse = (obj, selector) => {
                       })
                     : key
             );
-        } else if (val != undefined) {
+        } else if (val != undefined && val !== '_') {
             // Convert all but CSS variables
             key = /^--/.test(key) ? key : key.replace(/[A-Z]/g, '-$&').toLowerCase();
             // Push the line for this property