What's the order of application of classes?

I’m using CSS modules, Is there a guaranteed order of application of CSS classes? In the following example, can I expect the resultant style to always have a green background since .bar is last? I’m getting inconsistent results in my app. Is there a way to enforce order of application then?

// main.css
.foo {  background: red; }
.bar { background: green; }

// main.js
import styles from './main.css';
const style = classNames(styles.foo, styles.bar);

[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().

[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.