fix: pass atomize props to component

src/atomic-styles/index.js

@@ -14,6 +14,7 @@ export const makeComponent = (styled, tag, styles, config, other) => {
   const defaultProps = isPlainObject(other) ? other : undefined;
   const rulesCreator = bootstrap(config, defaultProps);
   const rules = isArray(other) ? other : [];
+  const cleanProps = typeof tag === 'string';
 
   const Component = normalize(
     styled(tag).withConfig({
@@ -23,6 +24,7 @@ export const makeComponent = (styled, tag, styles, config, other) => {
       return cssObject;
     }),
     rulesCreator,
+    cleanProps,
   );
 
   if (config.name) {

src/utils/normalize-props.js

@@ -20,12 +20,12 @@ export const normalizer = props => {
   }, {});
 };
 
-export default (Tag, cb) =>
+export default (Tag, cb, cleanProps) =>
   React.forwardRef((props, ref) => {
     const { cssObject, cleanedProps } = cb(props);
     return React.createElement(Tag, {
       ref,
-      ...normalizer(cleanedProps),
+      ...normalizer(cleanProps ? cleanedProps : props),
       cssObject,
     });
   });

test/sc-integration/clear-props.test.js

@@ -8,6 +8,14 @@ const Element = atomize('div')({
   aliases: true,
 });
 
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Child = props => <div {...props} />;
+
+const ElementWithComponent = atomize(Child)({
+  effects: { hover: ':hover' },
+  aliases: true,
+});
+
 describe('atomize filter props keys', () => {
   test('filter', () => {
     const tree = renderer.create(<Element color="red" />).toJSON();
@@ -47,4 +55,18 @@ describe('atomize filter props keys', () => {
       />
     `);
   });
+  test('pass to fn children', () => {
+    const tree = renderer.create(<ElementWithComponent color="red" color_passed="red" />).toJSON();
+    expect(tree).toMatchInlineSnapshot(`
+      .c0 {
+        color: red;
+      }
+
+      <div
+        className="c0"
+        color="red"
+        color_passed="red"
+      />
+    `);
+  });
 });