Merge branch 'master' into feature/improve-mount-performance

Author: lttb

.babelrc

@@ -4,7 +4,7 @@
     '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

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+
+node_js:
+  - 7
+
+after_success: npm run test:coverage && npm run coveralls

CHANGELOG.md

@@ -0,0 +1,18 @@
+# Change Log
+
+## [v0.5.0](https://github.com/cssinjs/styled-jss/tree/v0.5.0) (2017-04-24)
+[Full Changelog](https://github.com/cssinjs/styled-jss/compare/v0.4.0...v0.5.0)
+
+**Implemented enhancements:**
+
+- Implement injectStyled [\#6](https://github.com/cssinjs/styled-jss/pull/6) ([lttb](https://github.com/lttb))
+
+## [v0.4.0](https://github.com/cssinjs/styled-jss/tree/v0.4.0) (2017-04-23)
+[Full Changelog](https://github.com/cssinjs/styled-jss/compare/v0.3.1...v0.4.0)
+
+**Implemented enhancements:**
+
+- Improved performance for dynamic styles update
+
+
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*

README.md

@@ -1,16 +1,26 @@
+<a href="https://github.com/cssinjs/styled-jss">
+  <img alt="styled-jss" src="https://github.com/cssinjs/logo/blob/master/styled-jss-logo.png" height="150px" />
+</a>
+
 # Styled Components on top of JSS
 
-## Install
+[![Travis branch](https://img.shields.io/travis/cssinjs/styled-jss/master.svg?style=flat)](https://travis-ci.org/cssinjs/styled-jss)
+[![Coverage Status branch](https://img.shields.io/coveralls/cssinjs/styled-jss/master.svg?style=flat)](https://img.shields.io/coveralls/cssinjs/styled-jss/master.svg?branch=master)
+[![npm version](https://img.shields.io/npm/v/styled-jss.svg?style=flat)](https://www.npmjs.com/package/styled-jss)
+[![npm license](https://img.shields.io/npm/l/styled-jss.svg?style=flat)](https://www.npmjs.com/package/styled-jss)
 
-This has peer dependencies of `react` and `react-dom`, which will have to be installed as well.
+## Install
 
 ```sh
 npm install --save styled-jss
 ```
 
+Install peer dependencies `react` and `react-dom` in your project.
+
+
 ## Usage
 
-### With default styled function
+### With a default styled function
 
 ```js
 import styled from 'styled-jss'
@@ -26,21 +36,26 @@ const PrimaryButton = styled(Button, {
 })
 ```
 
-### With base Style Sheet
+### With a base Style Sheet
 
-Using base Style Sheet we can share classes between styled primitives.
+Using base Style Sheet we can share classes between styled primitives and render function.
 
 ```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,28 +73,30 @@ 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:
+### With custom JSS setup
+
+`styled-jss` uses [jss-preset-default](https://github.com/cssinjs/jss-preset-default) by default. You can require `createStyled` function 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())
 
-// Create custom Styled, that allows to set BaseStyles
+// Create a custom Styled function, that allows to set BaseStyles.
 const Styled = createStyled(jss)
 
-// Create custom styled function without BaseStyles accordingly
+// Create a custom styled function that allows to create styled components.
 export const styled = createStyled()
 
 export default Styled

package.json

@@ -1,8 +1,8 @@
 {
   "name": "styled-jss",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Styled Components on top of JSS.",
-  "main": "lib/index.js",
+  "main": "index.js",
   "scripts": {
     "clean": "rimraf lib/*",
     "lint": "eslint src",
@@ -11,17 +11,15 @@
     "test": "jest",
     "test:watch": "npm test -- --watch",
     "test:coverage": "npm test -- --coverage",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
     "prebuild": "npm run clean && npm run flow && npm run lint && npm run test:coverage",
     "build": "babel src --out-dir lib --ignore tests",
+    "postbuild": "npm run flow:csrc && copyfiles -e '**/tests/*' ./*.* LICENSE -a -f lib",
+    "flow:csrc": "flow-copy-source -i '**/tests/*' src lib",
     "flow:typed": "flow-typed install",
     "flow:stub": "flow-typed create-stub",
-    "preversion": "npm run build",
-    "postversion": "git push --follow-tags && npm publish"
+    "release": "npm run build && git push --follow-tags && npm publish lib"
   },
-  "files": [
-    "src",
-    "lib"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cssinjs/styled-jss.git"
@@ -54,17 +52,20 @@
     "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",
+    "copyfiles": "^1.2.0",
+    "coveralls": "^2.13.0",
     "eslint": "^3.13.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-jss": "^3.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.10.3",
     "flow-bin": "^0.44.2",
+    "flow-copy-source": "^1.1.0",
     "flow-typed": "^2.0.0",
     "jest": "^18.1.0",
     "lint-staged": "^3.4.0",
@@ -80,5 +81,11 @@
       "git add"
     ]
   },
-  "pre-commit": "lint:staged"
+  "pre-commit": [
+    "lint:staged",
+    "test"
+  ],
+  "jest": {
+    "rootDir": "src"
+  }
 }

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,122 +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 raf from 'raf'
-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()
 
-  let dynamicCounter = 0
-  raf(function update() {
-    if (dynamicCounter) {
-      dynamicCounter = 0
-      dynamicSheet.attach().link()
-    }
-    raf(update)
-  })
-
-  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)
-          dynamicCounter++
-        }
-      }
-
-      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'