Refactor createStyled, move styled function to the separate file

Author: lttb

src/index.js

@@ -1,44 +1,42 @@
-import {PureComponent, createElement} from 'react'
-import {create as createJss, getDynamicStyles} from 'jss'
+import {create as createJss} from 'jss'
 import preset from 'jss-preset-default'
 
-import filterProps from './utils/filterProps'
-import composeClasses from './utils/composeClasses'
-import generateTagName from './utils/generateTagName'
+import styled from './styled'
 import type {
   BaseStylesType,
   ComponentStyleType,
   StyledType,
   StyledElementAttrsType,
   StyledElementType,
-  TagNameOrStyledElementType,
-  StyledElementPropsType
+  TagNameOrStyledElementType
 } from './types'
 
 const jssDefault = createJss(preset())
 
-
 const createStyled = (
   jss?: Function = jssDefault
 ) => (
   baseStyles: BaseStylesType = {}
 ): StyledType => {
-  const sheets = {}
+  let staticSheet
+  let dynamicSheet
 
   const mountSheets = () => {
-    if (!sheets.staticSheet) {
-      sheets.staticSheet = jss.createStyleSheet(baseStyles, {
+    if (!staticSheet) {
+      staticSheet = jss.createStyleSheet(baseStyles, {
         meta: 'StaticBaseSheet',
       }).attach()
 
-      sheets.dynamicSheet = jss.createStyleSheet({}, {
+      dynamicSheet = jss.createStyleSheet({}, {
         link: true,
         meta: 'DynamicComponentSheet',
       }).attach()
     }
+
+    return {staticSheet, dynamicSheet}
   }
 
-  const styled = (
+  return Object.assign((
     tagNameOrStyledElement: TagNameOrStyledElementType,
     ownStyle: ComponentStyleType
   ): StyledElementType => {
@@ -47,72 +45,9 @@ const createStyled = (
       : tagNameOrStyledElement
 
     const elementStyle = {...style, ...ownStyle}
-    const dynamicStyle = getDynamicStyles(elementStyle)
-    const staticTagName = generateTagName(tagName)
-
-    return class StyledElement extends PureComponent {
-      static tagName: string = tagName
-      static style: ComponentStyleType = elementStyle
-
-      props: StyledElementPropsType
-
-      dynamicTagName = ''
-
-      constructor(props) {
-        super(props)
-        this.dynamicTagName = generateTagName(tagName)
-      }
-
-      componentWillMount() {
-        mountSheets()
-
-        if (!sheets.staticSheet.getRule(staticTagName)) {
-          sheets.staticSheet.addRule(staticTagName, elementStyle)
-        }
-
-        if (dynamicStyle && !sheets.dynamicSheet.getRule(this.dynamicTagName)) {
-          sheets.dynamicSheet
-            .detach()
-            .addRule(this.dynamicTagName, dynamicStyle)
-          sheets.dynamicSheet
-            .update(this.dynamicTagName, this.props)
-            .attach()
-            .link()
-        }
-      }
-
-      componentWillReceiveProps(nextProps: StyledElementPropsType) {
-        if (dynamicStyle) {
-          sheets.dynamicSheet.update(this.dynamicTagName, nextProps)
-        }
-      }
-
-      componentWillUnmount() {
-        sheets.dynamicSheet.deleteRule(this.dynamicTagName)
-      }
-
-      render() {
-        if (!sheets.staticSheet) return null
-
-        const {children, className, ...attrs} = this.props
-
-        const props = filterProps(attrs)
-        const tagClass = composeClasses(
-          sheets.staticSheet.classes[staticTagName],
-          sheets.dynamicSheet.classes[this.dynamicTagName],
-          className
-        )
-
-        return createElement(tagName, {...props, className: tagClass}, children)
-      }
-    }
-  }
 
-  return Object.assign(styled, {
-    sheets,
-    mountSheets,
-    styles: baseStyles
-  })
+    return styled({tagName, baseStyles, elementStyle, mountSheets})
+  }, {mountSheets, styles: baseStyles})
 }
 
 const defaultStyledCreator = createStyled()

src/injectStyled.js

@@ -4,10 +4,7 @@ import composeClasses from './utils/composeClasses'
 import type {StyledType} from './types'
 
 const injectStyled = (styled: StyledType) => (InnerComponent: ReactClass<any>) => {
-  styled.mountSheets()
-
-  const {sheets} = styled
-  const {staticSheet, dynamicSheet} = sheets
+  const {staticSheet, dynamicSheet} = styled.mountSheets()
 
   const classNames = Object.keys({...staticSheet.classes, ...dynamicSheet.classes})
 

src/styled.js

@@ -0,0 +1,85 @@
+import {PureComponent, createElement} from 'react'
+import {getDynamicStyles} from 'jss'
+
+import filterProps from './utils/filterProps'
+import composeClasses from './utils/composeClasses'
+import generateTagName from './utils/generateTagName'
+
+import type {
+  JssStaticSheet,
+  JssDynamicSheet,
+  ComponentStyleType,
+  StyledElementPropsType
+} from './types'
+
+type StyledArgs = {
+  tagName: string,
+  elementStyle: Object,
+  mountSheets: Function
+}
+
+const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
+  const dynamicStyle = getDynamicStyles(elementStyle)
+  const staticTagName = generateTagName(tagName)
+
+  return class StyledElement extends PureComponent {
+    static tagName: string = tagName
+    static style: ComponentStyleType = elementStyle
+
+    props: StyledElementPropsType
+
+    dynamicTagName = ''
+    staticSheet: JssStaticSheet
+    dynamicSheet: JssDynamicSheet
+
+    constructor(props: StyledElementPropsType) {
+      super(props)
+      this.dynamicTagName = generateTagName(tagName)
+    }
+
+    componentWillMount() {
+      Object.assign(this, mountSheets())
+
+      if (!this.staticSheet.getRule(staticTagName)) {
+        this.staticSheet.addRule(staticTagName, elementStyle)
+      }
+
+      if (dynamicStyle && !this.dynamicSheet.getRule(this.dynamicTagName)) {
+        this.dynamicSheet
+          .detach()
+          .addRule(this.dynamicTagName, dynamicStyle)
+        this.dynamicSheet
+          .update(this.dynamicTagName, this.props)
+          .attach()
+          .link()
+      }
+    }
+
+    componentWillReceiveProps(nextProps: StyledElementPropsType) {
+      if (dynamicStyle) {
+        this.dynamicSheet.update(this.dynamicTagName, nextProps)
+      }
+    }
+
+    componentWillUnmount() {
+      this.dynamicSheet.deleteRule(this.dynamicTagName)
+    }
+
+    render() {
+      if (!this.staticSheet) return null
+
+      const {children, className, ...attrs} = this.props
+
+      const props = filterProps(attrs)
+      const tagClass = composeClasses(
+        this.staticSheet.classes[staticTagName],
+        this.dynamicSheet.classes[this.dynamicTagName],
+        className
+      )
+
+      return createElement(tagName, {...props, className: tagClass}, children)
+    }
+  }
+}
+
+export default styled

src/types/index.js

@@ -6,11 +6,6 @@ export type JssDynamicSheet = JssStaticSheet
 export type BaseStylesType = JssStyles
 export type ComponentStyleType = JssStyle
 export type StyledType = Function & {
-  sheets: {
-    // TODO: use types from jss
-    staticSheet: JssStaticSheet,
-    dynamicSheet: JssDynamicSheet,
-  },
   mountSheets: Function,
   styles: JssStyles
 }