Move createStyled to the separate file

Author: lttb

README.md

@@ -44,7 +44,7 @@ const styled = Styled({
   baseButton: {
     padding: 10,
     '& + &': {
-      marginLeft: 10
+      marginLeft; 10
     }
   }
 })
@@ -73,11 +73,14 @@ const MyStyledComponent = injectStyled(styled)(MyComponent)
 
 ### With custom JSS setup:
 
+`styled-jss` use [jss-preset-default](https://github.com/cssinjs/jss-preset-default) by default.
+But you can require `createStyled` and provide your custom jss instance.
+
 ```js
 import { create as createJss } from 'jss'
 import vendorPrefixer from 'jss-vendor-prefixer'
 
-import { createStyled } from 'styled-jss'
+import createStyled from 'styled-jss/createStyled'
 
 const jss = createJss()
 jss.use(vendorPrefixer())

src/createStyled.js

@@ -0,0 +1,47 @@
+import styled from './styled'
+
+import type {
+  BaseStylesType,
+  ComponentStyleType,
+  StyledType,
+  StyledElementAttrsType,
+  StyledElementType,
+  TagNameOrStyledElementType
+} from './types'
+
+const createStyled = (jss: Function) => (
+  baseStyles: BaseStylesType = {}
+): StyledType => {
+  let staticSheet
+  let dynamicSheet
+
+  const mountSheets = () => {
+    if (!staticSheet) {
+      staticSheet = jss.createStyleSheet(baseStyles, {
+        meta: 'StaticBaseSheet',
+      }).attach()
+
+      dynamicSheet = jss.createStyleSheet({}, {
+        link: true,
+        meta: 'DynamicComponentSheet',
+      }).attach()
+    }
+
+    return {staticSheet, dynamicSheet}
+  }
+
+  return Object.assign((
+    tagNameOrStyledElement: TagNameOrStyledElementType,
+    ownStyle: ComponentStyleType
+  ): StyledElementType => {
+    const {tagName, style}: StyledElementAttrsType = typeof tagNameOrStyledElement === 'string'
+      ? {tagName: tagNameOrStyledElement, style: {}}
+      : tagNameOrStyledElement
+
+    const elementStyle = {...style, ...ownStyle}
+
+    return styled({tagName, baseStyles, elementStyle, mountSheets})
+  }, {mountSheets, styles: baseStyles})
+}
+
+export default createStyled

src/index.js

@@ -1,63 +1,11 @@
 import {create as createJss} from 'jss'
 import preset from 'jss-preset-default'
 
-import styled from './styled'
-import type {
-  BaseStylesType,
-  ComponentStyleType,
-  StyledType,
-  StyledElementAttrsType,
-  StyledElementType,
-  TagNameOrStyledElementType
-} from './types'
+import createStyled from './createStyled'
 
 const jssDefault = createJss(preset())
 
-const createStyled = (
-  jss?: Function = jssDefault
-) => (
-  baseStyles: BaseStylesType = {}
-): StyledType => {
-  let staticSheet
-  let dynamicSheet
-
-  const mountSheets = () => {
-    if (!staticSheet) {
-      staticSheet = jss.createStyleSheet(baseStyles, {
-        meta: 'StaticBaseSheet',
-      }).attach()
-
-      dynamicSheet = jss.createStyleSheet({}, {
-        link: true,
-        meta: 'DynamicComponentSheet',
-      }).attach()
-    }
-
-    return {staticSheet, dynamicSheet}
-  }
-
-  return Object.assign((
-    tagNameOrStyledElement: TagNameOrStyledElementType,
-    ownStyle: ComponentStyleType
-  ): StyledElementType => {
-    const {tagName, style}: StyledElementAttrsType = typeof tagNameOrStyledElement === 'string'
-      ? {tagName: tagNameOrStyledElement, style: {}}
-      : tagNameOrStyledElement
-
-    const elementStyle = {...style, ...ownStyle}
-
-    return styled({tagName, baseStyles, elementStyle, mountSheets})
-  }, {mountSheets, styles: baseStyles})
-}
-
-const defaultStyledCreator = createStyled()
-const defaultStyled = defaultStyledCreator()
-
-export {
-  createStyled,
-  defaultStyledCreator as Styled,
-}
-
-export default defaultStyled
+export const Styled = createStyled(jssDefault)
+export default Styled()
 
 export {default as injectStyled} from './injectStyled'