diff --git a/package.json b/package.json
index 4ca1ca4..15fb7a7 100644
--- a/package.json
+++ b/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": {
diff --git a/src/createStyled.js b/src/createStyled.js
index 3966100..da80321 100644
--- a/src/createStyled.js
+++ b/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
diff --git a/src/styled.js b/src/styled.js
index 556f2fc..869678e 100644
--- a/src/styled.js
+++ b/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)
}
}
diff --git a/src/tests/__snapshots__/functional.spec.jsx.snap b/src/tests/__snapshots__/functional.spec.jsx.snap
index 2bb3b0e..5e11342 100644
--- a/src/tests/__snapshots__/functional.spec.jsx.snap
+++ b/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;
diff --git a/src/tests/functional.spec.jsx b/src/tests/functional.spec.jsx
index 7b28cae..b0f2a37 100644
--- a/src/tests/functional.spec.jsx
+++ b/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()
- const sheet = styled.mountSheet()
+ const {sheet} = styled
assertSheet(sheet)
wrapper.setProps({margin: 20})
@@ -86,7 +86,7 @@ describe('functional tests', () => {
)
const wrapper = mount()
- const sheet = styled.mountSheet()
+ const {sheet} = styled
assertSheet(sheet)
wrapper.setProps({primary: true})
@@ -100,7 +100,7 @@ describe('functional tests', () => {
})
const wrapper = mount()
- 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()
+ const {sheet} = styled
+
+ assertSheet(sheet)
+ wrapper.setProps({spaced: false})
+ assertSheet(sheet)
+
+ wrapper.unmount()
+ })
})
diff --git a/yarn.lock b/yarn.lock
index 1cc41c8..04ec477 100644
--- a/yarn.lock
+++ b/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"