Cannot Resolve Stylename If not explicitly a String

[shawnrice]

Take the following code snippet:

render() {
    const appliedStyles = ['one', 'two'];
    appliedStyles.push(this.props.a ? 'style-a' : 'style-b');

    return (
        <div styleName={ appliedStyles.join( ' ' ) }>
            Hello
        </div>
    );
}

What you'll see is that we'll end up getting something like Unhandled rejection Error: Could not resolve the styleName 'style-a'.

However, if we change the code ever so slightly to

<div styleName={ `${ appliedStyles.join( ' ' ) }` }>

then it seems to work.

Is this a Babel constraint or a fixable bug? The pattern works with your non-babel version.

[gajus]

By the looks of it, it is a deficiency in babel-plugin-react-css-modules.

Its not something I have time to look into right now, but I suggest taking a glance at the tests/ and the source code and see why styleName={ appliedStyles.join( ' ' ) } is not being picked up by the Babel visitor.

[tyler-dot-earth]

@shawnrice if I understand correctly, you should be able to do the following if you use named imports:

import styles from './styles.css';
...
render() {
    const appliedStyles = [styles['one'], styles['two']];
    appliedStyles.push(this.props.a ? styles['style-a'] : styles['style-b']);

    return (
        <div className={ appliedStyles.join( ' ' ) }>
            Hello
        </div>
    );
}

EDIT: use className instead of styleName. Thanks gajus.

[gajus]

What @tsnieman will definitely work (except that then you should be using className). That said, the example that @shawnrice posted ought to work too. If it doesn't, it is a bug.