This plugin will be kill your unused css
Why do you need this?
Your css is increasing after each iteration? Coverage of pages smaller 5%? This plugin try to clear all trash in your styles.
Example
Your html(haml, jsx, js, etc) have only classes .container, .row, col-12:
<div class="container">
<div class="row">
<div class="col-12">
<h1>Hello!</h1>
</div>
</div>
</div>But in styles you import all bootstrap grid
@import '~bootstrap/scss/grid';In result you have 99% useless css code.
If you add this plugin to your postcss config in result you have only styles, that you use:
.container {
/* ...code... */
}
.row {
/* ...code... */
}
.col-12 {
/* ...code... */
}
@media screen and (max-width: 300px) {
.container {
/* ...code... */
}
.row {
/* ...code... */
}
.col-12 {
/* ...code... */
}
}
/* etc */1. Installation
npm i -D postcss-trash-killeryarn add --save postcss-trash-killer2. Configuration
After install add this plugin to your plugin 'pipeline'
// postcss.config.js
const autoprefixer = require('autoprefixer');
const cssTrashKiller = require('postcss-trash-killer');
const configForCleaner = {
tagSelectors: false, // default true, include all simple tag selectors(html, body, *, h1, but not `.className h1`
fileExtensions: ['.haml', '.js'], // File types for scanning selectors
paths: ['app/view/', 'some/second/path'], // Paths with your view files
libs: ['slick-carousel'], // Include lib, who work with view and installed via npm(yarn) and located in node_modules in root dir
libsExtension: ['.js'], // File types for libraries
whitelist: ['dontTouchSelector'], // not removable selectors
dynamicSelectors: ['theme-color'] // If you use dynamic selectors, insert here part of selector. Not removed all selectors if contains 'theme-color' part
};
module.exports = {
plugins: [
cssTrashKiller(configForCleaner),
autoprefixer
]
}Note!
This plugin in addition remove empty media queries!