Merge 7b3a902 into 5c7b8ae

src/StyleSheet/__tests__/StyleSheet.test.js

@@ -0,0 +1,37 @@
+import StyleSheet from '../'
+
+describe('StyleSheet', () => {
+  describe('addStyles', () => {
+    test('Adds new style to _styles', () => {
+      const stylesheet = StyleSheet()
+      stylesheet.addStyles('1', 'abc')
+
+      expect(stylesheet.styles['1']).toBe('abc')
+    })
+
+    test('Adds multiple new style to _styles', () => {
+      const stylesheet = StyleSheet()
+      stylesheet.addStyles('1', 'abc')
+      stylesheet.addStyles('2', 'def')
+      stylesheet.addStyles('3', 'zxc')
+
+      expect(stylesheet.styles['1']).toBe('abc')
+      expect(stylesheet.styles['2']).toBe('def')
+      expect(stylesheet.styles['3']).toBe('zxc')
+    })
+
+    test('Does not override existing keys', () => {
+      const stylesheet = StyleSheet()
+      stylesheet.addStyles('1', 'abc')
+      stylesheet.addStyles('1', 'def')
+
+      expect(stylesheet.styles['1']).toBe('abc')
+    })
+
+    test('Returns style after setting', () => {
+      const stylesheet = StyleSheet()
+
+      expect(stylesheet.addStyles('1', 'abc')).toBe('abc')
+    })
+  })
+})

src/StyleSheet/index.js

@@ -9,6 +9,7 @@ stylis.use([ruleParserPlugin])
 function StyleSheet () {
   let cssRules = {}
   let _id = 0
+  let _styles = {}
 
   function addRule (id, styles) {
     cssRules[id] = styles
@@ -31,11 +32,41 @@ function StyleSheet () {
     return { id: _id, CSSRules, uuid: uuid() }
   }
 
+  /**
+   * Adds the unique selectors to _styles.
+   *
+   * @param   {string} id
+   * @param   {string} selectors
+   * @returns {string}
+   */
+  function addStyles (id, selectors) {
+    if (!_styles[id]) {
+      _styles[id] = selectors
+    }
+
+    return _styles[id]
+  }
+
+  /**
+   * Generates the tokenized rule and unique selectors.
+   *
+   * @param   {string} id
+   * @param   {object} props
+   * @param   {string} CSSRules
+   * @param   {string} scope
+   * @param   {string} uuid
+   * @returns {string} object
+   */
   function makeStyles ({id, props, CSSRules, scope, uuid}) {
     const parsedCSSRules = typeof CSSRules === 'string'
       ? CSSRules : CSSRules(props)
 
-    return tokenize(stylis((scope || ''), parsedCSSRules), uuid, id)
+    const styles = tokenize(stylis((scope || ''), parsedCSSRules), uuid, id)
+
+    return {
+      selectors: (id, styles.selectors),
+      rule: styles.rule
+    }
   }
 
   return {
@@ -44,9 +75,11 @@ function StyleSheet () {
     hasRule,
     removeRule,
     makeRule,
+    addStyles,
     makeStyles,
     cssRules,
-    id: _id
+    id: _id,
+    styles: _styles
   }
 }
 

src/withStyles/index.js

@@ -23,14 +23,8 @@ const withStyles = (styles = '', options = { scope: '' }) => Composed => {
       this.styleSheet = STYLESHEET
       this.tagNode = null
       this.styles = {}
-    }
 
-    componentWillMount () {
-      if (!this.shouldUpdateCSSRules()) return
-      this.makeStyles().selectors
-        .map(({name, className}) => {
-          this.styles[name] = className
-        })
+      this.setStyles()
     }
 
     componentDidMount () {
@@ -107,6 +101,16 @@ const withStyles = (styles = '', options = { scope: '' }) => Composed => {
       return this.tagNode
     }
 
+    /**
+     * Sets the initial style classNames.
+     */
+    setStyles () {
+      this.makeStyles().selectors
+        .map(({name, className}) => {
+          this.styles[name] = className
+        })
+    }
+
     /**
      * Creates the CSS rules.
      *

stories/index.stories.js

@@ -30,14 +30,40 @@ const Card = props => {
 
 const FancyCard = fancy(css)(Card)
 
+class App extends React.Component {
+  constructor () {
+    super()
+    this.state = {
+      cards: [1, 2]
+    }
+
+    this.handleAddCard = this.handleAddCard.bind(this)
+  }
+
+  handleAddCard () {
+    const { cards } = this.state
+    this.setState({ cards: [...cards, cards.length + 1] })
+  }
+
+  render () {
+    const { cards } = this.state
+    const cardsMarkup = cards.map(id => (
+      <FancyCard key={id} />
+    ))
+
+    return (
+      <div>
+        <div>
+          {cardsMarkup}
+        </div>
+        <button onClick={this.handleAddCard}>Add</button>
+      </div>
+    )
+  }
+}
+
 stories.add('Component', () => {
   return (
-    <div>
-      <Frame>
-        <FancyCard bg='red' />
-        <FancyCard bg='red' />
-        <FancyCard bg='red' />
-      </Frame>
-    </div>
+    <App />
   )
 })