Plugins run twice on css modules

[pascalduez]

Hi,

I'm still investigating the issue but wanted some feedback:

postcss({
  modules: true,
  extract: true,
  plugins: [
    require('postcss-custom-properties')({ preserve: true })
  ],
})

Result:

.Button_primary__1gH9y {
  color: green;
  color: green;
  color: var(--color-primary);
}

I did some logging and the postcss-custom-properties is run twice on the same css module, hence the duplicate fallback.

1st

.primary {
  color: var(--color-primary);
}

2nd

.Button_primary__1gH9y {
  color: green;
  color: var(--color-primary);
}

[pascalduez]

Ok, narrowed to madyankin/postcss-modules/issues/70

[pascalduez]

Also using CSS modules composition could result in a bunch of duplicate rules.

/* Shared.css */
.test {
  content: 'test';
}

/* Foo.css */
.foo {
  composes: test from './Shared.css';
}

/* Bar.css */
.bar {
  composes: test from './Shared.css';
}

Result:

.Shared-test {
  content: 'test';
}

.Foo-foo {}

.Shared-test {
  content: 'test';
}

.Bar-bar {}

[peter-mouland]

I ran into this issue today, was there a fix for this?

[n370]

I found that changing https://github.com/egoist/rollup-plugin-postcss/blob/master/src/postcss-loader.js#L75 from push to unshift fixes the issue.

[Anidetrix]

@n370 @himself65 this change breaks such plugins as postcss-import, cause imported classes won't be modularized

[n370]

@Anidetrix yeah, you're right. We need to find a better solution. One easy solution I can think of is to maybe add a hardcoded list of plugin names that need to be loaded before postcss-modules and then split the user provided list of plugins into a list of plugins to be loaded before postcss-modules and a list to be loaded after. But really that's my naive take since I have just a small experience with the codebase.

[Anidetrix]

@n370 This is due to the fact that postcss-modules calls PostCSS inside itself, thus causing the doubling. The proper solution is to adapt separate PostCSS plugins for modules as it is done in webpack's css-loader.

[n370]

@Anidetrix I haven't observed that behavior in my use case but that might be the case. Anyways, I was thinking about why one would want to use the postcss-import plugin when they already have sass, less and stylus built in.

[Anidetrix]

@n370 probably with something like SugarSS

[n370]

got you!

[egoist]

🎉 This issue has been resolved in version 2.4.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[pascalduez]

The issue is still alive: rollup-plugin-postcss@3.1.4

[danny-andrews]

Can confirm, I still see this issue on 3.1.8.

When I use composes: classname from "./some-module.js", I end up with that rule definition being duplicated in the css output.

[danny-andrews]

This particular issue is a dupe of #26.