Plugins run twice on css modules about rollup-plugin-postcss HOT 14 CLOSED

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

from rollup-plugin-postcss.

@n370 probably with something like SugarSS

from rollup-plugin-postcss.

The issue is still alive: [email protected]

from rollup-plugin-postcss.

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

from rollup-plugin-postcss.

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 {}

from rollup-plugin-postcss.

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

from rollup-plugin-postcss.

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.

from rollup-plugin-postcss.

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

from rollup-plugin-postcss.

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

from rollup-plugin-postcss.

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

from rollup-plugin-postcss.

got you!

from rollup-plugin-postcss.

🎉 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 📦🚀

from rollup-plugin-postcss.

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.

from rollup-plugin-postcss.

This particular issue is a dupe of #26.

from rollup-plugin-postcss.