fixed issue while updating dynamic props for conditional rules

Author: wellguimaraes

src/styled.js

@@ -71,10 +71,15 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
     updateSheet(props: StyledElementPropsType) {
       let rule
       let ruleIndex = 0
+
       // nested styles become to flatten rules, so we need to update each nested rule
       for (ruleIndex; ruleIndex < classMap[this.dynamicTagName].length; ruleIndex++) {
         rule = classMap[this.dynamicTagName][ruleIndex]
-        this.sheet.update(rule.name, props)
+
+        if (rule.name)
+          this.sheet.update(rule.name, props)
+        else
+          this.sheet.update(props)
       }
     }
 

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

@@ -1,3 +1,25 @@
+exports[`functional tests should update all dynamic props 1`] = `
+".button-1-id {
+  padding: 10px;
+}
+@media screen {
+  .button-1-id {
+    margin: 10px;
+  }
+}"
+`;
+
+exports[`functional tests should update all dynamic props 2`] = `
+".button-1-id {
+  padding: 0;
+}
+@media screen {
+  .button-1-id {
+    margin: 0;
+  }
+}"
+`;
+
 exports[`functional tests should update nested props 1`] = `
 ".button-id {
   font-size: 12px;

src/tests/functional.spec.jsx

@@ -110,4 +110,22 @@ describe('functional tests', () => {
     assertSheet(sheet)
     wrapper.unmount()
   })
+
+  it('should update all dynamic props', () => {
+    const Button = styled('button')({
+      padding: props => props.spaced ? 10 : 0,
+
+      '@media screen': {
+        margin: props => props.spaced ? 10 : 0
+      }
+    })
+
+    const wrapper = mount(<Button spaced={true} />)
+
+    expect(styled.mountSheet().toString()).toMatchSnapshot()
+    wrapper.setProps({ spaced: false })
+    expect(styled.mountSheet().toString()).toMatchSnapshot()
+
+    wrapper.unmount()
+  })
 })