cssinjs / cssinjs/jss

[jss-plugin-value-observable] Do not evaluate observables onUpdate process

Open
#1,224 0 comments 0 reactions 0 assignees View on GitHub
feature request help wanted
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Is your feature request related to a problem? Please describe.__

I have encountered with a misunderstanding of the functionality through the use of observables with `react-jss` that makes less useful when try to work with observables injected by the `data` argument of `useStyles`.

This is a vaguely example of I want to do

```javascript
import React, { useRef } from 'react';
import { createUseStyles } from 'react-jss';

// This won't work because the container rule is wrapped by a function
const useStyles = createUseStyles({
container: ({ getMousePosition }) => ({
width: getMousePosition('left'),
}),
});

// This won't work because the style definition is wrapped by a function
const useStyles = createUseStyles((theme) => {
container: ({ getMousePosition }) => ({
width: getMousePosition('left'),
color: theme.primaryColor,
}),
});

const Button = (children, ...restProps) => {
const buttonRef = useRef(null);
// This function creates an observable using the mouse event of the ref passed by argument
const getMousePosition = useMousePosition(buttonRef);
const classes = useStyles({...restProps, getMousePosition});
return (

{children}
)
}
```
__Describe the solution you'd like__
The reason why this doesn't work is because the observable plugin do not evaluate `onUpdate` rule so there's no way to pass a observable through the `useStyles` to handle `dynamicStyles`

I solve the problem just implementing the same treatment of `onProcessRule` into `onUpdate` processing,

https://github.com/cssinjs/jss/blob/69caa415f245696a526621711e38934495c8e268/packages/jss-plugin-rule-value-observable/src/index.js#L39-L53

__Are you willing to implement it?__
I'm not fully familiar with the plugin API, but I can contribute on it, and if there is any suggestion on this feature I'm open to follow recommendations.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.