From 2f2dd7b79b06d2cc782b146051baf1096c10316b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= <andre@andreruffert.com>
Date: Fri, 26 Jun 2020 02:09:13 +0200
Subject: [PATCH 1/3] chore: introduce `removeFalseProps()` utility

---
 src/utils/removeFalseProps.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/utils/removeFalseProps.js

diff --git a/src/utils/removeFalseProps.js b/src/utils/removeFalseProps.js
new file mode 100644
index 0000000..81bbe97
--- /dev/null
+++ b/src/utils/removeFalseProps.js
@@ -0,0 +1,12 @@
+export default function removeFalseyProps (props = {}) {
+  return Object.fromEntries(
+    Object.entries(props)
+      // Remove entries with `undefined`, `null` or `false` values.
+      .filter(([key, value]) => (value === 0 || Boolean(value)))
+      .map(([key, value]) => {
+        return (typeof value === 'object')
+          ? [key, removeFalseyProps(value)]
+          : [key, value]
+      })
+  )
+}

From 62524dd9a4a682635afd58c3a376c037aced7689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= <andre@andreruffert.com>
Date: Fri, 26 Jun 2020 02:19:49 +0200
Subject: [PATCH 2/3] feat: filter false props before generating styles

Prevents generating `undefined` style properties e.g

`{ fontSize: '16px', fontFamily: undefined }`

The above props would generate the following styles:

```
font-size: 16px;
font-family: undefined;
```

The new feature is filtering false props before generating and injecting the styles. The new styles now look something like this:

```
font-size: 16px;
```

More details: https://github.com/styled-components/vue-styled-components/pull/102
---
 src/models/StyledComponent.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js
index a7d28a2..830fa57 100644
--- a/src/models/StyledComponent.js
+++ b/src/models/StyledComponent.js
@@ -1,5 +1,6 @@
 import css from '../constructors/css'
 import normalizeProps from '../utils/normalizeProps'
+import removeFalseProps from '../utils/removeFalseProps'
 import isVueComponent from '../utils/isVueComponent'
 
 export default (ComponentStyle) => {
@@ -68,7 +69,10 @@ export default (ComponentStyle) => {
       },
       computed: {
         generatedClassName () {
-          const componentProps = { theme: this.theme, ...this.$props }
+          const componentProps = {
+            theme: this.theme,
+            ...removeFalseProps(this.$props)
+          }
           return this.generateAndInjectStyles(componentProps)
         },
         theme () {

From b548e42e5a247817431346bf0f1db1d66747534a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ruffert?= <andre@andreruffert.com>
Date: Fri, 26 Jun 2020 02:20:25 +0200
Subject: [PATCH 3/3] test: removeFalseProps

---
 src/utils/test/removeFalseProps.test.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/utils/test/removeFalseProps.test.js

diff --git a/src/utils/test/removeFalseProps.test.js b/src/utils/test/removeFalseProps.test.js
new file mode 100644
index 0000000..7ebfc0b
--- /dev/null
+++ b/src/utils/test/removeFalseProps.test.js
@@ -0,0 +1,22 @@
+import expect from 'expect'
+import removeFalseProps from '../removeFalseProps'
+
+describe('removeFalseProps', () => {
+  it('removes entries with `undefined`, `null` or `false` values', () => {
+    expect(removeFalseProps({})).toEqual({})
+    expect(removeFalseProps({
+      prop1: undefined,
+      prop2: true,
+      prop3: 'string',
+      prop4: 0,
+      prop5: 1,
+      prop6: null,
+      prop7: false,
+    })).toEqual({
+      prop2: true,
+      prop3: 'string',
+      prop4: 0,
+      prop5: 1,
+    })
+  })
+})