[jss-compose] When composing from a class that takes props, the inheriting class needs props also

Description

const useStyles = makeStyles({
  icon: props => ({ // <---------- base class
    fontSize: Number(props.size)
  }),
  successIcon: props => ({
    composes: '$icon', // This works, because it takes props, even though not using them
    color: 'green'
  }),
  failIcon: {
    composes: '$icon',  // This extension should work, but it doesn't
    color: 'red'
  }
})

Contributor guide

Tech stack

javascriptreactcss

Domain

frontend

Issue type

bug

DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.

2

Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.

1-3 hours

Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.

stale

ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.

clear

Prerequisites

JavaScript basicsJSS composition concept

Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.

70

Research direction

Examine the jss compose plugin implementation, specifically how it resolves composed classes when the base class is a function (with props) and the extending class is an object. Look at the test files for jss compose to understand expected behavior. The issue likely requires adding a check to handle the case where the extending class does not need props but the base does. A fix might involve ensuring that when composing, if the base is a function, the composed result should also be a function to preserve prop passing.