Merge pull request #6 from cssinjs/feature/injectStyled

Implement injectStyled

Author: lttb

.babelrc

@@ -1,9 +1,10 @@
 {
   presets: [
+    'es2015',
     'react',
   ],
   plugins: [
-    'transform-es2015-modules-commonjs',
+    'transform-flow-strip-types',
     'transform-class-properties',
     ['transform-object-rest-spread', { useBuiltIns: true }],
   ]

.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,20 +63,24 @@ 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:
 
+`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())

package.json

@@ -53,8 +53,9 @@
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.2.2",
     "babel-plugin-transform-class-properties": "^6.23.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
+    "babel-plugin-transform-flow-strip-types": "^6.22.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",
@@ -78,5 +79,8 @@
       "git add"
     ]
   },
-  "pre-commit": "lint:staged"
+  "pre-commit": [
+    "lint:staged",
+    "test"
+  ]
 }

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,116 +1,11 @@
-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/filter-props'
 
-const jssDefault = createJss(preset())
+import createStyled from './createStyled'
 
-type StyledElementAttrsType = { tag: string, styles: Object }
-type StyledElementType = Function & StyledElementAttrsType
-type tagOrStyledElementTypeype = string | StyledElementType
-type StyledElementPropsType = {
-  classes: Object,
-  children: ?any,
-  className: ?string,
-}
+const jss: Function = createJss(preset())
 
-const createStyled = (jss?: Function = jssDefault) => (baseStyles: Object = {}) => {
-  let sheet
-  let dynamicSheet
-  let counter = 0
+export const Styled = createStyled(jss)
+export default Styled()
 
-  const styled = (
-    tagOrStyledElement: tagOrStyledElementTypeype,
-    ownStyles: Object
-  ): StyledElementType => {
-    const {tag, styles}: StyledElementAttrsType = typeof tagOrStyledElement === 'string'
-      ? {tag: tagOrStyledElement, styles: {}}
-      : tagOrStyledElement
-
-    const elementStyles = {...styles, ...ownStyles}
-    const dynamicStyles = getDynamicStyles(elementStyles)
-    const staticTag = `${tag}-${++counter}`
-
-    return class StyledElement extends PureComponent {
-      static tag = tag
-
-      static styles = elementStyles
-
-      props: StyledElementPropsType
-
-      tagScoped = ''
-
-      constructor(props) {
-        super(props)
-        this.tagScoped = `${tag}-${++counter}`
-      }
-
-      componentWillMount() {
-        if (!sheet) {
-          sheet = jss.createStyleSheet(baseStyles, {
-            link: true,
-            meta: 'StaticBaseSheet',
-          }).attach()
-
-          dynamicSheet = jss.createStyleSheet({}, {
-            link: true,
-            meta: 'DynamicComponentSheet',
-          }).attach()
-        }
-
-        if (!sheet.getRule(staticTag)) {
-          sheet.addRule(staticTag, elementStyles)
-        }
-
-        if (dynamicStyles && !dynamicSheet.getRule(this.tagScoped)) {
-          dynamicSheet
-            .detach()
-            .addRule(this.tagScoped, dynamicStyles)
-          dynamicSheet
-            .update(this.tagScoped, this.props)
-            .attach()
-            .link()
-        }
-      }
-
-      componentWillReceiveProps(nextProps: StyledElementPropsType) {
-        if (dynamicStyles) {
-          dynamicSheet.update(this.tagScoped, nextProps)
-        }
-      }
-
-      componentWillUnmount() {
-        dynamicSheet.deleteRule(this.tagScoped)
-      }
-
-      render() {
-        if (!sheet) 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(' ')
-
-        return createElement(tag, {...props, className: tagClass}, children)
-      }
-    }
-  }
-
-  return Object.assign(styled, {styles: baseStyles})
-}
-
-const defaultStyledCreator = createStyled()
-const defaultStyled = defaultStyledCreator()
-
-export {
-  createStyled,
-  defaultStyledCreator as Styled,
-}
-
-export default defaultStyled
+export {default as injectStyled} from './injectStyled'

src/injectStyled.js

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

src/styled.js

@@ -0,0 +1,83 @@
+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: ComponentStyleType,
+  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)
+      if (!this.dynamicTagName) {
+        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)
+      }
+    }
+
+    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/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,
   })