Part of code gets changed

[pionl]

Hi, for my usecase not all the class names are resolved. I have mainly 2 problems:

1. The classnames with a function wont be prefixed

I need to call the getClassName function that will build the final classname. This part wont be prefixed. The result is: prefix-glog-item item-video

    /**
     * Returns the items class name
     * @return {string}
     */
    getClassName () {
        return `item-${this.props.item.type}`
    }

    /**
     * Returns the container props
     * @return {object}
     */
    getItemContainerProps () {
        // Build the glog item class
        const className = classnames('glog-item', this.getClassName())
        console.log(className)
        return {
            className: className,
            styleLogic: this.state.styleLogic
        }
    }

2. Part of the code gets replaced

I'm building class name with a typeof check (needs to be function). The function string is replaced. The result will be only prefix-glog-item-container. With this kind of problem I don't know if all code will be working correctly.

// Get the onClick function if provided, don't enable on click when
        // the item is loading
        const onClick = loading ? null : interaction.getOnClickListener()

        // Build the container class name. Pass class when item can be clicked
        const containerClassName = classnames('glog-item-container', {
            'item-click-able': typeof onClick === 'function'
        })

        console.log(onClick, typeof onClick === 'function')

This is the final code, as you can see, the function string is prefixed-

var containerClassName = (0, _classnames2.default)('glrv-glog-item-container', {
               'glrv-item-click-able': typeof onClick === 'glrv-function'
           });

console.log(onClick, typeof onClick === 'glrv-function');

Any ideas/suggestions?

Thank you,

[antonsivogrivov]

Hi, @pionl.

1. As a common webpack loader, this lib is just parse with regular expressions and add prefix. Therefore, we don't know whether getClassName() function returns class name or some other string (not class name). For such cases maybe it should be added for example {{prefix}} word, and {{prefix}}item-${this.props.item.type} would be replaced by your_prefix-item-${this.props.item.type}.

2. I think It's better to add black list of such service words (function etc.) and don't add prefix to them.

What do you think?

[pionl]

Hi @tonygriv, thank you for reply

1. Understand, your suggestion sounds perfect, great idea 💯
2. I think this is the easiest solution 👍 On second thought, the regex cold handle situation for classnames definition. It should only replace the key part, not the value. It should match part between quotes and the : separator, like this 'key': or `'key' :. I hope I've explained my self correctly.

Best regards,
Martin.