From 923892c82bc35857b4bb527b43694c3e8c8b2f72 Mon Sep 17 00:00:00 2001 From: lttb Date: Tue, 18 Jul 2017 23:34:05 +0300 Subject: [PATCH 1/8] Add theming and prop-types dependencies --- package.json | 4 +++- yarn.lock | 39 +++++++++++++++++++++++++++++++++++++-- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 1732cef..86909c6 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,9 @@ "dependencies": { "is-react-prop": "^0.1.3", "jss": "^7.1.7", - "jss-preset-default": "^2.0.0" + "jss-preset-default": "^2.0.0", + "prop-types": "^15.5.10", + "theming": "^1.1.0" }, "peerDependencies": { "react": ">=14" diff --git a/yarn.lock b/yarn.lock index 04ec477..759287b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -805,6 +805,10 @@ braces@^1.8.2: preserve "^0.2.0" repeat-element "^1.1.2" +brcast@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.1.tgz#4311508f0634a6f5a2465b6cf2db27f06902aaca" + browser-resolve@^1.11.2: version "1.11.2" resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce" @@ -2165,6 +2169,10 @@ is-fullwidth-code-point@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f" +is-function@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5" + is-glob@^2.0.0, is-glob@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863" @@ -2206,6 +2214,12 @@ is-path-inside@^1.0.0: dependencies: path-is-inside "^1.0.1" +is-plain-object@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" + dependencies: + isobject "^3.0.1" + is-posix-bracket@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4" @@ -2276,6 +2290,10 @@ isobject@^2.0.0: dependencies: isarray "1.0.0" +isobject@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" + isomorphic-fetch@^2.1.1: version "2.2.1" resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" @@ -2954,7 +2972,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -3451,7 +3469,14 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.4, prop-types@^15.5.7, prop-types@~15.5.7: +prop-types@^15.5.10: + version "15.5.10" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" + dependencies: + fbjs "^0.8.9" + loose-envify "^1.3.1" + +prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7: version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" dependencies: @@ -4043,6 +4068,16 @@ text-table@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" +theming@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/theming/-/theming-1.1.0.tgz#0562760b55a1b919c2d5eeb94130351f8958e13a" + dependencies: + brcast "^2.0.0" + is-function "^1.0.1" + is-plain-object "^2.0.1" + prop-types "^15.5.8" + react "^15.5.4" + throat@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/throat/-/throat-3.0.0.tgz#e7c64c867cbb3845f10877642f7b60055b8ec0d6" From ed59cd7468377b304f7a7345d9b54a5288c40b65 Mon Sep 17 00:00:00 2001 From: lttb Date: Tue, 18 Jul 2017 23:34:35 +0300 Subject: [PATCH 2/8] Stub flow-typed for theming and prop-types --- flow-typed/npm/prop-types_vx.x.x.js | 80 ++++++++++++++ flow-typed/npm/theming_vx.x.x.js | 165 ++++++++++++++++++++++++++++ 2 files changed, 245 insertions(+) create mode 100644 flow-typed/npm/prop-types_vx.x.x.js create mode 100644 flow-typed/npm/theming_vx.x.x.js diff --git a/flow-typed/npm/prop-types_vx.x.x.js b/flow-typed/npm/prop-types_vx.x.x.js new file mode 100644 index 0000000..c1c3a51 --- /dev/null +++ b/flow-typed/npm/prop-types_vx.x.x.js @@ -0,0 +1,80 @@ +// flow-typed signature: 15f1dbaabcfdc41488335743c4ebcc75 +// flow-typed version: <>/prop-types_v15.5.10/flow_v0.44.2 + +/** + * This is an autogenerated libdef stub for: + * + * 'prop-types' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module 'prop-types' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ +declare module 'prop-types/checkPropTypes' { + declare module.exports: any; +} + +declare module 'prop-types/factory' { + declare module.exports: any; +} + +declare module 'prop-types/factoryWithThrowingShims' { + declare module.exports: any; +} + +declare module 'prop-types/factoryWithTypeCheckers' { + declare module.exports: any; +} + +declare module 'prop-types/lib/ReactPropTypesSecret' { + declare module.exports: any; +} + +declare module 'prop-types/prop-types' { + declare module.exports: any; +} + +declare module 'prop-types/prop-types.min' { + declare module.exports: any; +} + +// Filename aliases +declare module 'prop-types/checkPropTypes.js' { + declare module.exports: $Exports<'prop-types/checkPropTypes'>; +} +declare module 'prop-types/factory.js' { + declare module.exports: $Exports<'prop-types/factory'>; +} +declare module 'prop-types/factoryWithThrowingShims.js' { + declare module.exports: $Exports<'prop-types/factoryWithThrowingShims'>; +} +declare module 'prop-types/factoryWithTypeCheckers.js' { + declare module.exports: $Exports<'prop-types/factoryWithTypeCheckers'>; +} +declare module 'prop-types/index' { + declare module.exports: $Exports<'prop-types'>; +} +declare module 'prop-types/index.js' { + declare module.exports: $Exports<'prop-types'>; +} +declare module 'prop-types/lib/ReactPropTypesSecret.js' { + declare module.exports: $Exports<'prop-types/lib/ReactPropTypesSecret'>; +} +declare module 'prop-types/prop-types.js' { + declare module.exports: $Exports<'prop-types/prop-types'>; +} +declare module 'prop-types/prop-types.min.js' { + declare module.exports: $Exports<'prop-types/prop-types.min'>; +} diff --git a/flow-typed/npm/theming_vx.x.x.js b/flow-typed/npm/theming_vx.x.x.js new file mode 100644 index 0000000..1c4853d --- /dev/null +++ b/flow-typed/npm/theming_vx.x.x.js @@ -0,0 +1,165 @@ +// flow-typed signature: 0b2dbbd7a0e7a4a61efa8f5cb564e5d5 +// flow-typed version: <>/theming_v1.1.0/flow_v0.44.2 + +/** + * This is an autogenerated libdef stub for: + * + * 'theming' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module 'theming' { + declare module.exports: any; +} + +/** + * We include stubs for each file inside this npm package in case you need to + * require those files directly. Feel free to delete any files that aren't + * needed. + */ +declare module 'theming/dist/cjs/channel' { + declare module.exports: any; +} + +declare module 'theming/dist/cjs/create-theme-listener' { + declare module.exports: any; +} + +declare module 'theming/dist/cjs/create-theme-provider' { + declare module.exports: any; +} + +declare module 'theming/dist/cjs/create-with-theme' { + declare module.exports: any; +} + +declare module 'theming/dist/cjs/index' { + declare module.exports: any; +} + +declare module 'theming/dist/esm/channel' { + declare module.exports: any; +} + +declare module 'theming/dist/esm/create-theme-listener' { + declare module.exports: any; +} + +declare module 'theming/dist/esm/create-theme-provider' { + declare module.exports: any; +} + +declare module 'theming/dist/esm/create-with-theme' { + declare module.exports: any; +} + +declare module 'theming/dist/esm/index' { + declare module.exports: any; +} + +declare module 'theming/src/channel' { + declare module.exports: any; +} + +declare module 'theming/src/create-theme-listener' { + declare module.exports: any; +} + +declare module 'theming/src/create-theme-listener.test' { + declare module.exports: any; +} + +declare module 'theming/src/create-theme-provider' { + declare module.exports: any; +} + +declare module 'theming/src/create-theme-provider.test' { + declare module.exports: any; +} + +declare module 'theming/src/create-with-theme' { + declare module.exports: any; +} + +declare module 'theming/src/create-with-theme.test' { + declare module.exports: any; +} + +declare module 'theming/src/index' { + declare module.exports: any; +} + +declare module 'theming/src/index.test' { + declare module.exports: any; +} + +declare module 'theming/src/test-helpers' { + declare module.exports: any; +} + +// Filename aliases +declare module 'theming/dist/cjs/channel.js' { + declare module.exports: $Exports<'theming/dist/cjs/channel'>; +} +declare module 'theming/dist/cjs/create-theme-listener.js' { + declare module.exports: $Exports<'theming/dist/cjs/create-theme-listener'>; +} +declare module 'theming/dist/cjs/create-theme-provider.js' { + declare module.exports: $Exports<'theming/dist/cjs/create-theme-provider'>; +} +declare module 'theming/dist/cjs/create-with-theme.js' { + declare module.exports: $Exports<'theming/dist/cjs/create-with-theme'>; +} +declare module 'theming/dist/cjs/index.js' { + declare module.exports: $Exports<'theming/dist/cjs/index'>; +} +declare module 'theming/dist/esm/channel.js' { + declare module.exports: $Exports<'theming/dist/esm/channel'>; +} +declare module 'theming/dist/esm/create-theme-listener.js' { + declare module.exports: $Exports<'theming/dist/esm/create-theme-listener'>; +} +declare module 'theming/dist/esm/create-theme-provider.js' { + declare module.exports: $Exports<'theming/dist/esm/create-theme-provider'>; +} +declare module 'theming/dist/esm/create-with-theme.js' { + declare module.exports: $Exports<'theming/dist/esm/create-with-theme'>; +} +declare module 'theming/dist/esm/index.js' { + declare module.exports: $Exports<'theming/dist/esm/index'>; +} +declare module 'theming/src/channel.js' { + declare module.exports: $Exports<'theming/src/channel'>; +} +declare module 'theming/src/create-theme-listener.js' { + declare module.exports: $Exports<'theming/src/create-theme-listener'>; +} +declare module 'theming/src/create-theme-listener.test.js' { + declare module.exports: $Exports<'theming/src/create-theme-listener.test'>; +} +declare module 'theming/src/create-theme-provider.js' { + declare module.exports: $Exports<'theming/src/create-theme-provider'>; +} +declare module 'theming/src/create-theme-provider.test.js' { + declare module.exports: $Exports<'theming/src/create-theme-provider.test'>; +} +declare module 'theming/src/create-with-theme.js' { + declare module.exports: $Exports<'theming/src/create-with-theme'>; +} +declare module 'theming/src/create-with-theme.test.js' { + declare module.exports: $Exports<'theming/src/create-with-theme.test'>; +} +declare module 'theming/src/index.js' { + declare module.exports: $Exports<'theming/src/index'>; +} +declare module 'theming/src/index.test.js' { + declare module.exports: $Exports<'theming/src/index.test'>; +} +declare module 'theming/src/test-helpers.js' { + declare module.exports: $Exports<'theming/src/test-helpers'>; +} From 858601d702ae885cb0f11a82da7189873461f96b Mon Sep 17 00:00:00 2001 From: lttb Date: Tue, 18 Jul 2017 23:35:31 +0300 Subject: [PATCH 3/8] Create basic support for theming out of the box --- src/styled.js | 39 +++++++++++++++++++++++++++++---------- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/src/styled.js b/src/styled.js index 869678e..d117e7a 100644 --- a/src/styled.js +++ b/src/styled.js @@ -1,4 +1,6 @@ import {Component, createElement} from 'react' +import PropTypes from 'prop-types' +import {themeListener, channel} from 'theming' import filterProps from './utils/filterProps' import composeClasses from './utils/composeClasses' @@ -27,18 +29,25 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => { return class StyledElement extends Component { static tagName: string = tagName static style: ComponentStyleType = elementStyle + static contextTypes = { + [channel]: PropTypes.object + } props: StyledElementPropsType + sheet: JssSheet + state: {theme?: Object} + unsubscribe: Function dynamicTagName = '' + setTheme = (theme: Object) => this.setState({theme}) - sheet: JssSheet - - constructor(props: StyledElementPropsType) { - super(props) + constructor(props: StyledElementPropsType, context: *) { + super(props, context) if (!this.dynamicTagName && dynamicStyle) { this.dynamicTagName = availableDynamicTagNames.pop() || generateTagName(tagName) } + + this.state = context[channel] ? {theme: themeListener.initial(context)} : {} } componentWillMount() { @@ -57,27 +66,37 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => { } classMap[this.dynamicTagName] = classMap[this.dynamicTagName] || rulesIndex.slice(rulesTotal) - this.updateSheet(this.props) + this.updateSheet(this.props, this.state) } - componentWillReceiveProps(nextProps: StyledElementPropsType) { - if (dynamicStyle) this.updateSheet(nextProps) + componentWillUpdate(nextProps: StyledElementPropsType, nextState: *) { + if (dynamicStyle) this.updateSheet(nextProps, nextState) + } + + componentDidMount() { + if (this.state.theme) { + this.unsubscribe = themeListener.subscribe(this.context, this.setTheme) + } } componentWillUnmount() { availableDynamicTagNames.push(this.dynamicTagName) + + if (typeof this.unsubscribe === 'function') this.unsubscribe() } - updateSheet(props: StyledElementPropsType) { + updateSheet(props: StyledElementPropsType, state: *) { let rule let ruleIndex = 0 + const styles = Object.assign({}, props, state) + // 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] - if (rule.name) this.sheet.update(rule.name, props) - if (rule.rules) rule.rules.update(props) + if (rule.name) this.sheet.update(rule.name, styles) + if (rule.rules) rule.rules.update(styles) } } From 386f75695596458615a5dca0673ba1c6e4f96824 Mon Sep 17 00:00:00 2001 From: lttb Date: Tue, 18 Jul 2017 23:41:20 +0300 Subject: [PATCH 4/8] Add tests for theming --- .../__snapshots__/functional.spec.jsx.snap | 32 ++++++ src/tests/functional.spec.jsx | 102 ++++++++++++++++++ 2 files changed, 134 insertions(+) diff --git a/src/tests/__snapshots__/functional.spec.jsx.snap b/src/tests/__snapshots__/functional.spec.jsx.snap index 5e11342..0a5f771 100644 --- a/src/tests/__snapshots__/functional.spec.jsx.snap +++ b/src/tests/__snapshots__/functional.spec.jsx.snap @@ -109,3 +109,35 @@ exports[`functional tests should use props on remount 2`] = ` color: red; }" `; + +exports[`functional tests theming should update theme 1`] = ` +".button-1-id { + color: green; + background-color: white; +}" +`; + +exports[`functional tests theming should update theme 2`] = ` +".button-1-id { + color: yellow; + background-color: blue; +}" +`; + +exports[`functional tests theming should work with ThemeProvider 1`] = ` +".button-1-id { + color: red; + background-color: black; +}" +`; + +exports[`functional tests theming should work with nested ThemeProvider 1`] = ` +".button-1-id { + color: green; + background-color: white; +} +.button-2-id { + color: blue; + background-color: yellow; +}" +`; diff --git a/src/tests/functional.spec.jsx b/src/tests/functional.spec.jsx index b0f2a37..6ca02b4 100644 --- a/src/tests/functional.spec.jsx +++ b/src/tests/functional.spec.jsx @@ -1,5 +1,6 @@ import 'react-dom' import React from 'react' +import {ThemeProvider} from 'theming' import {mount} from 'enzyme' import { @@ -131,4 +132,105 @@ describe('functional tests', () => { wrapper.unmount() }) + + describe('theming', () => { + it('should work with ThemeProvider', () => { + const theme = { + color: { + primary: 'red', + secondary: 'black' + } + } + + const Button = styled('button')({ + color: props => props.theme.color.primary, + backgroundColor: props => props.theme.color.secondary, + }) + + const wrapper = mount( + + + +) + +export default App +``` + +## Composable styles + +You can compose your style-objects and style-functions. + +```js +import colors from 'my-colors' + +/* let's declare some abstract mixins for example */ + +const theme = ({theme}) => ({ + color: colors[theme], + backgroundColor: colors.accent[theme], +}) + +const font = ({bold}) => ({ + font: {weight: bold ? 'bold' : 'normal', family: 'Arial'} +}) + +const size = ({size}) => ({ + s: { + fontSize: 12, + lineHeight: 15, + }, + m: { + fontSize: 16, + lineHeight: 18 + } +})[size] + +const rounded = ({rounded}) => rounded && {borderRadius: 5} + +/* now we can mix them to our Button Component */ + +const Button = styled('button')(theme, size, font, rounded) + +/* and that's it */ + + ) diff --git a/package.json b/package.json index f3841b8..64eff1e 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,8 @@ "deep-extend": "^0.5.0", "is-observable": "^0.2.0", "is-react-prop": "^1.0.0", - "jss": "^9.5.1", - "jss-preset-default": "^4.0.0", + "jss": "^9.8.0", + "jss-preset-default": "^4.3.0", "theming": "^1.3.0" }, "peerDependencies": { diff --git a/src/errors/index.js b/src/errors/index.js deleted file mode 100644 index d1c7a6d..0000000 --- a/src/errors/index.js +++ /dev/null @@ -1,10 +0,0 @@ -export default class StyledJssError extends Error { - constructor(message: string) { - super(message) - - this.message = message - this.name = 'StyledJssError' - - Error.captureStackTrace(this, StyledJssError) - } -} diff --git a/src/styled.js b/src/styled.js index ef45458..379174b 100644 --- a/src/styled.js +++ b/src/styled.js @@ -7,8 +7,6 @@ import composeClasses from './utils/composeClasses' import generateTagName from './utils/generateTagName' import getSeparatedStyles from './utils/getSeparatedStyles' -import StyledJssError from './errors' - import type { JssSheet, TagNameOrStyledElementType, @@ -110,7 +108,7 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => { componentDidMount() { if (this.state.theme) { - this.unsubscribe = themeListener.subscribe(this.context, this.setTheme) + this.subscriptionId = themeListener.subscribe(this.context, this.setTheme) } } @@ -121,7 +119,9 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => { componentWillUnmount() { availableDynamicTagNames.push(this.dynamicTagName) - if (typeof this.unsubscribe === 'function') this.unsubscribe() + if (this.subscriptionId) { + themeListener.unsubscribe(this.context, this.subscriptionId) + } } setTheme = (theme: Object) => this.setState({theme}) @@ -129,31 +129,25 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => { dynamicTagName = '' sheet: JssSheet staticClassName = '' - unsubscribe: ?Function + subscriptionId: ?number - updateSheet(props: StyledElementPropsType, {theme}: StateType) { + updateSheet(props: StyledElementPropsType, state: StateType) { let rule let ruleIndex = 0 + const styleProps = state.theme + ? Object.assign({}, state, props) + : props + // 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] if (isFunctionStyle) { - const context = {theme} - - if (process.env.NODE_ENV !== 'production' && !context.theme) { - Object.defineProperty(context, 'theme', ({ - get: () => { - throw new StyledJssError('You should wrap your Application by ThemeProvider to use theme') - } - }: Object)) - } - - this.sheet.update(rule.key, {props, context}) + this.sheet.update(rule.key, styleProps) } else { - this.sheet.update(rule.key, props) + this.sheet.update(rule.key, styleProps) } } } diff --git a/src/tests/__snapshots__/functional.spec.jsx.snap b/src/tests/__snapshots__/functional.spec.jsx.snap index 0f0bb05..b9e9fa3 100644 --- a/src/tests/__snapshots__/functional.spec.jsx.snap +++ b/src/tests/__snapshots__/functional.spec.jsx.snap @@ -129,6 +129,30 @@ exports[`functional tests composable styles should merge all object styles 1`] = }" `; +exports[`functional tests composable styles should merge and compose all styles 1`] = ` +".button-1-id { + margin: 20px; + padding: 20px; +} +.button-2-id { + border-radius: 100%; + color: red; + background-color: green; +}" +`; + +exports[`functional tests composable styles should merge and compose all styles 2`] = ` +".button-1-id { + margin: 20px; + padding: 20px; +} +.button-2-id { + border-radius: 100%; + color: black; + background-color: white; +}" +`; + exports[`functional tests should update dynamic props for conditional rules 1`] = ` ".button-1-id { padding: 10px; @@ -301,8 +325,6 @@ exports[`functional tests should use props on remount 2`] = ` }" `; -exports[`functional tests theming should throw an exception without ThemeProvider 1`] = `[StyledJssError: You should wrap your Application by ThemeProvider to use theme]`; - exports[`functional tests theming should update theme 1`] = ` ".button-1-id { color: green; diff --git a/src/tests/functional.spec.jsx b/src/tests/functional.spec.jsx index f8e49d5..08d3675 100644 --- a/src/tests/functional.spec.jsx +++ b/src/tests/functional.spec.jsx @@ -304,10 +304,7 @@ describe('functional tests', () => { wrapper.unmount() }) - /** - * TODO (@lttb): it looks like jss keeps previous props for function rules - */ - it.skip('should merge and compose all styles', () => { + it('should merge and compose all styles', () => { const round = props => props.round && ({ 'border-radius': '100%' }) @@ -349,7 +346,7 @@ describe('functional tests', () => { } } - const Button = styled('button')((_, {theme}) => ({ + const Button = styled('button')(({theme}) => ({ color: theme.color.primary, 'background-color': theme.color.secondary, })) @@ -374,7 +371,7 @@ describe('functional tests', () => { } } - const Button = styled('button')((_, {theme}) => ({ + const Button = styled('button')(({theme}) => ({ color: theme.color.primary, 'background-color': theme.color.secondary, })) @@ -416,7 +413,7 @@ describe('functional tests', () => { } }] - const Button = styled('button')((_, {theme}) => ({ + const Button = styled('button')(({theme}) => ({ color: theme.color.primary, 'background-color': theme.color.secondary, })) @@ -439,25 +436,5 @@ describe('functional tests', () => { wrapper.unmount() }) - - it('should throw an exception without ThemeProvider', () => { - const Button = styled('button')((_, {theme}) => ({ - color: theme.color.primary, - 'background-color': theme.color.secondary, - })) - - try { - /** @see https://github.com/facebook/react/issues/11098 */ - // $FlowIgnore - console.error = () => {} - - mount( -