Skip to content

Commit 94c8f6c

Browse files
kofpranshuchittoramattbsurveymonkeyvepasto
authored
Media query styles applied only to the first element in function (#1442)
* fix(react-jss): Media query styles applied only to the first element in function chore(react-jss): Snapshot update * tests(react-jss): added tests for createUseStyles * added createBasicStyles call to createUseStyles test * added media query test to createBasicTests * feat: add px as default unit for text-decoration-thickness property (#1438) * remove duplicate test * rename basic to common * rename test generator functions * move the test where it belongs * better comments Co-authored-by: Pranshu Chittora <pranshuchittora17@gmail.com> Co-authored-by: Matt Beaudry <mattb@surveymonkey.com> Co-authored-by: Veikko Karsikko <veikko88@gmail.com>
1 parent acd2c75 commit 94c8f6c

10 files changed

Lines changed: 109 additions & 48 deletions

File tree

‎packages/css-jss/.size-snapshot.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"css-jss.js": {
3-
"bundled": 61072,
4-
"minified": 21894,
5-
"gzipped": 7360
3+
"bundled": 61109,
4+
"minified": 21924,
5+
"gzipped": 7375
66
},
77
"css-jss.min.js": {
8-
"bundled": 59997,
9-
"minified": 21271,
10-
"gzipped": 7079
8+
"bundled": 60034,
9+
"minified": 21301,
10+
"gzipped": 7094
1111
},
1212
"css-jss.cjs.js": {
1313
"bundled": 3034,

‎packages/jss-plugin-default-unit/.size-snapshot.json‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
{
22
"jss-plugin-default-unit.js": {
3-
"bundled": 6857,
4-
"minified": 3589,
5-
"gzipped": 1219
3+
"bundled": 6894,
4+
"minified": 3619,
5+
"gzipped": 1234
66
},
77
"jss-plugin-default-unit.min.js": {
8-
"bundled": 6857,
9-
"minified": 3589,
10-
"gzipped": 1219
8+
"bundled": 6894,
9+
"minified": 3619,
10+
"gzipped": 1234
1111
},
1212
"jss-plugin-default-unit.cjs.js": {
13-
"bundled": 6038,
14-
"minified": 3672,
15-
"gzipped": 1169
13+
"bundled": 6073,
14+
"minified": 3703,
15+
"gzipped": 1183
1616
},
1717
"jss-plugin-default-unit.esm.js": {
18-
"bundled": 5958,
19-
"minified": 3606,
20-
"gzipped": 1113,
18+
"bundled": 5993,
19+
"minified": 3637,
20+
"gzipped": 1127,
2121
"treeshaked": {
2222
"rollup": {
23-
"code": 2664,
23+
"code": 2694,
2424
"import_statements": 39
2525
},
2626
"webpack": {
27-
"code": 3685
27+
"code": 3715
2828
}
2929
}
3030
}

‎packages/jss-preset-default/.size-snapshot.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"jss-preset-default.js": {
3-
"bundled": 58272,
4-
"minified": 21118,
5-
"gzipped": 7011
3+
"bundled": 58309,
4+
"minified": 21148,
5+
"gzipped": 7027
66
},
77
"jss-preset-default.min.js": {
8-
"bundled": 57197,
9-
"minified": 20495,
10-
"gzipped": 6731
8+
"bundled": 57234,
9+
"minified": 20525,
10+
"gzipped": 6746
1111
},
1212
"jss-preset-default.cjs.js": {
1313
"bundled": 2222,

‎packages/jss-starter-kit/.size-snapshot.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"jss-starter-kit.js": {
3-
"bundled": 74415,
4-
"minified": 31569,
5-
"gzipped": 9645
3+
"bundled": 74452,
4+
"minified": 31599,
5+
"gzipped": 9657
66
},
77
"jss-starter-kit.min.js": {
8-
"bundled": 73340,
9-
"minified": 31381,
10-
"gzipped": 9422
8+
"bundled": 73377,
9+
"minified": 31411,
10+
"gzipped": 9434
1111
},
1212
"jss-starter-kit.cjs.js": {
1313
"bundled": 5647,

‎packages/react-jss/.size-snapshot.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"react-jss.js": {
3-
"bundled": 169656,
4-
"minified": 59534,
5-
"gzipped": 19547
3+
"bundled": 169693,
4+
"minified": 59565,
5+
"gzipped": 19559
66
},
77
"react-jss.min.js": {
8-
"bundled": 112296,
9-
"minified": 42734,
10-
"gzipped": 14502
8+
"bundled": 112333,
9+
"minified": 42765,
10+
"gzipped": 14514
1111
},
1212
"react-jss.cjs.js": {
1313
"bundled": 27701,

‎packages/react-jss/src/createUseStyles.test.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable react/prop-types */
2-
import createUseStyles from './createUseStyles'
3-
import createBasicTests from '../test-utils/createBasicTests'
2+
3+
import {createUseStyles} from '.'
4+
import createCommonBaseTests from '../test-utils/createCommonBaseTests'
45

56
const createStyledComponent = (styles, options) => {
67
const useStyles = createUseStyles(styles, options)
@@ -12,5 +13,5 @@ const createStyledComponent = (styles, options) => {
1213
}
1314

1415
describe('React-JSS: createUseStyles', () => {
15-
createBasicTests({createStyledComponent})
16+
createCommonBaseTests({createStyledComponent})
1617
})

‎packages/react-jss/src/withStyles.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {spy} from 'sinon'
66
import TestRenderer from 'react-test-renderer'
77

88
import {withStyles, JssProvider} from '.'
9-
import createBasicTests from '../test-utils/createBasicTests'
9+
import createCommonBaseTests from '../test-utils/createCommonBaseTests'
1010

1111
const createGenerateId = () => {
1212
let counter = 0
@@ -20,7 +20,7 @@ const createStyledComponent = (styles, options = {}) => {
2020
}
2121

2222
describe('React-JSS: withStyles', () => {
23-
createBasicTests({createStyledComponent})
23+
createCommonBaseTests({createStyledComponent})
2424

2525
describe('should merge the classes', () => {
2626
const styles = {

packages/react-jss/test-utils/createBasicTests.js renamed to packages/react-jss/test-utils/createCommonBaseTests.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
/* eslint-disable global-require, react/prop-types, no-underscore-dangle */
2+
/**
3+
* This tests are testing a base common behavior between HOC and hooks interfaces.
4+
*/
5+
26
import expect from 'expect.js'
37
import * as React from 'react'
48
import {spy} from 'sinon'

packages/react-jss/test-utils/createDynamicStylesTests.js renamed to packages/react-jss/test-utils/createCommonDynamicStylesTests.js

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/* eslint-disable global-require, react/prop-types, react/no-find-dom-node, react/no-multi-comp, react/prefer-stateless-function */
2-
2+
/**
3+
* This tests are testing a common behavior for dynamic styles between HOC and hooks interfaces.
4+
*/
35
import expect from 'expect.js'
46
import * as React from 'react'
57
import TestRenderer from 'react-test-renderer'
68
import {stripIndent} from 'common-tags'
79

8-
import {JssProvider, SheetsRegistry} from '../src'
10+
import {JssProvider, SheetsRegistry, ThemeProvider} from '../src'
911

1012
const createGenerateId = () => {
1113
let counter = 0
@@ -562,5 +564,59 @@ export default ({createStyledComponent}) => {
562564
expect(passedProps.color).to.equal('rgb(255, 0, 0)')
563565
expect(passedProps.height).to.equal(20)
564566
})
567+
568+
it('should render multiple elements with applied media query and theme function', () => {
569+
const theme: Object = {
570+
background: 'yellow',
571+
background2: 'red'
572+
}
573+
574+
const styles = themeObj => ({
575+
wrapper: () => ({
576+
padding: 40,
577+
background: themeObj.background,
578+
textAlign: 'left',
579+
'@media (min-width: 1024px)': {
580+
backgroundColor: themeObj.background2
581+
}
582+
})
583+
})
584+
585+
MyComponent = createStyledComponent(styles)
586+
587+
const a = [1, 2]
588+
TestRenderer.create(
589+
<JssProvider registry={registry} generateId={createGenerateId()}>
590+
<ThemeProvider theme={theme}>
591+
{a.map(item => (
592+
<MyComponent key={item} />
593+
))}
594+
</ThemeProvider>
595+
</JssProvider>
596+
)
597+
expect(registry.toString()).to.be(stripIndent`
598+
.wrapper-0 {}
599+
.wrapper-d0-1 {
600+
padding: 40px;
601+
background: yellow;
602+
text-align: left;
603+
}
604+
@media (min-width: 1024px) {
605+
.wrapper-d0-1 {
606+
background-color: red;
607+
}
608+
}
609+
.wrapper-d1-2 {
610+
padding: 40px;
611+
background: yellow;
612+
text-align: left;
613+
}
614+
@media (min-width: 1024px) {
615+
.wrapper-d1-2 {
616+
background-color: red;
617+
}
618+
}
619+
`)
620+
})
565621
})
566622
}

‎packages/react-jss/tests/dynamicStyles.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/prop-types */
22

33
import {createUseStyles, withStyles} from '../src'
4-
import createDynamicStylesTests from '../test-utils/createDynamicStylesTests'
4+
import createCommonDynamicStylesTests from '../test-utils/createCommonDynamicStylesTests'
55

66
describe('React-JSS: dynamic styles', () => {
77
describe('using createUseStyles', () => {
@@ -16,7 +16,7 @@ describe('React-JSS: dynamic styles', () => {
1616
return Comp
1717
}
1818

19-
createDynamicStylesTests({createStyledComponent})
19+
createCommonDynamicStylesTests({createStyledComponent})
2020
})
2121

2222
describe('using withStyles', () => {
@@ -29,6 +29,6 @@ describe('React-JSS: dynamic styles', () => {
2929
return withStyles(styles, options)(Comp)
3030
}
3131

32-
createDynamicStylesTests({createStyledComponent})
32+
createCommonDynamicStylesTests({createStyledComponent})
3333
})
3434
})

0 commit comments

Comments
 (0)
⚡