diff --git a/packages/css-jss/.size-snapshot.json b/packages/css-jss/.size-snapshot.json index 3ddf245cd..4befa9145 100644 --- a/packages/css-jss/.size-snapshot.json +++ b/packages/css-jss/.size-snapshot.json @@ -1,13 +1,13 @@ { "css-jss.js": { - "bundled": 61072, - "minified": 21894, - "gzipped": 7360 + "bundled": 61109, + "minified": 21924, + "gzipped": 7375 }, "css-jss.min.js": { - "bundled": 59997, - "minified": 21271, - "gzipped": 7079 + "bundled": 60034, + "minified": 21301, + "gzipped": 7094 }, "css-jss.cjs.js": { "bundled": 3034, diff --git a/packages/jss-plugin-default-unit/.size-snapshot.json b/packages/jss-plugin-default-unit/.size-snapshot.json index 90e8ae452..0cfa39176 100644 --- a/packages/jss-plugin-default-unit/.size-snapshot.json +++ b/packages/jss-plugin-default-unit/.size-snapshot.json @@ -1,30 +1,30 @@ { "jss-plugin-default-unit.js": { - "bundled": 6857, - "minified": 3589, - "gzipped": 1219 + "bundled": 6894, + "minified": 3619, + "gzipped": 1234 }, "jss-plugin-default-unit.min.js": { - "bundled": 6857, - "minified": 3589, - "gzipped": 1219 + "bundled": 6894, + "minified": 3619, + "gzipped": 1234 }, "jss-plugin-default-unit.cjs.js": { - "bundled": 6038, - "minified": 3672, - "gzipped": 1169 + "bundled": 6073, + "minified": 3703, + "gzipped": 1183 }, "jss-plugin-default-unit.esm.js": { - "bundled": 5958, - "minified": 3606, - "gzipped": 1113, + "bundled": 5993, + "minified": 3637, + "gzipped": 1127, "treeshaked": { "rollup": { - "code": 2664, + "code": 2694, "import_statements": 39 }, "webpack": { - "code": 3685 + "code": 3715 } } } diff --git a/packages/jss-preset-default/.size-snapshot.json b/packages/jss-preset-default/.size-snapshot.json index 0785b5ed9..144722324 100644 --- a/packages/jss-preset-default/.size-snapshot.json +++ b/packages/jss-preset-default/.size-snapshot.json @@ -1,13 +1,13 @@ { "jss-preset-default.js": { - "bundled": 58272, - "minified": 21118, - "gzipped": 7011 + "bundled": 58309, + "minified": 21148, + "gzipped": 7027 }, "jss-preset-default.min.js": { - "bundled": 57197, - "minified": 20495, - "gzipped": 6731 + "bundled": 57234, + "minified": 20525, + "gzipped": 6746 }, "jss-preset-default.cjs.js": { "bundled": 2222, diff --git a/packages/jss-starter-kit/.size-snapshot.json b/packages/jss-starter-kit/.size-snapshot.json index d21b4ee8d..343eb4a96 100644 --- a/packages/jss-starter-kit/.size-snapshot.json +++ b/packages/jss-starter-kit/.size-snapshot.json @@ -1,13 +1,13 @@ { "jss-starter-kit.js": { - "bundled": 74415, - "minified": 31569, - "gzipped": 9645 + "bundled": 74452, + "minified": 31599, + "gzipped": 9657 }, "jss-starter-kit.min.js": { - "bundled": 73340, - "minified": 31381, - "gzipped": 9422 + "bundled": 73377, + "minified": 31411, + "gzipped": 9434 }, "jss-starter-kit.cjs.js": { "bundled": 5647, diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index 186d9a355..92752eb77 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/packages/react-jss/.size-snapshot.json @@ -1,13 +1,13 @@ { "react-jss.js": { - "bundled": 169656, - "minified": 59534, - "gzipped": 19547 + "bundled": 169693, + "minified": 59565, + "gzipped": 19559 }, "react-jss.min.js": { - "bundled": 112296, - "minified": 42734, - "gzipped": 14502 + "bundled": 112333, + "minified": 42765, + "gzipped": 14514 }, "react-jss.cjs.js": { "bundled": 27701, diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js index 803161fd9..0c6a62220 100644 --- a/packages/react-jss/src/createUseStyles.test.js +++ b/packages/react-jss/src/createUseStyles.test.js @@ -1,6 +1,7 @@ /* eslint-disable react/prop-types */ -import createUseStyles from './createUseStyles' -import createBasicTests from '../test-utils/createBasicTests' + +import {createUseStyles} from '.' +import createCommonBaseTests from '../test-utils/createCommonBaseTests' const createStyledComponent = (styles, options) => { const useStyles = createUseStyles(styles, options) @@ -12,5 +13,5 @@ const createStyledComponent = (styles, options) => { } describe('React-JSS: createUseStyles', () => { - createBasicTests({createStyledComponent}) + createCommonBaseTests({createStyledComponent}) }) diff --git a/packages/react-jss/src/withStyles.test.js b/packages/react-jss/src/withStyles.test.js index 50b17bf1c..8c651ba39 100644 --- a/packages/react-jss/src/withStyles.test.js +++ b/packages/react-jss/src/withStyles.test.js @@ -6,7 +6,7 @@ import {spy} from 'sinon' import TestRenderer from 'react-test-renderer' import {withStyles, JssProvider} from '.' -import createBasicTests from '../test-utils/createBasicTests' +import createCommonBaseTests from '../test-utils/createCommonBaseTests' const createGenerateId = () => { let counter = 0 @@ -20,7 +20,7 @@ const createStyledComponent = (styles, options = {}) => { } describe('React-JSS: withStyles', () => { - createBasicTests({createStyledComponent}) + createCommonBaseTests({createStyledComponent}) describe('should merge the classes', () => { const styles = { diff --git a/packages/react-jss/test-utils/createBasicTests.js b/packages/react-jss/test-utils/createCommonBaseTests.js similarity index 98% rename from packages/react-jss/test-utils/createBasicTests.js rename to packages/react-jss/test-utils/createCommonBaseTests.js index f861fe699..738f816b8 100644 --- a/packages/react-jss/test-utils/createBasicTests.js +++ b/packages/react-jss/test-utils/createCommonBaseTests.js @@ -1,4 +1,8 @@ /* eslint-disable global-require, react/prop-types, no-underscore-dangle */ +/** + * This tests are testing a base common behavior between HOC and hooks interfaces. + */ + import expect from 'expect.js' import * as React from 'react' import {spy} from 'sinon' diff --git a/packages/react-jss/test-utils/createDynamicStylesTests.js b/packages/react-jss/test-utils/createCommonDynamicStylesTests.js similarity index 89% rename from packages/react-jss/test-utils/createDynamicStylesTests.js rename to packages/react-jss/test-utils/createCommonDynamicStylesTests.js index aa97bf8a5..28fe3c3cd 100644 --- a/packages/react-jss/test-utils/createDynamicStylesTests.js +++ b/packages/react-jss/test-utils/createCommonDynamicStylesTests.js @@ -1,11 +1,13 @@ /* eslint-disable global-require, react/prop-types, react/no-find-dom-node, react/no-multi-comp, react/prefer-stateless-function */ - +/** + * This tests are testing a common behavior for dynamic styles between HOC and hooks interfaces. + */ import expect from 'expect.js' import * as React from 'react' import TestRenderer from 'react-test-renderer' import {stripIndent} from 'common-tags' -import {JssProvider, SheetsRegistry} from '../src' +import {JssProvider, SheetsRegistry, ThemeProvider} from '../src' const createGenerateId = () => { let counter = 0 @@ -562,5 +564,59 @@ export default ({createStyledComponent}) => { expect(passedProps.color).to.equal('rgb(255, 0, 0)') expect(passedProps.height).to.equal(20) }) + + it('should render multiple elements with applied media query and theme function', () => { + const theme: Object = { + background: 'yellow', + background2: 'red' + } + + const styles = themeObj => ({ + wrapper: () => ({ + padding: 40, + background: themeObj.background, + textAlign: 'left', + '@media (min-width: 1024px)': { + backgroundColor: themeObj.background2 + } + }) + }) + + MyComponent = createStyledComponent(styles) + + const a = [1, 2] + TestRenderer.create( + + + {a.map(item => ( + + ))} + + + ) + expect(registry.toString()).to.be(stripIndent` + .wrapper-0 {} + .wrapper-d0-1 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d0-1 { + background-color: red; + } + } + .wrapper-d1-2 { + padding: 40px; + background: yellow; + text-align: left; + } + @media (min-width: 1024px) { + .wrapper-d1-2 { + background-color: red; + } + } + `) + }) }) } diff --git a/packages/react-jss/tests/dynamicStyles.js b/packages/react-jss/tests/dynamicStyles.js index 43662efd9..b8f2cc163 100644 --- a/packages/react-jss/tests/dynamicStyles.js +++ b/packages/react-jss/tests/dynamicStyles.js @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import {createUseStyles, withStyles} from '../src' -import createDynamicStylesTests from '../test-utils/createDynamicStylesTests' +import createCommonDynamicStylesTests from '../test-utils/createCommonDynamicStylesTests' describe('React-JSS: dynamic styles', () => { describe('using createUseStyles', () => { @@ -16,7 +16,7 @@ describe('React-JSS: dynamic styles', () => { return Comp } - createDynamicStylesTests({createStyledComponent}) + createCommonDynamicStylesTests({createStyledComponent}) }) describe('using withStyles', () => { @@ -29,6 +29,6 @@ describe('React-JSS: dynamic styles', () => { return withStyles(styles, options)(Comp) } - createDynamicStylesTests({createStyledComponent}) + createCommonDynamicStylesTests({createStyledComponent}) }) })