Process className key in a destructured object

[chrisvasz]

// message.js
import './message.css';
function Message(props) {
  return <div {...props} styleName="message">message</div>;
}
render(<Message className="message--mine" />);

/* message.css */
.message { ... }

The output looks like this:

import './message.css';
function Message(props) {
  return <div {...props} className="message___3Hgmr">message</div>;
}
render(<Message className="message--mine" />);

The className from props is overwritten, but I would like it to be included in the final className assignment since className was not specified on the div. I think getClassNames should accept a third parameter: every object that is destructured before the styleName attribute. getClassNames would iterate through these objects looking for className, then include whichever className appears last in the list of objects in the final className assignment.

Something like this:

import './message.css';
function Message(props) {
  return <div {...props} className={getClassName("message", map, props/*, other, destructured, objects */)}>message</div>;
}
render(<Message className="message--mine" />);
// outputs <div className="message--mine message___3Hgmr">message</div>

[giorgosavgeris]

How is this marked as an enhancement ? That's clearly a bug and is a show stopper one.

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>

[tyler-dot-earth]

@giorgosavgeris Dunno about this being a show-stopper -- this issue is very easy to workaround. While slightly unintuitive, I usually do something like this:

import styles from './MyComponent.module.css';

const { whatever, ...otherProps } = props;

const className = `${styles.wrapper} ${otherProps.className}`

<div {...props} className={className}>
  <p styleName="style-name-still-works-too">...</p>
</div>

[gajus]

🎉 This issue has been resolved in version 5.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀