From 4588e6b637f491d84d8533f33039ac5d14afd876 Mon Sep 17 00:00:00 2001
From: Eddort <webisforce@gmail.com>
Date: Thu, 27 May 2021 15:28:38 +0300
Subject: [PATCH] fix: theme props

---
 src/atomic-styles/index.js              |  5 ++-
 src/utils/normalize-props.js            |  4 +-
 test/sc-integration/clear-props.test.js | 55 +++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/atomic-styles/index.js b/src/atomic-styles/index.js
index 942d959..3fc0611 100644
--- a/src/atomic-styles/index.js
+++ b/src/atomic-styles/index.js
@@ -16,9 +16,12 @@ export const makeComponent = (styled, tag, styles, config, other) => {
   const rules = isArray(other) ? other : [];
   const cleanProps = typeof tag === 'string';
 
+  const denieList = ['cssObject'];
+  if (cleanProps) denieList.push('theme');
+
   const Component = normalize(
     styled(tag).withConfig({
-      shouldForwardProp: prop => !['cssObject'].includes(prop),
+      shouldForwardProp: prop => !denieList.includes(prop),
     })(rules, props => {
       const { cssObject } = props;
       return cssObject;
diff --git a/src/utils/normalize-props.js b/src/utils/normalize-props.js
index 18c4521..5af5f2a 100644
--- a/src/utils/normalize-props.js
+++ b/src/utils/normalize-props.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { isString, isObject } from 'lodash/fp';
+import { useTheme } from 'styled-components';
 
 const normalizeMap = {
   as(value) {
@@ -22,7 +23,8 @@ export const normalizer = props => {
 
 export default (Tag, cb, cleanProps) =>
   React.forwardRef((props, ref) => {
-    const { cssObject, cleanedProps } = cb(props);
+    const theme = useTheme(props);
+    const { cssObject, cleanedProps } = cb({ theme, ...props });
     return React.createElement(Tag, {
       ref,
       ...normalizer(cleanProps ? cleanedProps : props),
diff --git a/test/sc-integration/clear-props.test.js b/test/sc-integration/clear-props.test.js
index c263664..d86a736 100644
--- a/test/sc-integration/clear-props.test.js
+++ b/test/sc-integration/clear-props.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
+import { ThemeProvider } from 'styled-components';
 import atomize from '../../src';
 
 const Element = atomize('div')({
@@ -69,4 +70,58 @@ describe('atomize filter props keys', () => {
       />
     `);
   });
+  test('test props theme pass', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={{ breakpoints: { kek: [{ type: 'max-width', value: '1280' }] } }}>
+          <ElementWithComponent kek-color="blue" color="red" color_passed="red" />
+        </ThemeProvider>,
+      )
+      .toJSON();
+
+    expect(tree).toMatchInlineSnapshot(`
+      .c0 {
+        color: red;
+      }
+
+      @media (max-width:1280px) {
+        .c0 {
+          color: blue;
+        }
+      }
+
+      <div
+        className="c0"
+        color="red"
+        color_passed="red"
+        kek-color="blue"
+      />
+    `);
+  });
+  test('test props theme', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={{ breakpoints: { kek: [{ type: 'max-width', value: '1280' }] } }}>
+          <Element kek-color="blue" color="red" color_passed="red" />
+        </ThemeProvider>,
+      )
+      .toJSON();
+
+    expect(tree).toMatchInlineSnapshot(`
+      .c0 {
+        color: red;
+      }
+
+      @media (max-width:1280px) {
+        .c0 {
+          color: blue;
+        }
+      }
+
+      <div
+        className="c0"
+        color_passed="red"
+      />
+    `);
+  });
 });