[jss-plugin-value-observable] Do not evaluate observables onUpdate process
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
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 (<div ref={container} className={classes.container}>{children}</div>)
}
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.