PostCSS Modules composed styles are not included into the bundle

[Aliaksei-Martsinkevich]

I have following structure on my project:

• common.module.css // Contains bunch of classes which are to be composed
• componentA/
  • ComponentA.tsx - imports component-a.module.css
  • component-a.module.css - composes some classes from common
• componentB/
  • ComponentB.tsx - imports component-b.module.css
  • component-b.module.css - composes some classes from common
• index.ts - rexport ComponentA and ComponentB

In a resulting bundle I have styles from both components, and it has class names from common, but there is no class definitions from common. As a workaround, a added import of common.module.css to index and it works.

Still, I think that composes should be treated as import.

[garand]

I'm experiencing this as well. Using the same work around for the time being.

[Anidetrix]

Hi @Aliaksei-Martsinkevich, @garand,

This is intentional. The main reason this was done is to avoid running modules on the same file twice, see this for an example.

Although this will probably be changed in the future, just need to plan out the architectural part.

[Aliaksei-Martsinkevich]

@Anidetrix yes, I'm aware of this problem, it's one of the reasons why I switched from postcss plugin. Yet webpack css loader can handle it, because it resolve composes as webpack dependency, therefore it only compiled once and reused in each import. As far as I understand, this plugin handle all css imports via postcss, and rollup is not aware of it. So I'd suggest to handle it in a way webpack css-loader does: instead of resolving imports by postcss transform file and report imports to rollup. Maybe It's possible to do, by transforming css module into js with imports of another css file. I don't really know is it even possible in rollup, because I've barely worked with it, but that's what I'd try

[badtant]

Hi, Any update on this issue? Ran into it today :)

[tilnea]

Hi @Aliaksei-Martsinkevich

how did you do unside your index.ts?

I need to log it to make it work.. Like this

import common from 'common.module.css';

console.log(common)

[Aliaksei-Martsinkevich]

@tilnea, I don't work on that project anymore nor do I use css modules rn, so I'm not sure.

Most likely it was just import "common.module.css", but it may vary based on your rollup/plugin configuration.