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(