fix: fix internal theme usage

It fixes a bug with custom texts defined in theme.

Author: gregberge

package.json

@@ -25,49 +25,49 @@
     }
   ],
   "devDependencies": {
-    "@babel/cli": "^7.6.0",
-    "@babel/core": "^7.6.0",
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
     "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
-    "@babel/plugin-transform-runtime": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "@emotion/core": "^10.0.17",
-    "@emotion/styled": "^10.0.17",
-    "@xstyled/emotion": "^1.11.0",
-    "@xstyled/styled-components": "^1.11.0",
-    "@xstyled/system": "^1.11.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.7.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
+    "@xstyled/emotion": "^1.15.0",
+    "@xstyled/styled-components": "^1.15.0",
+    "@xstyled/system": "^1.14.0",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
-    "babel-plugin-emotion": "^10.0.19",
+    "babel-plugin-emotion": "^10.0.23",
     "babel-plugin-styled-components": "^1.10.6",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "bundlesize": "^0.18.0",
     "conventional-github-releaser": "^3.1.3",
-    "cross-env": "^6.0.0",
+    "cross-env": "^6.0.3",
     "emotion-theming": "^10.0.19",
-    "eslint": "^6.4.0",
+    "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.3.0",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.0.1",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "jest": "^24.8.0",
-    "lerna": "^3.16.4",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "reakit": "^1.0.0-beta.7",
-    "rollup": "^1.21.4",
+    "lerna": "^3.19.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "reakit": "^1.0.0-beta.12",
+    "rollup": "^1.27.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.2",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-size-snapshot": "^0.10.0",
     "rollup-plugin-terser": "^5.1.2",
     "shx": "^0.3.2",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.4.1"
   }
 }

packages/core-em/package.json

@@ -24,10 +24,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.0",
-    "@xstyled/emotion": "^1.11.0",
-    "@xstyled/util": "^1.11.0",
-    "polished": "^3.4.1",
+    "@babel/runtime": "^7.7.2",
+    "@xstyled/emotion": "^1.15.0",
+    "@xstyled/util": "^1.14.0",
+    "polished": "^3.4.2",
     "prop-desc": "^1.0.0",
     "prop-types": "^15.7.2",
     "react-flatten-children": "^1.0.0",

packages/core-sc/package.json

@@ -24,10 +24,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.0",
-    "@xstyled/styled-components": "^1.11.0",
-    "@xstyled/util": "^1.11.0",
-    "polished": "^3.4.1",
+    "@babel/runtime": "^7.7.2",
+    "@xstyled/styled-components": "^1.15.0",
+    "@xstyled/util": "^1.14.0",
+    "polished": "^3.4.2",
     "prop-desc": "^1.0.0",
     "prop-types": "^15.7.2",
     "react-flatten-children": "^1.0.0",
@@ -41,6 +41,6 @@
   },
   "devDependencies": {
     "@xstyled/styled-components": "^1.10.0",
-    "@xstyled/system": "^1.11.0"
+    "@xstyled/system": "^1.14.0"
   }
 }

packages/shared/core/util/factories.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from '@xstyled/x'
+import styled, { useTheme } from '@xstyled/x'
 import { omit } from '@xstyled/util'
 import { systemProps } from './system'
 import { mergeClone } from './misc'
@@ -21,18 +21,9 @@ function getThemeCache(theme) {
   return cache
 }
 
-export function createInnerComponent({ name, render, theme = {} }) {
-  const InnerComponent = React.forwardRef(function InnerComponent(props, ref) {
-    const { as, safeProps } = useProps(props)
-    return render({ ref, as, ...safeProps }, { theme, ...props })
-  })
-  InnerComponent.displayName = name
-  return InnerComponent
-}
-
 function computeTheme(baseTheme, customTheme) {
   const theme = mergeClone(baseTheme, customTheme)
-  if (!theme.colors || !theme.colors.modes) return baseTheme
+  if (!theme.colors || !theme.colors.modes) return theme
   return {
     ...theme,
     colors: {
@@ -42,17 +33,40 @@ function computeTheme(baseTheme, customTheme) {
   }
 }
 
-export function createComponent({ name, render, theme = {}, propTypes }) {
-  theme = Array.isArray(theme) ? mergeClone(...theme) : theme
-  const InnerComponent = createInnerComponent({ name, render, theme })
+function getTheme(name, baseTheme, customTheme) {
+  const themeCache = getThemeCache(customTheme)
+  themeCache[name] = themeCache[name] || computeTheme(baseTheme, customTheme)
+  return themeCache[name]
+}
+
+export function createInnerComponent({ name, render, theme: baseTheme = {} }) {
+  const InnerComponent = React.forwardRef(function InnerComponent(props, ref) {
+    const customTheme = useTheme()
+    const theme = getTheme(name, baseTheme, customTheme)
+    const { as, safeProps } = useProps(props)
+    return render({ ref, as, ...safeProps }, { theme, ...props })
+  })
+  InnerComponent.displayName = name
+  return InnerComponent
+}
+
+export function createComponent({
+  name,
+  render,
+  theme: themeArg = {},
+  propTypes,
+}) {
+  const baseTheme = Array.isArray(themeArg) ? mergeClone(...themeArg) : themeArg
+  const InnerComponent = createInnerComponent({
+    name,
+    render,
+    theme: baseTheme,
+  })
   const Component = styled(InnerComponent)`
     ${p => {
-      const cache = getThemeCache(p.theme)
-      cache[name] = cache[name] || computeTheme(theme, p.theme)
-      const props = { ...p, theme: cache[name] }
-      const componentStyle = props.theme.components
-        ? props.theme.components[name]
-        : null
+      const theme = getTheme(name, baseTheme, p.theme)
+      const props = { ...p, theme }
+      const componentStyle = theme.components ? theme.components[name] : null
       return componentStyle ? componentStyle(props) : null
     }}
   `

website/package.json

@@ -7,20 +7,20 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@bundle-analyzer/gatsby-plugin": "^0.4.0",
-    "@emotion/core": "^10.0.17",
-    "@emotion/styled": "^10.0.17",
+    "@bundle-analyzer/gatsby-plugin": "^0.5.1",
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
     "@smooth-ui/core-sc": "^10.1.0",
     "emotion-theming": "^10.0.19",
-    "gatsby": "^2.15.19",
-    "gatsby-plugin-layout": "^1.1.8",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "reakit": "^1.0.0-beta.7",
+    "gatsby": "^2.18.2",
+    "gatsby-plugin-layout": "^1.1.15",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "reakit": "^1.0.0-beta.12",
     "smooth-code-landers": "^1.3.2",
-    "smooth-doc": "^2.12.3",
+    "smooth-doc": "^2.14.2",
     "smooth-ui-em-next": "npm:@smooth-ui/core-em@canary",
     "smooth-ui-sc-next": "npm:@smooth-ui/core-sc@canary",
-    "styled-components": "^4.2.0"
+    "styled-components": "^4.4.1"
   }
 }