Implement common style sheets

Author: lttb

package.json

@@ -34,7 +34,8 @@
   "homepage": "https://github.com/lttb/jss-styled#readme",
   "dependencies": {
     "is-react-prop": "^0.0.2",
-    "react-jss": "^6.1.1"
+    "jss": "^7.0.3",
+    "jss-preset-default": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^15.5.4",

src/index.jsx

@@ -1,63 +1,114 @@
-import React from 'react'
-import injectSheetDefault from 'react-jss'
+import React, {PureComponent} from 'react'
+
+import {create as createJSS, getDynamicStyles} from 'jss'
+import preset from 'jss-preset-default'
 
 import filterProps from './utils/filter-props'
 
 
-type StyledElementType = Function & { Tag: string, styles: Object }
-type TagNameOrStyledElementType = string | StyledElementType
-type PrimitivePropsType = {
+const JSS = createJSS(preset())
+
+type StyledElementAttrsT = { Tag: string, styles: Object }
+type StyledElementT = Function & StyledElementAttrsT
+type TagOrStyledElementT = string | StyledElementT
+type StyledElementPropsT = {
   classes: Object,
   children: ?any,
   className: ?string,
 }
 
 
-export const createStyled = (injectSheet?: Function = injectSheetDefault) =>
-  (
-    TagNameOrStyledElement: TagNameOrStyledElementType,
-    styles: Object,
-    baseStyles?: Object = {},
-  ): StyledElementType => {
-    const {
-      Tag,
-      styles: inheritStyles = {},
-    }: {
-      Tag: string,
-      styles?: Object
-    } = typeof TagNameOrStyledElement === 'string'
-      ? {Tag: TagNameOrStyledElement}
-      : TagNameOrStyledElement
-
-    const elementStyles = {...inheritStyles, ...styles}
-
-    const Primitive = ({classes, children, className, ...attrs}: PrimitivePropsType) => {
-      const props = filterProps(attrs)
-
-      return (
-        <Tag className={className ? `${classes[Tag]} ${className}` : classes[Tag]} {...props}>
-          {children}
-        </Tag>
-      )
-    }
+export const createStyled = (jss?: Function = JSS) => (baseStyles: Object = {}) => {
+  let sheet
+
+  let currentId = 0
+
+  return (TagOrStyledElement: TagOrStyledElementT, ownStyles: Object): StyledElementT => {
+    const {Tag, styles}: StyledElementAttrsT = typeof TagOrStyledElement === 'string'
+      ? {Tag: TagOrStyledElement, styles: {}}
+      : TagOrStyledElement
+
+    const elementStyles = {...styles, ...ownStyles}
+    const dynamicStyles = getDynamicStyles(elementStyles)
+
+    const staticTag = `${Tag}-${++currentId}`
+
+    return class StyledElement extends PureComponent {
+      props: StyledElementPropsT
+
+      static Tag = Tag
+      static styles = elementStyles
+
+      tagScoped = ''
+      dynamicSheet = null
+
+      constructor(props) {
+        super(props)
 
-    const StyledPrimitive = injectSheet({
-      [Tag]: elementStyles,
-      ...baseStyles,
-    })(Primitive)
+        this.tagScoped = `${Tag}-${++currentId}`
+      }
 
-    return Object.assign(StyledPrimitive, {Tag, styles: elementStyles})
+      componentWillMount() {
+        if (!sheet) {
+          sheet = jss.createStyleSheet(baseStyles, {
+            link: true,
+            meta: 'StaticBaseSheet',
+          }).attach()
+        }
+
+        if (!sheet.getRule(staticTag)) {
+          sheet.addRule(staticTag, elementStyles)
+        }
+
+        if (dynamicStyles && !this.dynamicSheet) {
+          this.dynamicSheet = jss.createStyleSheet({[this.tagScoped]: dynamicStyles}, {
+            link: true,
+            meta: `DynamicComponentSheet-${this.tagScoped}`,
+          }).update(this.props).attach()
+        }
+      }
+
+      componentWillReceiveProps(nextProps: StyledElementPropsT) {
+        if (this.dynamicSheet) this.dynamicSheet.update(nextProps)
+      }
+
+      componentWillUnmount() {
+        if (this.dynamicSheet) {
+          jss.removeStyleSheet(this.dynamicSheet)
+          this.dynamicSheet = null
+        }
+      }
+
+      render() {
+        if (!sheet) return null
+
+        const {children, className, ...attrs} = this.props
+
+        const props = filterProps(attrs)
+        const tagClass = [
+          sheet.classes[staticTag],
+          this.dynamicSheet && this.dynamicSheet.classes[this.tagScoped],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')
+
+        return (
+          <Tag className={tagClass} {...props}>
+            {children}
+          </Tag>
+        )
+      }
+    }
   }
+}
 
-const defaultStyled = createStyled()
+const defaultStyledBased = createStyled()
+const defaultStyled = defaultStyledBased()
 
 export {defaultStyled as styled}
 
-export const createStyledCreator = (styled: Function = defaultStyled) =>
-  (baseStyles: Object) => Object.assign(
-    (TagNameOrStyledElement: TagNameOrStyledElementType, styles: Object) =>
-      styled(TagNameOrStyledElement, styles, baseStyles),
-    {styles: baseStyles},
-  )
+export const createStyledCreator = (styled: Function = defaultStyledBased) =>
+  (baseStyles: Object) => Object.assign(styled(baseStyles), {styles: baseStyles})
 
 export default createStyledCreator()

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

@@ -1,54 +1,54 @@
 exports[`test renders correctly App with default Styled 1`] = `
 <div
-  className="div-0-8">
+  className="div-1-0-9">
   <header
-    className="header-0-10">
+    className="header-2-0-10">
     <h1
-      className="h1-0-12">
+      className="h1-5-0-11">
       Title
     </h1>
   </header>
   <section
-    className="section-0-14">
+    className="section-3-0-12">
     <button
-      className="button-0-18 button-0-16">
+      className="button-6-0-13 button-11-0-14">
       primitive test
     </button>
     <button
-      className="button-0-20 button-0-16">
+      className="button-6-0-13 button-12-0-15">
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-0-22">
+    className="section-4-0-16">
     Another section
   </section>
 </div>
 `;
 
 exports[`test renders correctly App with default styled 1`] = `
 <div
-  className="div-0-0">
+  className="div-1-0-0">
   <header
-    className="header-0-1">
+    className="header-2-0-1">
     <h1
-      className="h1-0-2">
+      className="h1-5-0-2">
       Title
     </h1>
   </header>
   <section
-    className="section-0-3">
+    className="section-3-0-3">
     <button
-      className="button-0-5 button-0-4">
+      className="button-6-0-4 button-11-0-5">
       primitive test
     </button>
     <button
-      className="button-0-6 button-0-4">
+      className="button-6-0-4 button-12-0-6">
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-0-7">
+    className="section-4-0-7">
     Another section
   </section>
 </div>