Implement injectStyled

.babelrc

@@ -1,5 +1,6 @@
 {
   presets: [
+    'es2015',
     'react',
   ],
   plugins: [

.eslintrc

@@ -3,3 +3,6 @@ parser: babel-eslint
 
 env:
   jest: true
+
+globals:
+  ReactClass: true

README.md

@@ -31,16 +31,21 @@ const PrimaryButton = styled(Button, {
 Using base Style Sheet we can share classes between styled primitives.
 
 ```js
-import { Styled } from 'styled-jss'
-import injectSheet from 'react-jss'
+import { Styled, injectStyled } from 'styled-jss'
 
 // Base styles, like a regular jss object.
 const styled = Styled({
   root: {
-    margin: 10
+    margin: 10,
+    '& $baseButton': {
+      fontSize: 16
+    }
   },
   baseButton: {
-    padding: 10
+    padding: 10,
+    '& + &': {
+      marginLeft; 10
+    }
   }
 })
 
@@ -58,11 +63,12 @@ const PrimaryButton = styled(NormalButton, {
 // One can use classes AND styled primitives.
 const MyComponent = ({classes}) => (
   <div className={classes.root}>
+    <NormalButton>normal button</NormalButton>
     <PrimaryButton>primary button</PrimaryButton>
   </div>
 )
 
-const MyStyledComponent = injectSheet(styled.styles)(MyComponent)
+const MyStyledComponent = injectStyled(styled)(MyComponent)
 ```
 
 ### With custom JSS setup:

package.json

@@ -55,6 +55,7 @@
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.23.0",
     "eslint": "^3.13.0",
     "eslint-config-airbnb": "^14.1.0",

src/index.js

@@ -1,24 +1,37 @@
 import {PureComponent, createElement} from 'react'
 import {create as createJss, getDynamicStyles} from 'jss'
 import preset from 'jss-preset-default'
+
 import filterProps from './utils/filter-props'
+import composeClasses from './utils/compose-classes'
+import type {
+  styledType,
+  StyledElementAttrsType,
+  StyledElementType,
+  tagOrStyledElementTypeype,
+  StyledElementPropsType
+} from './types'
 
 const jssDefault = createJss(preset())
 
-type StyledElementAttrsType = { tag: string, styles: Object }
-type StyledElementType = Function & StyledElementAttrsType
-type tagOrStyledElementTypeype = string | StyledElementType
-type StyledElementPropsType = {
-  classes: Object,
-  children: ?any,
-  className: ?string,
-}
-
-const createStyled = (jss?: Function = jssDefault) => (baseStyles: Object = {}) => {
-  let sheet
-  let dynamicSheet
+const createStyled = (jss?: Function = jssDefault) => (baseStyles: Object = {}): styledType => {
+  const sheets = {}
   let counter = 0
 
+  const mountSheets = () => {
+    if (!sheets.staticSheet) {
+      sheets.staticSheet = jss.createStyleSheet(baseStyles, {
+        link: true,
+        meta: 'StaticBaseSheet',
+      }).attach()
+
+      sheets.dynamicSheet = jss.createStyleSheet({}, {
+        link: true,
+        meta: 'DynamicComponentSheet',
+      }).attach()
+    }
+  }
+
   const styled = (
     tagOrStyledElement: tagOrStyledElementTypeype,
     ownStyles: Object
@@ -46,27 +59,17 @@ const createStyled = (jss?: Function = jssDefault) => (baseStyles: Object = {})
       }
 
       componentWillMount() {
-        if (!sheet) {
-          sheet = jss.createStyleSheet(baseStyles, {
-            link: true,
-            meta: 'StaticBaseSheet',
-          }).attach()
-
-          dynamicSheet = jss.createStyleSheet({}, {
-            link: true,
-            meta: 'DynamicComponentSheet',
-          }).attach()
-        }
+        mountSheets()
 
-        if (!sheet.getRule(staticTag)) {
-          sheet.addRule(staticTag, elementStyles)
+        if (!sheets.staticSheet.getRule(staticTag)) {
+          sheets.staticSheet.addRule(staticTag, elementStyles)
         }
 
-        if (dynamicStyles && !dynamicSheet.getRule(this.tagScoped)) {
-          dynamicSheet
+        if (dynamicStyles && !sheets.dynamicSheet.getRule(this.tagScoped)) {
+          sheets.dynamicSheet
             .detach()
             .addRule(this.tagScoped, dynamicStyles)
-          dynamicSheet
+          sheets.dynamicSheet
             .update(this.tagScoped, this.props)
             .attach()
             .link()
@@ -75,34 +78,36 @@ const createStyled = (jss?: Function = jssDefault) => (baseStyles: Object = {})
 
       componentWillReceiveProps(nextProps: StyledElementPropsType) {
         if (dynamicStyles) {
-          dynamicSheet.update(this.tagScoped, nextProps)
+          sheets.dynamicSheet.update(this.tagScoped, nextProps)
         }
       }
 
       componentWillUnmount() {
-        dynamicSheet.deleteRule(this.tagScoped)
+        sheets.dynamicSheet.deleteRule(this.tagScoped)
       }
 
       render() {
-        if (!sheet) return null
+        if (!sheets.staticSheet) return null
 
         const {children, className, ...attrs} = this.props
 
         const props = filterProps(attrs)
-        const tagClass = [
-          sheet.classes[staticTag],
-          dynamicSheet.classes[this.tagScoped],
-          className,
-        ]
-          .filter(Boolean)
-          .join(' ')
+        const tagClass = composeClasses(
+          sheets.staticSheet.classes[staticTag],
+          sheets.dynamicSheet.classes[this.tagScoped],
+          className
+        )
 
         return createElement(tag, {...props, className: tagClass}, children)
       }
     }
   }
 
-  return Object.assign(styled, {styles: baseStyles})
+  return Object.assign(styled, {
+    sheets,
+    mountSheets,
+    styles: baseStyles
+  })
 }
 
 const defaultStyledCreator = createStyled()
@@ -114,3 +119,5 @@ export {
 }
 
 export default defaultStyled
+
+export {default as injectStyled} from './injectStyled'

src/injectStyled.js

@@ -0,0 +1,26 @@
+import {createElement} from 'react'
+
+import composeClasses from './utils/compose-classes'
+import type {styledType} from './types'
+
+const injectStyled = (styled: styledType) => (InnerComponent: ReactClass<any>) => {
+  styled.mountSheets()
+
+  const {sheets} = styled
+  const {staticSheet, dynamicSheet} = sheets
+
+  const classNames = new Set([
+    ...Object.keys(staticSheet.classes),
+    ...Object.keys(dynamicSheet.classes)
+  ])
+
+  const classes = [...classNames]
+    .reduce((acc, name) => ({
+      ...acc,
+      [name]: composeClasses(staticSheet.classes[name], dynamicSheet.classes[name]),
+    }), {})
+
+  return (...props: any) => createElement(InnerComponent, {sheets, classes, ...props})
+}
+
+export default injectStyled

src/tests/App.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import type {styledType} from '../types'
 
-
-export default (styled: Function) => {
+export default (styled: styledType) => {
   const App = styled('div', {
     margin: 50,
   })

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

@@ -53,3 +53,34 @@ exports[`test renders correctly App with default styled 1`] = `
   </section>
 </div>
 `;
+
+exports[`test renders correctly App with injectStyled 1`] = `
+<div
+  className="root-0-17">
+  <div
+    className="div-1-0-19">
+    <header
+      className="header-2-0-20">
+      <h1
+        className="h1-5-0-21">
+        Title
+      </h1>
+    </header>
+    <section
+      className="section-3-0-22">
+      <button
+        className="button-6-0-23 button-11-0-24">
+        primitive test
+      </button>
+      <button
+        className="button-6-0-23 button-12-0-25">
+        dynamic primitive test
+      </button>
+    </section>
+    <section
+      className="section-4-0-26">
+      Another section
+    </section>
+  </div>
+</div>
+`;

src/tests/index.spec.jsx

@@ -1,7 +1,7 @@
 import renderer from 'react-test-renderer'
 import React from 'react'
 
-import styled, {Styled} from '../'
+import styled, {Styled, injectStyled} from '../'
 
 import CreateApp from './App'
 
@@ -25,3 +25,22 @@ it('renders correctly App with default Styled', () => {
 
   expect(tree).toMatchSnapshot()
 })
+
+it('renders correctly App with injectStyled', () => {
+  const customStyled = Styled({
+    root: {
+      fontSize: 16
+    },
+    baseButton: {
+      color: 'red',
+    },
+  })
+
+  const App = CreateApp(customStyled)
+  const StyledApp = injectStyled(customStyled)(({classes}) => (
+    <div className={classes.root}><App /></div>
+  ))
+  const tree = renderer.create(<StyledApp />).toJSON()
+
+  expect(tree).toMatchSnapshot()
+})

src/types/index.js

@@ -0,0 +1,17 @@
+export type styledType = Function & {
+  sheets: {
+    // TODO: use types from jss
+    staticSheet: Object,
+    dynamicSheet: Object,
+  },
+  mountSheets: Function,
+  styles: Object
+}
+export type StyledElementAttrsType = {tag: string, styles: Object}
+export type StyledElementType = Function & StyledElementAttrsType
+export type tagOrStyledElementTypeype = string | StyledElementType
+export type StyledElementPropsType = {
+  classes: Object,
+  children: ?any,
+  className: ?string,
+}

src/utils/compose-classes.js

@@ -0,0 +1 @@
+export default (...args: any) => args.filter(Boolean).join(' ')