Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move getDynamicStyles into react-jss package #1303

Merged
merged 1 commit into from
Mar 15, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ Since you are interested in what happens next, in case, you work for a for-profi

---

### Improvements

- [jss, react-jss] - `getDynamicStyles` utility function was originally exposed from `jss` package, but I don't think it was used externally, so I moved it to `react-jss` package and made it internal. If you have been using it as public API let me know, we will have to revert the change.

## 10.0.4 (2020-1-28)

### Bug fixes
Expand Down
24 changes: 0 additions & 24 deletions docs/jss-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -437,30 +437,6 @@ import jss from 'jss'
jss.setup({id: {minify: true}})
```

## Extract dynamic styles

`getDynamicStyles(styles)`

Extracts a styles object with only props that contain function values. Useful when you want to share a static part between different elements and render only the dynamic styles separate for each element.

```javascript
import {getDynamicStyles} from 'jss'

const dynamicStyles = getDynamicStyles({
button: {
fontSize: 12,
color: data => data.color
}
})

console.log(dynamicStyles)
// {
// button: {
// color: data => data.color
// }
// }
```

## Plugins

See [plugins](plugins.md) documentation.
26 changes: 13 additions & 13 deletions packages/jss/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
{
"dist/jss.js": {
"bundled": 61869,
"minified": 22827,
"gzipped": 6889
"bundled": 61239,
"minified": 22611,
"gzipped": 6806
},
"dist/jss.min.js": {
"bundled": 60492,
"minified": 22059,
"gzipped": 6533
"bundled": 59862,
"minified": 21843,
"gzipped": 6451
},
"dist/jss.cjs.js": {
"bundled": 56608,
"minified": 24744,
"gzipped": 6885
"bundled": 56022,
"minified": 24476,
"gzipped": 6802
},
"dist/jss.esm.js": {
"bundled": 56076,
"minified": 24309,
"gzipped": 6795,
"bundled": 55517,
"minified": 24066,
"gzipped": 6714,
"treeshaked": {
"rollup": {
"code": 20054,
"import_statements": 352
},
"webpack": {
"code": 21521
"code": 21352
}
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/jss/src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,6 @@ export function create(options?: Partial<JssOptions>): Jss
export const createGenerateId: CreateGenerateId
export function createRule<D>(name: string, decl: JssStyle, options: RuleOptions): Rule
export function toCssValue(value: JssValue, ignoreImportant: boolean): string
export function getDynamicStyles(styles: Styles): Styles | null
declare const jss: Jss

/**
Expand Down
6 changes: 1 addition & 5 deletions packages/jss/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export type {
JssValue,
JssOptions,
JssStyle,
JssStyles,
Plugin,
RuleListOptions,
Rule,
Expand Down Expand Up @@ -55,11 +56,6 @@ export type {
*/
export const hasCSSTOMSupport = typeof CSS !== 'undefined' && CSS && 'number' in CSS

/**
* Extracts a styles object with only rules that contain function values.
*/
export {default as getDynamicStyles} from './utils/getDynamicStyles'

/**
* Converts JSS array value to a CSS string.
*/
Expand Down
24 changes: 12 additions & 12 deletions packages/react-jss/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"dist/react-jss.js": {
"bundled": 168968,
"minified": 58341,
"gzipped": 19097
"bundled": 169557,
"minified": 58510,
"gzipped": 19146
},
"dist/react-jss.min.js": {
"bundled": 112003,
"minified": 41600,
"gzipped": 14133
"bundled": 112592,
"minified": 41769,
"gzipped": 14178
},
"dist/react-jss.cjs.js": {
"bundled": 25875,
"minified": 11133,
"gzipped": 3722
"bundled": 26422,
"minified": 11327,
"gzipped": 3789
},
"dist/react-jss.esm.js": {
"bundled": 24913,
"minified": 10298,
"gzipped": 3600,
"bundled": 25453,
"minified": 10486,
"gzipped": 3664,
"treeshaked": {
"rollup": {
"code": 1841,
Expand Down
1 change: 0 additions & 1 deletion packages/react-jss/src/JssProvider.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* eslint-disable global-require, react/prop-types */

import expect from 'expect.js'
import React from 'react'
import {stripIndent} from 'common-tags'
Expand Down
1 change: 1 addition & 0 deletions packages/react-jss/src/createUseStyles.test.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @flow
/* eslint-disable react/prop-types */
import createUseStyles from './createUseStyles'
import createBasicTests from '../test-utils/createBasicTests'
Expand Down
4 changes: 2 additions & 2 deletions packages/react-jss/src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@ interface WithStylesOptions extends BaseOptions {
interface CreateUseStylesOptions extends BaseOptions {
name?: string
}

export interface DefaultTheme {}

declare function createUseStyles<Theme = DefaultTheme, C extends string = string>(
styles: Record<C, any> | ((theme: Theme) => Record<C, any>),
options?: CreateUseStylesOptions
Expand Down
1 change: 1 addition & 0 deletions packages/react-jss/src/index.test.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @flow
import expect from 'expect.js'
import {
withStyles,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
// @flow
import expect from 'expect.js'
import getDynamicStyles from '../../src/utils/getDynamicStyles'
import {resetSheets} from '../../../../tests/utils'

describe('Unit: jss - getDynamicStyles', () => {
beforeEach(resetSheets())
import getDynamicStyles from './getDynamicStyles'

describe('react-jss: merge-classes', () => {
it('should extract dynamic styles', () => {
const color = data => data.color
const styles = {
Expand Down Expand Up @@ -69,6 +67,6 @@ describe('Unit: jss - getDynamicStyles', () => {
}
}
}
expect(getDynamicStyles(styles)).to.be(null)
expect(getDynamicStyles(styles)).to.be(undefined)
})
})
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
// @flow
import {type JssStyles} from 'jss'
/**
* Extracts a styles object with only props that contain function values.
*/
export default function getDynamicStyles(styles: Object): Object | null {
let to = null
const getDynamicStyles = (styles: JssStyles): JssStyles | void => {
let to

for (const key in styles) {
const value = styles[key]
Expand All @@ -22,3 +24,5 @@ export default function getDynamicStyles(styles: Object): Object | null {

return to
}

export default getDynamicStyles
1 change: 1 addition & 0 deletions packages/react-jss/src/utils/mergeClasses.test.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @flow
import expect from 'expect.js'
import compose from './mergeClasses'

Expand Down
3 changes: 2 additions & 1 deletion packages/react-jss/src/utils/sheets.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
// @flow
import warning from 'tiny-warning'
import {getDynamicStyles, type StyleSheetFactoryOptions} from 'jss'
import {type StyleSheetFactoryOptions} from 'jss'
import type {StyleSheet} from 'jss'
import type {Context, DynamicRules, Styles} from '../types'
import {getManager} from './managers'
import defaultJss from '../jss'
import {addMeta, getMeta} from './sheetsMeta'
import getDynamicStyles from './getDynamicStyles'

type Options<Theme> = {
context: Context,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-jss/src/utils/sheetsMeta.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type {StaticStyles} from '../types'

type SheetMeta = {|
styles: StaticStyles,
dynamicStyles: StaticStyles
dynamicStyles?: StaticStyles
|}

const sheetsMeta = new WeakMap<StyleSheet, SheetMeta>()
Expand Down
1 change: 1 addition & 0 deletions packages/react-jss/tests/dynamicStyles.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @flow
/* eslint-disable react/prop-types */

import {createUseStyles, withStyles} from '../src'
Expand Down