cssinjs/jss

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

Open

#1,224 opened on 2019年10月26日

GitHub で見る
 (0 comments) (0 reactions) (0 assignees)JavaScript (434 forks)batch import
feature requesthelp wanted

Repository metrics

Stars
 (7,000 stars)
PR merge metrics
 (30d に merged PR はありません)

説明

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.

コントリビューターガイド