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.

Sign up for GitHub

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

Jump to bottom

Remove getDynamicStyles from core #1000

Closed
wants to merge 7 commits into from
Closed

Remove getDynamicStyles from core #1000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
85719bc
Remove getDynamicStyles from core and create utility function in plug…
Jan 26, 2019
5791dbb
Merge branch 'master' into move-get-dynamic-styles
Jan 26, 2019
abe363d
Update .size-snapshot.json
Jan 26, 2019
2af4fc0
Remove observable plugin from function plugin
Jan 27, 2019
e0cd153
Update changelog.md
Jan 27, 2019
4a81a4c
Remove docs on getDynamicStyles
Jan 27, 2019
7250b3a
Merge branch 'master' into move-get-dynamic-styles
Jan 27, 2019
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
## Next

### Improvements

- [jss|jss-plugin-rule-value-function|jss-plugin-rule-value-observable] Split `getDynamicStyles` and move it out of `jss` ([#1000](https://github.com/cssinjs/jss/pull/1000))

### Bug fixes

- [jss-starter-kit] Fix react-jss exports and add missing jss exports ([#1001](https://github.com/cssinjs/jss/pull/1001))
Expand Down
24 changes: 0 additions & 24 deletions docs/jss-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,30 +420,6 @@ console.log(sheet.toString())
}
```

## 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.
24 changes: 12 additions & 12 deletions packages/jss-plugin-rule-value-function/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"dist/jss-plugin-rule-value-function.js": {
"bundled": 2025,
"minified": 729,
"gzipped": 424
"bundled": 2852,
"minified": 987,
"gzipped": 545
},
"dist/jss-plugin-rule-value-function.min.js": {
"bundled": 2025,
"minified": 729,
"gzipped": 424
"bundled": 2852,
"minified": 987,
"gzipped": 545
},
"dist/jss-plugin-rule-value-function.cjs.js": {
"bundled": 1642,
"minified": 631,
"gzipped": 366
"bundled": 2407,
"minified": 988,
"gzipped": 508
},
"dist/jss-plugin-rule-value-function.esm.js": {
"bundled": 1564,
"minified": 567,
"gzipped": 319,
"bundled": 2312,
"minified": 906,
"gzipped": 462,
"treeshaked": {
"rollup": {
"code": 12,
Expand Down
39 changes: 39 additions & 0 deletions packages/jss-plugin-rule-value-function/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,45 @@ const fnRuleNs = `fnStyle${++now}`

type StyleRuleWithRuleFunction = StyleRule & {[key: string]: Function}

const plainObjectConstrurctor = {}.constructor

function getFunctionStyles(styles: Object): Object | null {
let to = null

for (const key in styles) {
const value = styles[key]

switch (typeof value) {
case 'function': {
if (!to) to = {}
to[key] = value
break
}
case 'object': {
if (
value == null ||
Array.isArray(value) ||
value.constructor !== plainObjectConstrurctor
) {
continue
}
const extracted = getFunctionStyles(value)
if (extracted) {
if (!to) to = {}
to[key] = extracted
}
break
}
default:
break
}
}

return to
}

export {getFunctionStyles}

export default function functionPlugin() {
return {
onCreateRule(name?: string, decl: JssStyle, options: RuleOptions): Rule | null {
Expand Down
24 changes: 12 additions & 12 deletions packages/jss-plugin-rule-value-observable/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{
"dist/jss-plugin-rule-value-observable.js": {
"bundled": 3531,
"minified": 1101,
"gzipped": 533
"bundled": 4323,
"minified": 1323,
"gzipped": 627
},
"dist/jss-plugin-rule-value-observable.min.js": {
"bundled": 3531,
"minified": 1101,
"gzipped": 533
"bundled": 4323,
"minified": 1323,
"gzipped": 627
},
"dist/jss-plugin-rule-value-observable.cjs.js": {
"bundled": 1709,
"minified": 754,
"gzipped": 399
"bundled": 2261,
"minified": 1065,
"gzipped": 504
},
"dist/jss-plugin-rule-value-observable.esm.js": {
"bundled": 1495,
"minified": 591,
"gzipped": 318,
"bundled": 2005,
"minified": 861,
"gzipped": 427,
"treeshaked": {
"rollup": {
"code": 38,
Expand Down
26 changes: 25 additions & 1 deletion packages/jss-plugin-rule-value-observable/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,34 @@ import {
} from 'jss'
import type {Observable} from './types'

const isObservable = value => value && value[$$observable] && value === value[$$observable]()
const isObservable = (value: any) => value && value[$$observable] && value === value[$$observable]()

export type Options = UpdateOptions

function getObservableStyles(styles: Object): Object | null {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are not using this anywhere, why having it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will need it for proper integration into react-jss, but I will make that in a different PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What integration are you talking about? mb we should do it differently in that case.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Proper observables integration into react-jss

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I'm also not sure If we actually need observable support in react-jss.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we end up having a function that knows about both, functions and observables, it shouldn't be in one of those plugins, but somewhere else. Duplicating that function in both is also not very nice, it might need some adjustments in the future and having it twice doesn't make it easier to maintain.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But why do we need to have a function which knows about both?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that these function should live in their respective plugin packages and not in the core.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that core is not the ideal place for them, but I want to keep performance-first constraint. If we need to loop over styles twice just for the sake of functions living in separate packages, it is not quite performance-first.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only place we are using getDynamicStyles at the moment is in react-jss. And without #1002 there will be no performance loose.

let to = null

for (const key in styles) {
const value = styles[key]
const type = typeof value

if (isObservable(value)) {
if (!to) to = {}
to[key] = value
} else if (type === 'object' && value !== null && !Array.isArray(value)) {
const extracted = getObservableStyles(value)
if (extracted) {
if (!to) to = {}
to[key] = extracted
}
}
}

return to
}

export {isObservable, getObservableStyles}

export default function observablePlugin(updateOptions?: Options) {
return {
onCreateRule(name?: string, decl: JssStyle, options: RuleOptions): Rule | null {
Expand Down
26 changes: 13 additions & 13 deletions packages/jss/.size-snapshot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
{
"dist/jss.js": {
"bundled": 59740,
"minified": 22374,
"gzipped": 6667
"bundled": 59110,
"minified": 22158,
"gzipped": 6581
},
"dist/jss.min.js": {
"bundled": 58601,
"minified": 21513,
"gzipped": 6230
"bundled": 57971,
"minified": 21297,
"gzipped": 6147
},
"dist/jss.cjs.js": {
"bundled": 54651,
"minified": 24090,
"gzipped": 6647
"bundled": 54065,
"minified": 23822,
"gzipped": 6562
},
"dist/jss.esm.js": {
"bundled": 54135,
"minified": 23671,
"gzipped": 6560,
"bundled": 53576,
"minified": 23428,
"gzipped": 6477,
"treeshaked": {
"rollup": {
"code": 19192,
"import_statements": 314
},
"webpack": {
"code": 20665
"code": 20500
}
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/jss/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ export function create(options?: Partial<JssOptions>): Jss
export function createGenerateId(): GenerateId
export function createRule(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

export default jss
5 changes: 0 additions & 5 deletions packages/jss/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,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: 0 additions & 24 deletions packages/jss/src/utils/getDynamicStyles.js
View file
Open in desktop

This file was deleted.

74 changes: 0 additions & 74 deletions packages/jss/tests/unit/getDynamicStyles.js
View file
Open in desktop

This file was deleted.

Loading