All files index.js

100% Statements 23/23
84.62% Branches 11/13
100% Functions 6/6
100% Lines 23/23
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57        3x     2x   4x   2x     11x 7x         14x 13x 9x 7x   5x 5x         4x   3x 2x 2x           3x   9x 2x 1x 1x 1x         7x        
import React, { Component } from 'react';
import csjs from 'csjs';
import insertStyle, { removeStyle, getStyle } from './insert-style';
 
const cache = new Map();
 
export default function (userCss, ...values) {
  let css = userCss;
 
  Iif (Array.isArray(css)) {
    // Forward string literals to csjs
    css = csjs(css, ...values);
  }
 
  return DecoratedComponent =>
    class WithStyleDecorator extends Component {
      static displayName = `csjs(${DecoratedComponent.displayName
                            || DecoratedComponent.name || 'Component'})`
 
      componentWillMount() {
        const refs = cache.get(DecoratedComponent);
        if (!refs) {
          this.elm = insertStyle(csjs.getCss(css));
          cache.set(DecoratedComponent, { style: this.elm, count: 1 });
        } else {
          this.elm = refs.style;
          refs.count += 1;
        }
      }
 
      componentWillUpdate() {
        if (process.env.NODE_ENV !== 'production') {
            // Support React Hot Loader
          const cssText = csjs.getCss(css);
          if (getStyle(this.elm) !== cssText) {
            this.elm = insertStyle(cssText, { element: this.elm });
          }
        }
      }
 
      componentWillUnmount() {
        const refs = cache.get(DecoratedComponent);
 
        refs.count -= 1;
        if (refs.count === 0) {
          cache.delete(DecoratedComponent);
          removeStyle(this.elm);
          this.elm = null;
        }
      }
 
      render() {
        return <DecoratedComponent classes={css} {...this.props} />;
      }
    };
}