cssinjs/jss

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

Open

#1,224 opened on Oct 26, 2019

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (434 forks)batch import
feature requesthelp wanted

Repository metrics

Stars
 (7,000 stars)
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

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.

Contributor guide