diff --git a/src/core/__tests__/compile.test.js b/src/core/__tests__/compile.test.js index 1beef589..29114ecb 100644 --- a/src/core/__tests__/compile.test.js +++ b/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; `); }); diff --git a/src/core/__tests__/parse.test.js b/src/core/__tests__/parse.test.js index 590b0cda..ea53399c 100644 --- a/src/core/__tests__/parse.test.js +++ b/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( { diff --git a/src/core/compile.js b/src/core/compile.js index 83363d6f..19c42010 100644 --- a/src/core/compile.js +++ b/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); diff --git a/src/core/parse.js b/src/core/parse.js index fb05f852..e5cebdb5 100644 --- a/src/core/parse.js +++ b/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