Merge pull request #15 from helpscout/static-style-update-perf

Perf boost for static CSS rules 🚀

src/withStyles/__tests__/withStyles.test.js

@@ -97,6 +97,20 @@ describe('HOC Composition', () => {
     expect(styles.position).toBe('absolute')
     expect(el.prop('type')).toBe('submit')
   })
+
+  test('Styles are preserved on re-renders', () => {
+    const wrapper = mount(<StyledButton />)
+    const el = wrapper.find('button').node
+
+    wrapper.setProps({ title: 'yup' })
+    wrapper.update()
+
+    const styles = window.getComputedStyle(el)
+
+    expect(styles.appearance).toBe('none')
+    expect(styles.background).toBe('red')
+    expect(styles.position).toBe('absolute')
+  })
 })
 
 describe('Multiple Composed Components', () => {

src/withStyles/index.js

@@ -28,6 +28,17 @@ const withStyles = (styles = '', options = { scope: '' }) => Composed => {
     }
 
     componentDidMount () {
+      this.addRule()
+    }
+
+    componentDidUpdate (prevProps) {
+      this.maybeUpdateRule(prevProps)
+    }
+
+    /**
+     * Adds the CSS Rule to the <style> tag node.
+     */
+    addRule () {
       if (!id || !CSSRules || this.styleSheet.hasRule(id)) return
 
       const cssStyles = this.makeStyles().rule
@@ -43,7 +54,15 @@ const withStyles = (styles = '', options = { scope: '' }) => Composed => {
       this.styleSheet.addRule(id, cssStyles)
     }
 
-    componentDidUpdate (prevProps) {
+    /**
+     * Updates CSS Rule based on prop changes, if applicable.
+     */
+    maybeUpdateRule (prevProps) {
+      /**
+       * No need to update if the rule is static. This guard is to help
+       * with performance.
+       */
+      if (typeof CSSRules === 'string') return
       /**
        * Tested in Enzyme, but difficult to set up Istanbul to report.
        */