Css bundling - Css modules + classnames breaks
Hi!
I am quite far in the process of migrating my extension to plasmo framework. I managed to make most of the things work except the following:
I use css modules (with sass) and the classnames package to append multiple classes. In most of my react components I receive as prop the className which should also apply to the component(a quite common pattern) like this:
```
import styles from ‘styles.module.scss’
const Spinner = {className:string} => {
<div className={classNames(styles.spinner, className)}
etc……
’’’
Before migrating this was working fine, after migrating this breaks, the css order in which the classes are bundled is incorrect (see also the pic attached).
Is there something I am missing or is this a known issue?
Any help is appreciated. Thank you!
7 Replies
@lab sorry for pinging, this is a big blocker in the migration process. Any ideas on this?
Hey there, how are you importing the css mod btw?
There's some lightningcss config that might be relevant to this
Tried both with
import styles from ‘styles.module.scss’ and
import * as styles from ‘styles.module.scss’
No luck.
Any ideas could be really helpful
Let me know if I need to provide any extra info that could be helpful
Is this in a CSUI?
Or is this in a popup page?
This is happening both in the popup page context and in a CSUI. I am sharing the Spinner component between those two.
css mod on CSUI will be janky, I'm not sure if the style is injected properly there
What's the order of those classes in styles.module.scss?
Tho I don't use scss so not entirely sure why this happened :-?
The style is injected ok, the same problem happens for all components (some used only in popup). The problem is the order of the classes in the created bundle. It seems it bundles in the wrong order. I’ll do a minimal reproducible repository of the problem and share it here.
Hi again! I've made a simple repo where the issue is reproduced for css modules with css. We can see that the class that should apply last actually applies first. https://github.com/BalutaAlex/reproduce-error . Can you have a quick look?