Monitor your CSS in development to create a whitelist for PurgeCSS in Rails with Webpacker
MIT License
Monitor your CSS in development to create a whitelist for PurgeCSS in Rails with Webpacker.
This can be used to purge unused CSS classes from Bootstrap, TailwindCSS, or any other CSS framework you include in Webpacker.
How to use my plugin.
Add this line to your application's Gemfile:
gem 'superleggera'
And then execute:
$ bundle
Or install it yourself as:
$ gem install superleggera
Make sure your app has Bootstrap, TailwindCSS, or another CSS framework loaded via Webpacker and not the asset pipeline.
Then update your config/webpack/development.js
file:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
// Configure PurgeCSS
const PurgecssPlugin = require('purgecss-webpack-plugin')
const fs = require("fs")
const glob = require('glob-all')
const path = require('path')
var whitelist_path = "config/whitelist.json"
var whitelist = []
if (fs.existsSync(whitelist_path)) {
whitelist = JSON.parse(fs.readFileSync(whitelist_path))
}
environment.plugins.append('PurgecssPlugin', new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, '../../app/views/**/*.html.erb'),
]),
whitelist: whitelist
}))
module.exports = environment.toWebpackConfig()
The gem is available as open source under the terms of the MIT License.