From 284c5db8a53552fb226d292d7b052915f71ac450 Mon Sep 17 00:00:00 2001 From: Kye Hohenberger <kye@sideway.com> Date: Wed, 27 Sep 2017 11:27:26 -0600 Subject: [PATCH 1/2] Check for null when evaluating input strings in createStyles closes #351 --- packages/emotion/src/index.js | 5 +--- .../test/__snapshots__/css.test.js.snap | 12 +++++++++ packages/emotion/test/css.test.js | 8 ++++++ .../test/__snapshots__/index.test.js.snap | 25 +++++++++++++++++++ packages/react-emotion/test/index.test.js | 18 +++++++++++++ 5 files changed, 64 insertions(+), 4 deletions(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index 669040877..82c4bf6f2 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -198,10 +198,7 @@ function isLastCharDot(string) { function createStyles(strings, ...interpolations) { let stringMode = true let styles = '' - if ( - (strings !== undefined && strings.raw === undefined) || - strings === undefined - ) { + if (strings == null || strings === undefined || strings.raw === undefined) { stringMode = false styles = handleInterpolation(strings, false) } else { diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap index f3816a88f..ce1d78da2 100644 --- a/packages/emotion/test/__snapshots__/css.test.js.snap +++ b/packages/emotion/test/__snapshots__/css.test.js.snap @@ -399,6 +399,18 @@ exports[`css null rule 1`] = ` /> `; +exports[`css null value 1`] = ` +<div + className="css-0" +/> +`; + +exports[`css null value 2`] = ` +<div + className="css-0" +/> +`; + exports[`css random expression 1`] = ` .glamor-0 { font-size: 20px; diff --git a/packages/emotion/test/css.test.js b/packages/emotion/test/css.test.js index f26037f7f..264230d2b 100644 --- a/packages/emotion/test/css.test.js +++ b/packages/emotion/test/css.test.js @@ -281,6 +281,14 @@ describe('css', () => { const tree = renderer.create(<div className={cls1} />).toJSON() expect(tree).toMatchSnapshot() }) + + test('null value', () => { + const cls1 = css(null) + const cls2 = css`${() => null};` + expect(renderer.create(<div className={cls1} />).toJSON()).toMatchSnapshot() + expect(renderer.create(<div className={cls2} />).toJSON()).toMatchSnapshot() + }) + test('flushes correctly', () => { const cls1 = css`display: flex;` const tree = renderer.create(<div className={cls1} />).toJSON() diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap index 7b620f573..8462afbf0 100644 --- a/packages/react-emotion/test/__snapshots__/index.test.js.snap +++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap @@ -447,6 +447,31 @@ exports[`styled no prop filtering on non string tags 1`] = ` </a> `; +exports[`styled null interpolation value 1`] = ` +.glamor-0 { + color: blue; + font-size: 20; +} + +@media (min-width:520px) { + .glamor-0 { + color: green; + } +} + +@media (min-width:420px) { + .glamor-0 { + color: blue; + } +} + +<h1 + className="glamor-0" +> + hello world +</h1> +`; + exports[`styled object as style 1`] = ` .glamor-0 { font-size: 20px; diff --git a/packages/react-emotion/test/index.test.js b/packages/react-emotion/test/index.test.js index 2615d0ac5..d42e46bd6 100644 --- a/packages/react-emotion/test/index.test.js +++ b/packages/react-emotion/test/index.test.js @@ -35,6 +35,24 @@ describe('styled', () => { expect(tree).toMatchSnapshot() }) + test('null interpolation value', () => { + const fontSize = 20 + const H1 = styled.h1` + color: blue; + font-size: ${fontSize}; + @media (min-width: 420px) { + color: blue; + @media (min-width: 520px) { + color: green; + } + } + ` + + const tree = renderer.create(<H1>hello world</H1>).toJSON() + + expect(tree).toMatchSnapshot() + }) + test('basic render with object as style', () => { const fontSize = 20 const H1 = styled.h1({ fontSize }) From 60d57fdce74352a35045d38f815e236568fae6c9 Mon Sep 17 00:00:00 2001 From: Kye Hohenberger <kye@sideway.com> Date: Wed, 27 Sep 2017 11:35:45 -0600 Subject: [PATCH 2/2] Update snapshots --- packages/emotion/test/__snapshots__/css.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap index ce1d78da2..6740c5018 100644 --- a/packages/emotion/test/__snapshots__/css.test.js.snap +++ b/packages/emotion/test/__snapshots__/css.test.js.snap @@ -407,7 +407,7 @@ exports[`css null value 1`] = ` exports[`css null value 2`] = ` <div - className="css-0" + className="css-1xdhyk6" /> `;