Merge pull request #27 from cssinjs/feature/fix-styles-remount

Fix #26

Author: lttb

src/styled.js

@@ -56,7 +56,7 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
         this.sheet.addRule(this.dynamicTagName, dynamicStyle)
       }
 
-      classMap[this.dynamicTagName] = rulesIndex.slice(rulesTotal)
+      classMap[this.dynamicTagName] = classMap[this.dynamicTagName] || rulesIndex.slice(rulesTotal)
       this.updateSheet(this.props)
     }
 
@@ -83,8 +83,8 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
 
       const props = filterProps(attrs)
       const tagClass = composeClasses([
-        this.sheet.classes[staticTagName],
-        this.sheet.classes[this.dynamicTagName],
+        staticTagName && this.sheet.classes[staticTagName],
+        this.dynamicTagName && this.sheet.classes[this.dynamicTagName],
         className
       ])
 

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

@@ -75,3 +75,15 @@ exports[`functional tests should update props and unmount 2`] = `
   color: yellow;
 }"
 `;
+
+exports[`functional tests should use props on remount 1`] = `
+".button-1-id {
+  color: black;
+}"
+`;
+
+exports[`functional tests should use props on remount 2`] = `
+".button-1-id {
+  color: red;
+}"
+`;

src/tests/functional.spec.jsx

@@ -93,4 +93,21 @@ describe('functional tests', () => {
     assertSheet(sheet)
     wrapper.unmount()
   })
+
+  it('should use props on remount', () => {
+    const Button = styled('button')({
+      color: props => (props.primary ? 'red' : 'black')
+    })
+
+    const wrapper = mount(<Button />)
+    const sheet = styled.mountSheet()
+
+    assertSheet(sheet)
+    wrapper
+      .unmount()
+      .mount()
+      .setProps({primary: true})
+    assertSheet(sheet)
+    wrapper.unmount()
+  })
 })