Remove false props before generating styles

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 () {

src/utils/removeFalseProps.js

@@ -0,0 +1,12 @@
+export default function removeFalseProps (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, removeFalseProps(value)]
+          : [key, value]
+      })
+  )
+}

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,
+    })
+  })
+})