From 140d4dbcf1e77b8587c63f2b61ef36efa4827b3b Mon Sep 17 00:00:00 2001 From: atanasster Date: Sun, 13 Dec 2020 23:40:25 -0500 Subject: [PATCH 1/6] chore: replace emotion/styled with emotion/css --- packages/components/src/Box.js | 76 +++++++++++++++++++++++----------- 1 file changed, 51 insertions(+), 25 deletions(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index c4c0c0bfa..1201a096a 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -1,33 +1,59 @@ -import styled from '@emotion/styled' +/** @jsx jsx */ +import { jsx, useTheme } from '@emotion/react' +import React from 'react' import { css, get } from '@theme-ui/css' -import { createShouldForwardProp } from '@styled-system/should-forward-prop' import space from '@styled-system/space' import color from '@styled-system/color' -const shouldForwardProp = createShouldForwardProp([ - ...space.propNames, - ...color.propNames, -]) +const internalProps = [...space.propNames, ...color.propNames] -const sx = props => css(props.sx)(props.theme) -const base = props => css(props.__css)(props.theme) -const variant = ({ theme, variant, __themeKey = 'variants' }) => - css(get(theme, __themeKey + '.' + variant, get(theme, variant))) +const sx = (props) => css(props.sx)(props.theme) +const base = (props) => css(props.__css)(props.theme) +const variant = ({ theme, variant, __themeKey = 'variants' }) => { + return css(get(theme, __themeKey + '.' + variant, get(theme, variant)))(theme) +} -export const Box = styled('div', { - shouldForwardProp, -})( - { - boxSizing: 'border-box', - margin: 0, - minWidth: 0, - }, - base, - variant, - space, - color, - sx, - props => props.css -) +const objToArray = (obj) => + obj ? Object.keys(obj).map((key) => ({ [key]: obj[key] })) : [] + +const mergeProps = (props, initial, ...args) => { + return args.reduce( + (acc, fn) => [...acc, ...objToArray(fn(props))], + objToArray(initial) + ) +} +export const Box = React.forwardRef((props, ref) => { + const theme = useTheme() + const { + variant: variantProp, + __themeKey = 'variants', + __css, + css: cssProp, + sx: sxProp, + as: Component = 'div', + ...rest + } = props + const style = mergeProps( + { theme, ...props }, + { + boxSizing: 'border-box', + margin: 0, + minWidth: 0, + }, + base, + variant, + space, + color, + sx, + () => cssProp + ) + internalProps.forEach((name) => { + delete rest[name] + }) + return +}) +Box.withComponent = (component) => ({ as, ...props }) => ( + +) export default Box From e3217f2f28faa394ee1c8f7a8c80602dc7bdb8ae Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 14 Dec 2020 00:02:24 -0500 Subject: [PATCH 2/6] update fuction name for devtools --- packages/components/src/Box.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 1201a096a..531fc854f 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -22,7 +22,7 @@ const mergeProps = (props, initial, ...args) => { objToArray(initial) ) } -export const Box = React.forwardRef((props, ref) => { +export const Box = React.forwardRef(function Box(props, ref) { const theme = useTheme() const { variant: variantProp, From a42cda30fd989608fd2ca381413a7c25bae05cc4 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 14 Dec 2020 00:04:37 -0500 Subject: [PATCH 3/6] remove React import for forwardRef --- packages/components/src/Box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 531fc854f..05786fe9d 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -1,6 +1,6 @@ /** @jsx jsx */ import { jsx, useTheme } from '@emotion/react' -import React from 'react' +import { forwardRef } from 'react' import { css, get } from '@theme-ui/css' import space from '@styled-system/space' import color from '@styled-system/color' @@ -22,7 +22,7 @@ const mergeProps = (props, initial, ...args) => { objToArray(initial) ) } -export const Box = React.forwardRef(function Box(props, ref) { +export const Box = forwardRef(function Box(props, ref) { const theme = useTheme() const { variant: variantProp, From 50c4e388a14597928ab3c556ca276c44eac80cf6 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 14 Dec 2020 13:39:27 -0500 Subject: [PATCH 4/6] chore: remove @emotion/styled from components deps --- packages/components/package.json | 2 - yarn.lock | 106 +------------------------------ 2 files changed, 1 insertion(+), 107 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 7bdf850dc..e857eff1d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -12,9 +12,7 @@ }, "dependencies": { "@emotion/react": "^11.1.1", - "@emotion/styled": "^11.0.0", "@styled-system/color": "^5.1.2", - "@styled-system/should-forward-prop": "^5.1.2", "@styled-system/space": "^5.1.2", "@theme-ui/css": "0.6.0-alpha.1", "@types/styled-system": "^5.1.10" diff --git a/yarn.lock b/yarn.lock index 41d068386..ec22a1e25 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1198,13 +1198,6 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@^0.8.1": - version "0.8.8" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" - integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== - dependencies: - "@emotion/memoize" "0.7.4" - "@emotion/is-prop-valid@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz#1dbe82e52a12c065d416a702e2d106e552cde5be" @@ -1223,7 +1216,7 @@ specificity "^0.4.1" stylis "^4.0.3" -"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.1", "@emotion/memoize@^0.7.4": +"@emotion/memoize@^0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== @@ -2783,20 +2776,6 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@styled-system/background@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba" - integrity sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/border@^5.1.5": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6" - integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A== - dependencies: - "@styled-system/core" "^5.1.2" - "@styled-system/color@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.1.2.tgz#b8d6b4af481faabe4abca1a60f8daa4ccc2d9f43" @@ -2811,55 +2790,6 @@ dependencies: object-assign "^4.1.1" -"@styled-system/css@^5.1.5": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc" - integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A== - -"@styled-system/flexbox@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.1.2.tgz#077090f43f61c3852df63da24e4108087a8beecf" - integrity sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/grid@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/grid/-/grid-5.1.2.tgz#7165049877732900b99cd00759679fbe45c6c573" - integrity sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/layout@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/layout/-/layout-5.1.2.tgz#12d73e79887e10062f4dbbbc2067462eace42339" - integrity sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/position@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/position/-/position-5.1.2.tgz#56961266566836f57a24d8e8e33ce0c1adb59dd3" - integrity sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/shadow@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/shadow/-/shadow-5.1.2.tgz#beddab28d7de03cd0177a87ac4ed3b3b6d9831fd" - integrity sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/should-forward-prop@^5.1.2": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76" - integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q== - dependencies: - "@emotion/is-prop-valid" "^0.8.1" - "@emotion/memoize" "^0.7.1" - styled-system "^5.1.5" - "@styled-system/space@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.1.2.tgz#38925d2fa29a41c0eb20e65b7c3efb6e8efce953" @@ -2867,21 +2797,6 @@ dependencies: "@styled-system/core" "^5.1.2" -"@styled-system/typography@^5.1.2": - version "5.1.2" - resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.1.2.tgz#65fb791c67d50cd2900d234583eaacdca8c134f7" - integrity sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg== - dependencies: - "@styled-system/core" "^5.1.2" - -"@styled-system/variant@^5.1.5": - version "5.1.5" - resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd" - integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw== - dependencies: - "@styled-system/core" "^5.1.2" - "@styled-system/css" "^5.1.5" - "@szmarczak/http-timer@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421" @@ -17671,25 +17586,6 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-system@^5.1.5: - version "5.1.5" - resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e" - integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A== - dependencies: - "@styled-system/background" "^5.1.2" - "@styled-system/border" "^5.1.5" - "@styled-system/color" "^5.1.2" - "@styled-system/core" "^5.1.2" - "@styled-system/flexbox" "^5.1.2" - "@styled-system/grid" "^5.1.2" - "@styled-system/layout" "^5.1.2" - "@styled-system/position" "^5.1.2" - "@styled-system/shadow" "^5.1.2" - "@styled-system/space" "^5.1.2" - "@styled-system/typography" "^5.1.2" - "@styled-system/variant" "^5.1.5" - object-assign "^4.1.1" - stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" From 4852c8f49e6f1eb833279bebee7ec209ed17fd80 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 14 Dec 2020 14:02:21 -0500 Subject: [PATCH 5/6] fix: code simplification --- packages/components/src/Box.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index b719df38e..45c66c445 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -14,9 +14,8 @@ export const __isBoxStyledSystemProp = (prop) => boxSystemProps.includes(prop) const sx = (props) => css(props.sx)(props.theme) const base = (props) => css(props.__css)(props.theme) -const variant = ({ theme, variant, __themeKey = 'variants' }) => { - return css(get(theme, __themeKey + '.' + variant, get(theme, variant)))(theme) -} +const variant = ({ theme, variant, __themeKey = 'variants' }) => + css(get(theme, __themeKey + '.' + variant, get(theme, variant)))(theme) const objToArray = (obj) => obj ? Object.keys(obj).map((key) => ({ [key]: obj[key] })) : [] From 98ed236613043d751d90db0b2aba973b55ee0f05 Mon Sep 17 00:00:00 2001 From: Atanas Stoyanov Date: Tue, 5 Jan 2021 11:37:59 -0500 Subject: [PATCH 6/6] Update packages/components/src/Box.js great! Co-authored-by: Lachlan Campbell --- packages/components/src/Box.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js index 45c66c445..b020b2993 100644 --- a/packages/components/src/Box.js +++ b/packages/components/src/Box.js @@ -57,7 +57,8 @@ export const Box = forwardRef(function Box(props, ref) { return }) -Box.withComponent = (component) => ({ as, ...props }) => ( - -) +Box.withComponent = (component) => ({ as, ...props }) => { + console.warn('[theme-ui] You’re using the `.withComponent` API on a Theme UI component. This API will be deprecated in the next version; pass the `as` prop instead.') + return +} export default Box