Media query styles applied only to the first element in function

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,

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
       }
     }
   }

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,

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,

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,

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})
 })

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 = {

packages/react-jss/test-utils/createBasicTests.js → 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'

packages/react-jss/test-utils/createDynamicStylesTests.js → 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(
+        <JssProvider registry={registry} generateId={createGenerateId()}>
+          <ThemeProvider theme={theme}>
+            {a.map(item => (
+              <MyComponent key={item} />
+            ))}
+          </ThemeProvider>
+        </JssProvider>
+      )
+      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;
+          }
+        }
+      `)
+    })
   })
 }

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})
   })
 })