Merge pull request #30 from quarkly/fix/theme-props

fix: theme props
quarkly · May 27, 2021 · 635d243 · 635d243
2 parents f1f901e + 4588e6b
commit 635d243
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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"
+      />
+    `);
+  });
 });