Fix children not rendering

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dye",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A simple way to add CSS classes to React components.",
   "main": "dist/index.js",
   "module": "dist/react-dye.esm.js",

src/index.tsx

@@ -28,18 +28,18 @@ interface BasicProps {
 }
 
 function dye<P extends BasicProps>(
-  cssClasses: string | ((props: object) => string),
+  cssClasses: string | ((props: any) => string),
   Component: string | React.ComponentType<P> = 'div',
   ...styleProps: string[]
 ): React.ComponentType<any> {
   const StyledComponent = (props: P) => {
     let newClassName: string = isFunction(cssClasses) ? (cssClasses as Function)(props) : cssClasses
     if (props.className) newClassName += ` ${props.className}`
-    props = {
+    const newProps = {
       ...omit(['children', ...styleProps], props) as P,
       className: newClassName
     }
-    return React.createElement(Component, props, props.children)
+    return React.createElement(Component, newProps, props.children)
   }
   return StyledComponent
 }

test/dye.test.tsx

@@ -17,44 +17,49 @@ test('adds classNames to component', () => {
   )
 })
 
-// test('uses div as default component', () => {
-//   const Styled = dye('foo bar')
-//   compare(<Styled color="red" />, <div color="red" className="foo bar" />)
-// })
-
-// test('generates classNames based on props', () => {
-//   const Styled = dye(({ color }: { color: string }) => `foo ${color || 'blue'}`)
-//   compare(<Styled color="red" />, <div color="red" className="foo red" />)
-//   compare(<Styled />, <div className="foo blue" />)
-//   compare(<Styled id="test" />, <div id="test" className="foo blue" />)
-// })
-
-// test('can omit some props', () => {
-//   const Styled = dye(({ color }: { color: string }) => `foo ${color || 'blue'}`, 'button', 'color')
-//   compare(<Styled color="red" />, <button className="foo red" />)
-//   compare(<Styled />, <button className="foo blue" />)
-//   compare(
-//     <Styled color="green" id="test" />,
-//     <button id="test" className="foo green" />
-//   )
-// })
-
-// test('can be composed', () => {
-//   const Link = dye(({ size }: { size: string }) => `no-underline text-${size || 'md'}`, 'a', 'size')
-//   const BoxLink = dye(
-//     ({ color }: { color: string }) => `inline-block bg-${color || 'blue'}`,
-//     Link,
-//     'color'
-//   )
-//   compare(
-//     <BoxLink size="sm" color="green" href="#" alt="..." />,
-//     <a
-//       href="#"
-//       className="no-underline text-sm inline-block bg-green"
-//     />
-//   )
-//   compare(
-//     <BoxLink href="#" />,
-//     <a href="#" className="no-underline text-md inline-block bg-blue" />
-//   )
-// })
+test('renders children', () => {
+  const Styled = dye('foo')
+  compare(<Styled><p>Yo</p></Styled>, <div className="foo"><p>Yo</p></div>)
+})
+
+test('uses div as default component', () => {
+  const Styled = dye('foo bar')
+  compare(<Styled color="red" />, <div color="red" className="foo bar" />)
+})
+
+test('generates classNames based on props', () => {
+  const Styled = dye(({ color }: any) => `foo ${color || 'blue'}`)
+  compare(<Styled color="red" />, <div color="red" className="foo red" />)
+  compare(<Styled />, <div className="foo blue" />)
+  compare(<Styled id="test" />, <div id="test" className="foo blue" />)
+})
+
+test('can omit some props', () => {
+  const Styled = dye(({ color }: any) => `foo ${color || 'blue'}`, 'button', 'color')
+  compare(<Styled color="red" />, <button className="foo red" />)
+  compare(<Styled />, <button className="foo blue" />)
+  compare(
+    <Styled color="green" id="test" />,
+    <button id="test" className="foo green" />
+  )
+})
+
+test('can be composed', () => {
+  const Link = dye(({ size }: any) => `no-underline text-${size || 'md'}`, 'a', 'size')
+  const BoxLink = dye(
+    ({ color }: any) => `inline-block bg-${color || 'blue'}`,
+    Link,
+    'color'
+  )
+  compare(
+    <BoxLink size="sm" color="green" href="#" />,
+    <a
+      href="#"
+      className="no-underline text-sm inline-block bg-green"
+    />
+  )
+  compare(
+    <BoxLink href="#" />,
+    <a href="#" className="no-underline text-md inline-block bg-blue" />
+  )
+})