Move theme from context to style props

Author: lttb

README.md

@@ -56,21 +56,21 @@ const ButtonContainer = styled(Container)({
 import {ThemeProvider} from 'theming'
 import styled from 'styled-jss'
 
-const theme = {
+const Button = styled('button')(({theme}) => ({
+  color: theme.color,
+  'background-color': theme.backgroundColor,
+  margin: props.margin,
+}))
+
+const currentTheme = {
   primary: {
     color: 'black',
     backgroundColor: 'yellow',
   },
 }
 
-const Button = styled('button')((props, {theme}) => ({
-  color: theme.color,
-  'background-color': theme.backgroundColor,
-  margin: props.margin,
-}))
-
 const App = () => (
-  <ThemeProvider>
+  <ThemeProvider theme={currentTheme}>
     <Button margin={20}>This is themed Button</Button>
   </ThemeProvider>
 )

package.json

@@ -41,8 +41,8 @@
     "deep-extend": "^0.5.0",
     "is-observable": "^0.2.0",
     "is-react-prop": "^1.0.0",
-    "jss": "^9.5.1",
-    "jss-preset-default": "^4.0.0",
+    "jss": "^9.8.0",
+    "jss-preset-default": "^4.3.0",
     "theming": "^1.3.0"
   },
   "peerDependencies": {

src/errors/index.js

@@ -7,8 +7,6 @@ import composeClasses from './utils/composeClasses'
 import generateTagName from './utils/generateTagName'
 import getSeparatedStyles from './utils/getSeparatedStyles'
 
-import StyledJssError from './errors'
-
 import type {
   JssSheet,
   TagNameOrStyledElementType,
@@ -110,7 +108,7 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
 
     componentDidMount() {
       if (this.state.theme) {
-        this.unsubscribe = themeListener.subscribe(this.context, this.setTheme)
+        this.subscriptionId = themeListener.subscribe(this.context, this.setTheme)
       }
     }
 
@@ -121,39 +119,35 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
     componentWillUnmount() {
       availableDynamicTagNames.push(this.dynamicTagName)
 
-      if (typeof this.unsubscribe === 'function') this.unsubscribe()
+      if (this.subscriptionId) {
+        themeListener.unsubscribe(this.context, this.subscriptionId)
+      }
     }
 
     setTheme = (theme: Object) => this.setState({theme})
 
     dynamicTagName = ''
     sheet: JssSheet
     staticClassName = ''
-    unsubscribe: ?Function
+    subscriptionId: ?number
 
-    updateSheet(props: StyledElementPropsType, {theme}: StateType) {
+    updateSheet(props: StyledElementPropsType, state: StateType) {
       let rule
       let ruleIndex = 0
 
+      const styleProps = state.theme
+        ? Object.assign({}, state, props)
+        : props
+
       // nested styles become to flatten rules, so we need to update each nested rule
       for (ruleIndex; ruleIndex < classMap[this.dynamicTagName].length; ruleIndex++) {
         rule = classMap[this.dynamicTagName][ruleIndex]
 
         if (isFunctionStyle) {
-          const context = {theme}
-
-          if (process.env.NODE_ENV !== 'production' && !context.theme) {
-            Object.defineProperty(context, 'theme', ({
-              get: () => {
-                throw new StyledJssError('You should wrap your Application by ThemeProvider to use theme')
-              }
-            }: Object))
-          }
-
-          this.sheet.update(rule.key, {props, context})
+          this.sheet.update(rule.key, styleProps)
         }
         else {
-          this.sheet.update(rule.key, props)
+          this.sheet.update(rule.key, styleProps)
         }
       }
     }

src/styled.js

@@ -129,6 +129,30 @@ exports[`functional tests composable styles should merge all object styles 1`] =
 }"
 `;
 
+exports[`functional tests composable styles should merge and compose all styles 1`] = `
+".button-1-id {
+  margin: 20px;
+  padding: 20px;
+}
+.button-2-id {
+  border-radius: 100%;
+  color: red;
+  background-color: green;
+}"
+`;
+
+exports[`functional tests composable styles should merge and compose all styles 2`] = `
+".button-1-id {
+  margin: 20px;
+  padding: 20px;
+}
+.button-2-id {
+  border-radius: 100%;
+  color: black;
+  background-color: white;
+}"
+`;
+
 exports[`functional tests should update dynamic props for conditional rules 1`] = `
 ".button-1-id {
   padding: 10px;
@@ -301,8 +325,6 @@ exports[`functional tests should use props on remount 2`] = `
 }"
 `;
 
-exports[`functional tests theming should throw an exception without ThemeProvider 1`] = `[StyledJssError: You should wrap your Application by ThemeProvider to use theme]`;
-
 exports[`functional tests theming should update theme 1`] = `
 ".button-1-id {
   color: green;

src/tests/__snapshots__/functional.spec.jsx.snap

@@ -304,10 +304,7 @@ describe('functional tests', () => {
       wrapper.unmount()
     })
 
-    /**
-     * TODO (@lttb): it looks like jss keeps previous props for function rules
-     */
-    it.skip('should merge and compose all styles', () => {
+    it('should merge and compose all styles', () => {
       const round = props => props.round && ({
         'border-radius': '100%'
       })
@@ -349,7 +346,7 @@ describe('functional tests', () => {
         }
       }
 
-      const Button = styled('button')((_, {theme}) => ({
+      const Button = styled('button')(({theme}) => ({
         color: theme.color.primary,
         'background-color': theme.color.secondary,
       }))
@@ -374,7 +371,7 @@ describe('functional tests', () => {
         }
       }
 
-      const Button = styled('button')((_, {theme}) => ({
+      const Button = styled('button')(({theme}) => ({
         color: theme.color.primary,
         'background-color': theme.color.secondary,
       }))
@@ -416,7 +413,7 @@ describe('functional tests', () => {
         }
       }]
 
-      const Button = styled('button')((_, {theme}) => ({
+      const Button = styled('button')(({theme}) => ({
         color: theme.color.primary,
         'background-color': theme.color.secondary,
       }))
@@ -439,25 +436,5 @@ describe('functional tests', () => {
 
       wrapper.unmount()
     })
-
-    it('should throw an exception without ThemeProvider', () => {
-      const Button = styled('button')((_, {theme}) => ({
-        color: theme.color.primary,
-        'background-color': theme.color.secondary,
-      }))
-
-      try {
-        /** @see https://github.com/facebook/react/issues/11098 */
-        // $FlowIgnore
-        console.error = () => {}
-
-        mount(
-          <Button />
-        )
-      }
-      catch (e) {
-        expect(e).toMatchSnapshot()
-      }
-    })
   })
 })

src/tests/functional.spec.jsx

@@ -2,10 +2,8 @@ export type JssStyles = Object
 export type JssStyle = Object
 export type JssSheet = Object
 
-export type contextType = Object
-
 export type BaseStylesType = JssStyles
-export type ComponentStyleType = JssStyle | (props: Object, context: contextType) => ?JssStyle
+export type ComponentStyleType = JssStyle | (props: Object) => ?JssStyle
 export type StyledType = Function & {
   mountSheet: Function,
   styles: JssStyles

src/types/index.js

@@ -47,11 +47,11 @@ const getSeparatedStyles = (...initialStyles: ComponentStyleType[]): separatedSt
   if (fns.length) {
     const {dynamicStyle} = result
 
-    result.dynamicStyle = ({props, context}) => {
+    result.dynamicStyle = (props) => {
       const fnObjects = []
 
       for (let i = 0; i < fns.length; i++) {
-        fnObjects.push(fns[i](props, context))
+        fnObjects.push(fns[i](props))
       }
 
       return Object.assign({}, dynamicStyle, ...fnObjects)

src/utils/getSeparatedStyles.js

@@ -2260,6 +2260,10 @@ https-proxy-agent@^1.0.0:
     debug "2"
     extend "3"
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
 iconv-lite@0.4.13, iconv-lite@~0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
@@ -2991,33 +2995,30 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
-jss-camel-case@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.0.0.tgz#7cf8453e395c31fed931d11efbc885edcd61132e"
+jss-camel-case@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
 
 jss-compose@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484"
   dependencies:
     warning "^3.0.0"
 
-jss-default-unit@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.0.tgz#a308ead4f587ebe17cc845f9870867400de90910"
-  dependencies:
-    is-observable "^0.2.0"
+jss-default-unit@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
 
-jss-expand@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.0.0.tgz#8eadb782f29ec5f1d285451dd38052d5ac51644a"
-  dependencies:
-    is-observable "^0.2.0"
+jss-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.1.0.tgz#b1ad74ec18631f34f65a2124fcfceb6400610e3d"
 
-jss-extend@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.0.1.tgz#e53430bc92a42e50d036883ccfecfbc4e1199147"
+jss-extend@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc"
   dependencies:
-    is-observable "^0.2.0"
     warning "^3.0.0"
 
 jss-global@^3.0.0:
@@ -3030,28 +3031,28 @@ jss-nested@^6.0.1:
   dependencies:
     warning "^3.0.0"
 
-jss-preset-default@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.0.1.tgz#822cecb87c27ff91633774422f4c221d61486b65"
+jss-preset-default@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.3.0.tgz#7bc91b0b282492557d36ed4e5c6d7c8cb3154bb8"
   dependencies:
-    jss-camel-case "^6.0.0"
+    jss-camel-case "^6.1.0"
     jss-compose "^5.0.0"
-    jss-default-unit "^8.0.0"
-    jss-expand "^5.0.0"
-    jss-extend "^6.0.1"
+    jss-default-unit "^8.0.2"
+    jss-expand "^5.1.0"
+    jss-extend "^6.2.0"
     jss-global "^3.0.0"
     jss-nested "^6.0.1"
     jss-props-sort "^6.0.0"
-    jss-template "^1.0.0"
+    jss-template "^1.0.1"
     jss-vendor-prefixer "^7.0.0"
 
 jss-props-sort@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
 
-jss-template@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.0.tgz#4b874608706ddceecacdb5567e254aecb6ea69b3"
+jss-template@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
   dependencies:
     warning "^3.0.0"
 
@@ -3061,9 +3062,9 @@ jss-vendor-prefixer@^7.0.0:
   dependencies:
     css-vendor "^0.3.8"
 
-jss@^9.5.1:
-  version "9.5.1"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-9.5.1.tgz#c869f38cdc44a32f4425fe007ea46b8891536326"
+jss@^9.8.0:
+  version "9.8.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.0.tgz#77830def563870103f8671ed31ce3a3d2f32aa2b"
   dependencies:
     is-in-browser "^1.1.3"
     symbol-observable "^1.1.0"