React JSS hover function value

Question

I'm trying to use a function value for the hover styling in a react component with JSS (I'm using the styled-jss library). I only want the hover styles applied when the 'edited' prop is true. Currently for the hover part I have this:

'&:hover': {
    background: props => props.edited && 'purple',
    cursor: props => props.edited && 'pointer',
    ...
}

This works fine, but as you can see I have to do the function value check for every hover CSS value. I want to just do the check once at the start and return the object if it's true:

'&:hover': props => props.edited && {
    background: 'purple',
    cursor: 'pointer',
    ...
}

But this syntax or something along those lines doesn't seem to be supported and I can't find any examples of this anywhere. Is there a simple way to do this? Or will I just have to do the function value check for every property in the hover object?

EDIT:

Here's a basic, generic example of my styled components and their JSS and how I'm using them:

/* style.js */
import styled from 'styled-jss';
const div = styled('div');

export const Style = {
    UpdateButton: div({
        color: props => !props.edited && 'grey',
        width: '200px',
        '&:hover': {
            background: props => props.edited && 'purple',
            cursor: props => props.edited && 'pointer'
        }
    })
};

Then in my react component:

import { Style } from './style';

class Settings extends Component {
        render() {
            return(
                <Style.UpdateButton/>
            );
        }
    }
);

Answer 1

Currently nested function rules have a bug https://github.com/cssinjs/jss/issues/682