Compare most popular PostCSS packs like cssnext, rucksack and PreCSS
| PostCSS Plugin | postcss-cssnext | rucksack | PreCSS |
|---|---|---|---|
| autoprefixer | ✅ | ✅ | |
| laggard | ✅ | ||
| pixrem | ✅ | ||
| pleeease-filters | ✅ | ||
| -advanced-variables | ✅ | ||
| -alias | ✅ | ||
| -atroot | ✅ | ||
| -calc | ✅ | ||
| -clearfix | ✅ | ||
| -color-function | ✅ | ✅ | |
| -color-gray | ✅ | ||
| -color-hex-alpha | ✅ | ||
| -color-hwb | ✅ | ||
| -color-rebeccapurple | ✅ | ||
| -color-rgba-fallback | ✅ | ||
| -custom-media | ✅ | ✅ | |
| -custom-properties | ✅ | ✅ | |
| -custom-selectors | ✅ | ✅ | |
| -easings | ✅ | ||
| -extend | ✅ | ||
| -font-variant | ✅ | ||
| -fontpath | ✅ | ||
| -hexrgba | ✅ | ||
| -initial | ✅ | ||
| -input-style | ✅ | ||
| -media-minmax | ✅ | ✅ | |
| -mixins | ✅ | ||
| -nested | ✅ | ||
| -nesting | ✅ | ✅ | |
| -partial-import | ✅ | ||
| -position | ✅ | ||
| -property-lookup | ✅ | ✅ | |
| -pseudo-class-any-link | ✅ | ||
| -pseudoelements | ✅ | ||
| -quantity-queries | ✅ | ||
| -responsive-type | ✅ | ||
| -selector-matches | ✅ | ✅ | |
| -selector-not | ✅ | ✅ |
Assuming that each pack should focus on just one topic, it's an indicator that one of the pack did not achieve this strategy or the aspect of the topic was chosen wrongly. Read more in the PostCSS Plugin Guideline - Do one thing, and do it well
Yes. You might need to figure out in which order you need to use them.
It depends on the plugin(s). Some plugins contains a note in the Readme like postcss-import. If you want to use precss and cssnext, precss need to be loaded before cssnext.
It depends on the plugin. But the autoprefixer for instance doesn't do anything if it will process the data a second time.
Every pack should provide an options argument to disable particular plugnis.
cssnext provides a browsers option to enable/disable features automatically based on the caniuse database.