Classnames from props never get concatenated with resolved styleName. Replaced instead.

[giorgosavgeris]

We want to use HOCs which sent down some classnames like so:

The styleName in withWarning.js resolves from loader to a class name which will be passed down. Here assume the resolved className is withWarning__warning__er3432

// withWarning.js
import 'styles.scss'; // has inside a class .warning

export default Component => ({warning, ...props}) => {
  let styleNames = '';
  if (warning) {
    styleNames = 'warning';
  }
  return <Component {...props} styleName={styleNames}/>;
};

At prettyText.js the styleName resolves as prettyText__pretty__ty3342. At the same time the component received as a property className which previously resolved withWarning__warning__er3432. Instead of merging these two classes on the final outcome, only the resolved from styleName is being used and the className from props never gets concatenated unless someone would explicitly declare the className on JSX <div {...props} className={props.className} styleName='pretty' />.

// /prettyText.js
import withWarning from './withWarning';
import 'styles.scss'; // has inside a class .pretty

const Text = props => {
  return <div {...props} styleName='pretty' />;
};

export default withWarning(Text);

Ending up with something like so:

// index.js
import TextWithWarning from './text.js';

ReactDOM.render(<TextWithWarning warning>Error</TextWithWarning>);

// Expected: <div class='withWarning__warning__er3432 prettyText__pretty__ty3342'>Error</div>
// Got: <div class='prettyText__pretty__ty3342'>Error</div>

[giorgosavgeris]

@gajus I think this is not an enhancement. It is a bug.

[gajus]

Is this not a duplicate of https://github.com/gajus/babel-plugin-react-css-modules/issues/44 ?

[giorgosavgeris]

Maybe, I am not sure.

[giorgosavgeris]

Issue #44 is open and unresolved from April 2017. Nobody will pay attention.

[gajus]

Issue #44 is open and unresolved from April 2017. Nobody will pay attention.

Everyone is welcome to contribute, including you.