What's the order of application of classes? about classnames

[charkour]

This is happening when using classnames with postcss modules.

I have something like this.

import s from './Button.module.css';
import cn from 'classnames';

    const rootClassName = cn(
        s.root,
        {
            [s.primary]: variant === 'primary',
            [s.secondary]: variant === 'secondary',
        },
        className
    );

If className is a string, then it is applied before the css modules with posts are applied, even though I specify that className should be the last thing applied in the function.

---

UPDATE

After using classnames and clsx for a year now, I believe the reason that className is applied after the CSS module is due to specificity. The CSS module has higher specificity than the className string passed to the cn().

[Amberlamps]

Order is guaranteed: https://github.com/JedWatson/classnames/blob/master/index.js#L16
What kind of inconsistencies are you experiencing?

[hyperh]

@Amberlamps It might have been a CSS modules composes issue actually. But thanks for the answer, at least I know that classnames guarantees class application order.

[hosseinmd]

Order of class names is not correct.
Imagine we have this:
className='foo bar'

If we use this module there is a problem.
className= classNames('foo','bar') // return 'bar foo'

Class names should be reversed.

[newyork-anthonyng]

@hosseinmd can you provide an example of this?

https://codesandbox.io/s/vigilant-smoke-cnogr?file=/src/App.js

I created a codesandbox for this; it works as expected.

[rodoabad]

@charkour looks like order is not guaranteed based on your post.

[charkour]

Hey @rodoabad, thanks for your comment, but I'm not quite sure what you mean. Would you care to elaborate? Just so you know, I was able to solve the issue by learning how specificity works (which I had trouble comprehending before) and by finding a different workaround (we stopped using CSS modules).

After using classnames and clsx for a year now, I believe the reason that className is applied after the CSS module is due to specificity. The CSS module has higher specificity than the className string passed to the cn().

[samerset-rmn]

Hi there! Have you guys found any solution yet? I've just stumbled upon the same issue. Thinking how to prioritize the string classname over CSS module.