Merge pull request #12 from cssinjs/feature/improve-performance

Improve mount performance

Author: lttb

package.json

@@ -39,7 +39,7 @@
   "homepage": "https://github.com/cssinjs/styled-jss#readme",
   "dependencies": {
     "is-react-prop": "^0.1.1",
-    "jss": "^7.1.0",
+    "jss": "^7.1.1",
     "jss-preset-default": "^2.0.0"
   },
   "peerDependencies": {

src/injectStyled.js

@@ -11,7 +11,7 @@ const injectStyled = (styled: StyledType) => (InnerComponent: ReactClass<any>) =
   const classes = [...classNames]
     .reduce((acc, name) => ({
       ...acc,
-      [name]: composeClasses(staticSheet.classes[name], dynamicSheet.classes[name]),
+      [name]: composeClasses([staticSheet.classes[name], dynamicSheet.classes[name]]),
     }), {})
 
   return (props: Object) => createElement(InnerComponent, {classes, ...props})

src/styled.js

@@ -22,6 +22,8 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
   const dynamicStyle = getDynamicStyles(elementStyle)
   const staticTagName = generateTagName(tagName)
 
+  const availableDynamicTagNames = []
+
   return class StyledElement extends PureComponent {
     static tagName: string = tagName
     static style: ComponentStyleType = elementStyle
@@ -34,8 +36,8 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
 
     constructor(props: StyledElementPropsType) {
       super(props)
-      if (!this.dynamicTagName) {
-        this.dynamicTagName = generateTagName(tagName)
+      if (!this.dynamicTagName && dynamicStyle) {
+        this.dynamicTagName = availableDynamicTagNames.pop() || generateTagName(tagName)
       }
     }
 
@@ -46,15 +48,13 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
         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()
+      if (!dynamicStyle) return
+
+      if (!this.dynamicSheet.getRule(this.dynamicTagName)) {
+        this.dynamicSheet.addRule(this.dynamicTagName, dynamicStyle)
       }
+
+      this.dynamicSheet.update(this.dynamicTagName, this.props)
     }
 
     componentWillReceiveProps(nextProps: StyledElementPropsType) {
@@ -63,17 +63,21 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
       }
     }
 
+    componentWillUnmount() {
+      availableDynamicTagNames.push(this.dynamicTagName)
+    }
+
     render() {
       if (!this.staticSheet) return null
 
       const {children, className, ...attrs} = this.props
 
       const props = filterProps(attrs)
-      const tagClass = composeClasses(
+      const tagClass = composeClasses([
         this.staticSheet.classes[staticTagName],
         this.dynamicSheet.classes[this.dynamicTagName],
         className
-      )
+      ])
 
       return createElement(tagName, {...props, className: tagClass}, children)
     }

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

@@ -1,26 +1,26 @@
 exports[`test renders correctly App with default Styled 1`] = `
 <div
-  className="div-14-0-9">
+  className="div-9-0-9">
   <header
-    className="header-15-0-10">
+    className="header-10-0-10">
     <h1
-      className="h1-18-0-11">
+      className="h1-13-0-11">
       Title
     </h1>
   </header>
   <section
-    className="section-16-0-12">
+    className="section-11-0-12">
     <button
-      className="button-19-0-13 button-24-0-14">
+      className="button-14-0-13 button-15-0-14">
       primitive test
     </button>
     <button
-      className="button-19-0-13 button-25-0-15">
+      className="button-14-0-13 button-16-0-15">
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-17-0-16">
+    className="section-12-0-16">
     Another section
   </section>
 </div>
@@ -39,11 +39,11 @@ exports[`test renders correctly App with default styled 1`] = `
   <section
     className="section-3-0-3">
     <button
-      className="button-6-0-4 button-11-0-5">
+      className="button-6-0-4 button-7-0-5">
       primitive test
     </button>
     <button
-      className="button-6-0-4 button-12-0-6">
+      className="button-6-0-4 button-8-0-6">
       dynamic primitive test
     </button>
   </section>
@@ -58,27 +58,27 @@ exports[`test renders correctly App with injectStyled 1`] = `
 <div
   className="root-0-17">
   <div
-    className="div-27-0-19">
+    className="div-17-0-19">
     <header
-      className="header-28-0-20">
+      className="header-18-0-20">
       <h1
-        className="h1-31-0-21">
+        className="h1-21-0-21">
         Title
       </h1>
     </header>
     <section
-      className="section-29-0-22">
+      className="section-19-0-22">
       <button
-        className="button-32-0-23 button-37-0-24">
+        className="button-22-0-23 button-23-0-24">
         primitive test
       </button>
       <button
-        className="button-32-0-23 button-38-0-25">
+        className="button-22-0-23 button-24-0-25">
         dynamic primitive test
       </button>
     </section>
     <section
-      className="section-30-0-26">
+      className="section-20-0-26">
       Another section
     </section>
   </div>

src/utils/composeClasses.js

@@ -1 +1,8 @@
-export default (...args: any) => args.filter(Boolean).join(' ')
+export default (classes: Array<?string | boolean>) => {
+  const filtered = []
+  for (let len = classes.length, index = 0; index < len; index++) {
+    if (classes[index]) filtered.push(classes[index])
+  }
+
+  return filtered.join(' ')
+}

yarn.lock

@@ -2576,9 +2576,9 @@ jss-vendor-prefixer@^5.0.0:
   dependencies:
     css-vendor "^0.3.8"
 
-jss@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.0.tgz#8528213f868f05d0ef41deaeb02269bb82780e4b"
+jss@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.1.tgz#b04ce8bfa60123a8b423e0edf17af8d008a5e8e5"
   dependencies:
     is-in-browser "1.0.2"
     warning "3.0.0"