Merge pull request #28 from wellguimaraes/master

Fixed issue for dynamic props update

Author: lttb

package.json

@@ -39,7 +39,7 @@
   "homepage": "https://github.com/cssinjs/styled-jss#readme",
   "dependencies": {
     "is-react-prop": "^0.1.3",
-    "jss": "^7.1.5",
+    "jss": "^7.1.7",
     "jss-preset-default": "^2.0.0"
   },
   "peerDependencies": {

src/createStyled.js

@@ -34,7 +34,7 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
     return sheet
   }
 
-  return Object.assign((
+  const styledWrapper = (
     tagNameOrStyledElement: TagNameOrStyledElementType
   ) => (
     ownStyle: ComponentStyleType
@@ -43,7 +43,13 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
     const elementStyle = {...style, ...ownStyle}
 
     return styled({tagName, baseStyles, elementStyle, mountSheet})
-  }, {mountSheet, sheet, styles: baseStyles})
+  }
+
+  Object.defineProperty(styledWrapper, 'sheet', ({
+    get: () => sheet,
+  }: Object)) // https://github.com/facebook/flow/issues/285
+
+  return Object.assign(styledWrapper, {mountSheet, styles: baseStyles})
 }
 
 export default createStyled

src/styled.js

@@ -71,10 +71,13 @@ 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)
+        if (rule.rules) rule.rules.update(props)
       }
     }
 

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

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

src/tests/functional.spec.jsx

@@ -40,13 +40,13 @@ describe('functional tests', () => {
   })
 
   afterEach(() => {
-    styled.mountSheet().detach()
+    styled.sheet.detach()
   })
 
   it('should update props and unmount', () => {
     const App = CreateApp(styled)
     const wrapper = mount(<App />)
-    const sheet = styled.mountSheet()
+    const {sheet} = styled
 
     assertSheet(sheet)
     wrapper.setProps({margin: 20})
@@ -86,7 +86,7 @@ describe('functional tests', () => {
     )
 
     const wrapper = mount(<App />)
-    const sheet = styled.mountSheet()
+    const {sheet} = styled
 
     assertSheet(sheet)
     wrapper.setProps({primary: true})
@@ -100,7 +100,7 @@ describe('functional tests', () => {
     })
 
     const wrapper = mount(<Button />)
-    const sheet = styled.mountSheet()
+    const {sheet} = styled
 
     assertSheet(sheet)
     wrapper
@@ -110,4 +110,25 @@ describe('functional tests', () => {
     assertSheet(sheet)
     wrapper.unmount()
   })
+
+  it('should update dynamic props for conditional rules', () => {
+    const Button = styled('button')({
+      padding: props => (props.spaced ? 10 : 0),
+
+      '@media screen': {
+        '& .button': {
+          margin: props => (props.spaced ? 10 : 0)
+        }
+      }
+    })
+
+    const wrapper = mount(<Button spaced />)
+    const {sheet} = styled
+
+    assertSheet(sheet)
+    wrapper.setProps({spaced: false})
+    assertSheet(sheet)
+
+    wrapper.unmount()
+  })
 })

yarn.lock

@@ -2690,9 +2690,9 @@ jss-vendor-prefixer@^5.0.0:
   dependencies:
     css-vendor "^0.3.8"
 
-jss@^7.1.5:
-  version "7.1.5"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.5.tgz#7d27b07b0f2f7f1a2ec9fe0ee1e2ab3f9d903de5"
+jss@^7.1.7:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-7.1.7.tgz#f2ace208247f1a68166dd20ccd69c866105fa404"
   dependencies:
     is-in-browser "1.0.2"
     warning "3.0.0"